ContextQMD
Back to Unocss

UnoCSS Nuxt Module

docs/integrations/nuxt.md

66.6.81.8 KB
Original Source

Nuxt Module

The Nuxt module for UnoCSS.

Installation

::: code-group

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

:::

Add @unocss/nuxt to your Nuxt config file:

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

Create a uno.config.ts file:

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:

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

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

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