Стилизация

Nuxt очень гибок в плане стилизации. Пишите собственные стили или ссылайтесь на локальные и внешние таблицы стилей. Вы можете использовать препроцессоры CSS, CSS-фреймворки, UI-библиотеки и модули Nuxt для стилизации приложения.

Локальные таблицы стилей

Если вы пишете локальные таблицы стилей, стандартным местом для их размещения является директория assets/.

Импорт внутри компонентов

Вы можете импортировать таблицы стилей напрямую в свои страницы, лейауты и компоненты. Вы можете использовать javascript-импорт или css-выражение @import.

<script>
// Используйте статический импорт для совместимости на стороне сервера.
import '~/assets/css/first.css'

// Внимание: Динамический импорт несовместим со стороной сервера.
import('~/assets/css/first.css')
</script>

<style>
@import url("~/assets/css/second.css");
</style>

Свойство CSS

Вы также можете использовать свойство css в конфигурации Nuxt. Стандартным местом для ваших таблиц стилей является директория assets/. Вы можете указать путь к файлу стилей, и Nuxt включит его во все страницы приложения.

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

Работа со шрифтами

Поместите локальные файлы шрифтов в директорию ~/public/, например, в ~/public/fonts. Вы можете ссылаться на них в своих таблицах стилей с помощью url().

@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

После этого, ссылайтесь на шрифты по имени в таблицах стилей, на страницах или в компонентах:

<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>

Таблицы стилей, распространяемые через NPM

Вы также можете ссылаться на таблицы стилей, распространяемые через npm. Давайте в качестве примера воспользуемся популярной библиотекой animate.css.

npm install animate.css

После этого вы можете ссылаться на стили напрямую в своих страницах, лейаутах и компонентах:

<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

На пакет также можно ссылаться как на строку в свойстве css вашей конфигурации Nuxt.

export default defineNuxtConfig({
  css: ['animate.css']
})

Внешние таблицы стилей

Вы можете включить внешние таблицы стилей в приложение, добавив элемент link в раздел head файла nuxt.config. Вы можете достичь этого результата, используя разные методы. Обратите внимание, что локальные таблицы стилей также могут быть включены таким образом.

Вы можете управлять элементом head с помощью свойства app.head конфигурации Nuxt:

