Модуль Nuxt

Модуль Nuxt для UnoCSS.

Установка

pnpm

pnpm add -D unocss @unocss/nuxt

yarn

yarn add -D unocss @unocss/nuxt

npm

npm install -D unocss @unocss/nuxt

bun

bun add -D unocss @unocss/nuxt

Добавьте @unocss/nuxt в ваш файл конфигурации Nuxt:

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
  ],
})

Создайте файл uno.config.ts:

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...параметры UnoCSS
})

Точка входа uno.css будет автоматически внедрена модулем.

Статус поддержки

	Nuxt 2	Nuxt Bridge	Nuxt 3
Webpack Dev	✅	✅	🚧
Webpack Build	✅	✅	✅
Vite Dev	-	✅	✅
Vite Build	-	✅	✅

Конфигурация

Мы рекомендуем использовать отдельный файл uno.config.ts для настройки. Подробнее см. в разделе Файл конфигурации.

Вы можете включить опцию nuxtLayers, чтобы Nuxt автоматически объединял файлы uno.config из каждого слоя Nuxt:

nuxt.config.ts

export default defineNuxtConfig({
  // ...
  unocss: {
    nuxtLayers: true,
  },
})

затем вы можете реэкспортировать сгенерированную конфигурацию в корневом файле конфигурации:

uno.config.ts

import config from './.nuxt/uno.config.mjs'

export default config

или изменить/расширить её:

import { mergeConfigs } from '@unocss/core'
import config from './.nuxt/uno.config.mjs'

export default mergeConfigs([config, {
  // ваши переопределения
}])

Лицензия

• Лицензия MIT © 2021-настоящее время Anthony Fu