Módulo de Nuxt

El módulo de Nuxt para UnoCSS.

Instalación

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

Agrega @unocss/nuxt a tu archivo de configuración de Nuxt:

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

Crea un archivo uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...opciones de UnoCSS
})

La entrada uno.css será inyectada automáticamente por el módulo.

Estado de soporte

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

Configuración

Recomendamos usar el archivo dedicado uno.config.ts para la configuración. Consulta Archivo de Configuración para más detalles.

Puedes habilitar la opción nuxtLayers, para que Nuxt fusione automáticamente archivos uno.config de cada capa de Nuxt:

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

entonces puedes reexportar la configuración generada en el archivo de configuración raíz:

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

export default config

o modificarla/extenderla:

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

export default mergeConfigs([config, {
  // tus sobrescrituras
}])

Licencia

• Licencia MIT © 2021-PRESENT Anthony Fu