Skip to content

Nuxt Module

The Nuxt module for UnoCSS.

Installation

bash
pnpm add -D unocss @unocss/nuxt
bash
yarn add -D unocss @unocss/nuxt
bash
npm install -D unocss @unocss/nuxt

Add @unocss/nuxt to your Nuxt config file:

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

Create a uno.config.ts file:

uno.config.ts
ts
import { defineConfig } from 'unocss'

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

The uno.css entry will be automatically injected by the module.

Support status

Nuxt 2Nuxt BridgeNuxt 3
Webpack Dev🚧
Webpack Build
Vite Dev-
Vite Build-

Configuration

We recommend to use the dedicated uno.config.ts file for configuration. See Config File for more details.

You can enable the nuxtLayers option, so Nuxt will automatically merge uno.config files from each Nuxt layer:

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

then you can reexport the generated config in the root config file:

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

export default config

or modify/extend it:

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

export default mergeConfigs([config, {
  // your overrides
}])

License

Released under the MIT License.