Modulo Nuxt

Il modulo Nuxt per UnoCSS.

Installazione

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

Aggiungi @unocss/nuxt al tuo file di configurazione Nuxt:

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

Crea un file uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...opzioni UnoCSS
})

Il punto di ingresso uno.css verrà automaticamente iniettato dal modulo.

Stato del supporto

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

Configurazione

Ti consigliamo di usare il file dedicato uno.config.ts per la configurazione. Vedi File di Configurazione per maggiori dettagli.

Puoi abilitare l'opzione nuxtLayers, così Nuxt unirà automaticamente i file uno.config da ogni livello Nuxt:

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

poi puoi riesportare la configurazione generata nel file di configurazione root:

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

export default config

o modificarla/estenderla:

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

export default mergeConfigs([config, {
  // le tue sovrascritture
}])

Licenza

• MIT License © 2021-PRESENT Anthony Fu