Módulo Nuxt

O módulo Nuxt para UnoCSS.

Instalação

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

Adicione @unocss/nuxt ao seu arquivo de configuração do Nuxt:

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

Crie um arquivo uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...opções do UnoCSS
})

A entrada uno.css será automaticamente injetada pelo módulo.

Status de suporte

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

Configuração

Recomendamos usar o arquivo dedicado uno.config.ts para configuração. Consulte Arquivo de Configuração para mais detalhes.

Você pode habilitar a opção nuxtLayers, para que o Nuxt mescle automaticamente os arquivos uno.config de cada camada do Nuxt:

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

então você pode reexportar a configuração gerada no arquivo de configuração raiz:

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

export default config

ou modificá-la/estendê-la:

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

export default mergeConfigs([config, {
  // suas substituições
}])

Licença

• Licença MIT © 2021-PRESENTE Anthony Fu