Стилизация

Узнайте, как стилизовать свое приложение Nuxt.

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

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

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

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

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

<!-- app/pages/index.vue -->

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

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

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

Таблицы стилей будут встроены в HTML-код, отображаемый Nuxt.

Свойство CSS

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

// nuxt.config.ts

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

Таблицы стилей будут встроены в HTML, отображаемый Nuxt, внедрены глобально и будут присутствовать на всех страницах.

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

Поместите файлы локальных шрифтов в свой каталог public/, например, в /public/fonts. Затем вы можете ссылаться на них в своих таблицах стилей, используя url().

// assets/css/main.css

@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
npm install animate.css

# yarn
yarn add animate.css

# pnpm
pnpm install animate.css

# bun
bun install animate.css

# deno
deno install npm:animate.css

Затем вы можете ссылаться на него непосредственно на своих страницах, макетах и компонентах:

<!-- app/app.vue -->

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

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

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

// nuxt.config.ts

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

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

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

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

// nuxt.config.ts

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

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

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

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

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

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

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

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

// 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, сначала установите его.

# Sass и SCSS
npm install -D sass

# LESS
npm install -D less

# Stylus
npm install -D stylus

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

<!-- app/pages/app.vue -->

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

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

// nuxt.config.ts

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

В обоих случаях скомпилированные таблицы стилей будут встроены в HTML, отображаемый Nuxt.

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

Создайте несколько фрагментов в вашем каталоге app/assets:

// assets/_colors.scss

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

Затем в вашем файле nuxt.config :

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

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

Воркеры препроцессора (экспериментально)

Vite представил экспериментальную опцию, которая может ускорить использование препроцессоров.

Вы можете включить ее в своем файле nuxt.config:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorMaxWorkers: true, // количество процессоров минус 1
    },
  },
})

Это экспериментальный вариант, и вам следует ознакомиться с документацией Vite и оставить отзыв.

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

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

Вы можете обратиться к документации Vue для получения подробной информации о компонентах стилизации в SFC.

Привязки к классам и стилям

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

<!-- Ref и Reactive -->

<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 :class="classObject" />
</template>

<!-- Computed -->

<script setup lang="ts">
const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  'active': isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal',
}))
</script>

<template>
  <div :class="classObject" />
</template>

<!-- Массив -->

<script setup lang="ts">
const isActive = ref(true)
const errorClass = ref('text-danger')
</script>

<template>
  <div :class="[{ active: isActive }, errorClass]" />
</template>

<!-- Атрибут "style" -->

<script setup lang="ts">
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = reactive({ color: 'red', fontSize: '13px' })
</script>

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }" />
  <div :style="[baseStyles, overridingStyles]" />
  <div :style="styleObject" />
</template>

Для получения дополнительной информации обратитесь к документации Vue.

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

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

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

<template>
  <div class="text">
    hello
  </div>
</template>

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

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

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

<template>
  <div class="example">
    hi
  </div>
</template>

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

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

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

<!-- SCSS -->

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

<!-- Sass -->

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

<!-- LESS -->

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

<!-- Stylus -->

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

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

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

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

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

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

<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 разработали множество модулей Nuxt для упрощения интеграции. Вы можете ознакомиться с ними в разделе "Модули" на веб-сайте. Вот несколько модулей, которые помогут вам начать работу:

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

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

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

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

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

Дополнительно

Переходы

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

Расширенная оптимизация шрифтов

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

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

Усовершенствованная оптимизация LCP

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

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

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

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

// nuxt.config.ts

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