Nuxt Module

The Nuxt module for UnoCSS.

Installation

pnpm

pnpm add -D unocss @unocss/nuxt

yarn

yarn add -D unocss @unocss/nuxt

npm

npm install -D unocss @unocss/nuxt

Add @unocss/nuxt to your Nuxt config file:

nuxt.config.ts

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

Create a uno.config.ts file:

uno.config.ts

import { defineConfig } from 'unocss'

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

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

Support status

	Nuxt 2	Nuxt Bridge	Nuxt 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

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

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

uno.config.ts

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

export default config

or modify/extend it:

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

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

License

• MIT License © 2021-PRESENT Anthony Fu