export default 
defineNuxtConfig
({
  
app
: {
    
head
: {
      
link
: [{ 
rel
: 'stylesheet', 
href
: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
    }
  }
})

Динамическое добавление таблиц стилей

Вы можете использовать композабл useHead для динамической установки значений в элементе head в вашем коде.

useHead
({
  
link
: [{ 
rel
: 'stylesheet', 
href
: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})

Nuxt использует unhead под капотом, и вы можете обратиться к его полной документации здесь.

Изменение отрендеренного head с помощью плагина Nitro

Если нужен более расширенный контроль, вы можете перехватить HTML-код с помощью хука и изменить head программно.

Создайте плагин в ~/server/plugins/my-plugin.ts следующим образом:

export default 
defineNitroPlugin
((
nitro
) => {
  
nitro
.hooks.hook('render:html', (
html
) => {
    
html
.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
  })
})

Внешние таблицы стилей являются блокирующими рендеринг ресурсами: они должны быть загружены и обработаны до того, как браузер отобразит страницу. Веб-страницы, содержащие неоправданно большие стили, требуют больше времени для рендеринга. Подробнее об этом можно прочитать на web.dev.

Использование препроцессоров

Чтобы использовать препроцессор, такой как SCSS, Sass, Less или Stylus, сначала установите его.

npm install -D sass

Обычным местом для написания таблиц стилей является директория assets. Затем вы можете импортировать исходные файлы в app.vue (или файлы лейаутов), используя синтаксис препроцессора.

<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

В качестве альтернативы вы можете использовать свойство css вашей конфигурации Nuxt.

export default 
defineNuxtConfig
({
  
css
: ['~/assets/scss/main.scss']
})

Если вам необходимо внедрить код в предварительно обработанные файлы, такие как sass-фрагменты с переменными цветов, вы можете сделать это с помощью параметров препроцессоров Vite.

Создайте несколько фрагментов (partials) в директории assets:

$primary: #49240F;
$secondary: #E4A79D;

Затем в nuxt.config :

export default 
defineNuxtConfig
({
  
vite
: {
    
css
: {
      
preprocessorOptions
: {
        
scss
: {
          
additionalData
: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

Nuxt использует Vite по умолчанию. Если вы хотите использовать вместо этого webpack, обратитесь к документации загрузчика нужного препроцессора.

Стилизация однофайловых компонентов (SFC)

Одной из лучших особенностей Vue и SFC является то, насколько они хороши в работе со стилями. Вы можете напрямую писать CSS или код препроцессора в блоке стилей компонента, поэтому у вас будет фантастический опыт разработчика без необходимости использовать что-то вроде CSS-in-JS. Однако, если вы хотите использовать CSS-in-JS, вы можете найти сторонние библиотеки и модули, которые его поддерживают, например pinceau.

Подробную справочную информацию о стилизации компонентов в SFC можно найти в документации Vue.

Привязки классов и стилей

Вы можете использовать возможности Vue SFC для стилизации своих компонентов с помощью атрибутов class и style.

<script setup lang="ts">
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>
</template>

Более подробную информацию можно найти в документации Vue.

Динамические стили с v-bind

Вы можете ссылаться на JavaScript переменные и выражения в блоках стилей с помощью функции v-bind. Привязка будет динамической, то есть если значение переменной изменится, стиль будет обновлен.

<script setup lang="ts">
const color = ref("red")
</script>

<template>
  <div class="text">привет</div>
</template>

<style>
.text {
  color: v-bind(color);
}
</style>

Cтили с ограниченной областью видимости

Атрибут scoped позволяет вам стилизовать компоненты изолированно. Стили, объявленные с этим атрибутом, будут применяться только к этому компоненту.

<template>
  <div class="example">хай</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

CSS-модули

Вы можете использовать CSS-модули с атрибутом module. Доступ к модулю осуществляется с помощью внедренной переменной $style.

<template>
  <p :class="$style.red">Это должно быть красным.</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Поддержка препроцессоров

Блоки стилей SFC поддерживают синтаксис препроцессоров. Vite поставляется со встроенной поддержкой файлов .scss, .sass, .less, .styl и .stylus без конфигурации. Вам просто нужно установить их, и они будут доступны непосредственно в SFC с атрибутом lang.

<style lang="scss">
  /* Пишите scss здесь */
</style>

Вы можете обратиться к документации Vite CSS и документации @vitejs/plugin-vue. Для пользователей webpack обратитесь к документации по загрузчику Vue.

Использование PostCSS

Nuxt поставляется со встроенным postcss. Вы можете настроить его в файле nuxt.config.

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-custom-media': {}
    }
  }
})

Для правильной подсветки синтаксиса в SFC можно использовать атрибут lang со значением postcss.

<style lang="postcss">
  /* Пишите postcss здесь */
</style>

По умолчанию Nuxt поставляется со следующими предварительно настроенными плагинами:

• postcss-import: Улучшает правило @import
• postcss-url: Преобразует выражения url()
• autoprefixer: Автоматически добавляет вендорные префиксы
• cssnano: Минифицирует и очищает

Использование лейаутов для нескольких стилей

Если нужно стилизовать разные части приложения совершенно по-разному, вы можете использовать лейауты. Используйте разные стили для разных лейаутов.

<template>
  <div class="default-layout">
    <h1>Лейаут по умолчанию</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>

Сторонние библиотеки и модули

Nuxt не отличается категоричностью в вопросе стилизации, и предоставляет вам широкий спектр опций. Вы можете использовать любой инструмент для стилизации, который вам нужен, например, популярные библиотеки, такие как UnoCSS или Tailwind CSS.

Сообщество и команда Nuxt разработали множество модулей, которые упрощают интеграцию. Вы можете ознакомиться с ними в разделе модули веб-сайта. Вот несколько модулей, которые помогут вам начать работу:

• UnoCSS: Атомарный CSS-движок
• Tailwind CSS: CSS-фреймворк, основанный на утилитах
• Fontaine: реализация fallback-метрики шрифтов
• Pinceau: Адаптивный фреймворк для стилизации
• Nuxt UI: Библиотека пользовательского интерфейса для современных веб-приложений
• Panda CSS: движок CSS-in-JS, который генерирует атомарный CSS во время сборки

Модули Nuxt предоставляют вам хороший опыт разработки из коробки, но помните, что если ваш любимый инструмент не имеет модуля, это не значит, что вы не можете использовать его с Nuxt! Вы можете настроить его самостоятельно для своего проекта. В зависимости от инструмента вам может потребоваться использовать плагин Nuxt и/или создать свой собственный модуль. Поделитесь ими с сообществом, если вы это сделаете!

Простая загрузка веб-шрифтов

Вы можете использовать модуль Nuxt Google Fonts для загрузки Google Fonts.

Если вы используете UnoCSS, обратите внимание, что он поставляется с предустановками веб-шрифтов для удобной загрузки шрифтов от распространенных поставщиков, включая Google Fonts и другие.

Продвинутый уровень

Переходы

Nuxt поставляется с тем же компонентом <Transition>, что и Vue, а также поддерживает экспериментальный View Transitions API.

Продвинутая оптимизация шрифтов

Мы рекомендуем использовать Fontaine для сокращения вашего CLS. Если вам нужно что-то более продвинутое, рассмотрите возможность создания модуля Nuxt для расширения процесса сборки или рантайма Nuxt.

Продвинутая оптимизация LCP

Вы можете сделать следующее, чтобы ускорить загрузку ваших глобальных CSS-файлов:

• Используйте CDN, чтобы файлы были физически ближе к вашим пользователям
• Сжимайте ваши ассеты, в идеале с помощью Brotli
• Используйте HTTP2/HTTP3 для доставки
• Размещайте ваши ассеты на том же домене (не используйте другой поддомен)

Большинство из этих вещей могут быть сделаны для вас автоматически, если вы используете современные платформы, такие как Cloudflare, Netlify или Vercel. Вы можете найти руководство по оптимизации LCP на web.dev.

Если весь ваш CSS встроен инлайн с помощью Nuxt, вы можете (экспериментально) полностью запретить внешние CSS файлы в отрисованном HTML. Вы можете добиться этого с помощью хука, который вы можете поместить в модуль или в файл конфигурации Nuxt.

export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // ищем список файлов css в точке входа в приложение
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        // начинаем с конца массива и двигаемся к его началу
        for (let i = css.length - 1; i >= 0; i--) {
          // если css начинается с «entry», удаляем его из списка
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})