1---
2name: unocss-nuxt-integration
3description: UnoCSS module for Nuxt applications
4---
5 
6# UnoCSS Nuxt Integration
7 
8The official Nuxt module for UnoCSS.
9 
10## Installation
11 
12```bash
13pnpm add -D unocss @unocss/nuxt
14```
15 
16Add to Nuxt config:
17 
18```ts
19// nuxt.config.ts
20export default defineNuxtConfig({
21  modules: [
22    '@unocss/nuxt',
23  ],
24})
25```
26 
27Create config file:
28 
29```ts
30// uno.config.ts
31import { defineConfig, presetWind3 } from 'unocss'
32 
33export default defineConfig({
34  presets: [
35    presetWind3(),
36  ],
37})
38```
39 
40**Note:** The `uno.css` entry is automatically injected by the module.
41 
42## Support Status
43 
44| Build Tool | Nuxt 2 | Nuxt Bridge | Nuxt 3 |
45|------------|--------|-------------|--------|
46| Webpack Dev | ✅ | ✅ | 🚧 |
47| Webpack Build | ✅ | ✅ | ✅ |
48| Vite Dev | - | ✅ | ✅ |
49| Vite Build | - | ✅ | ✅ |
50 
51## Configuration
52 
53### Using uno.config.ts (Recommended)
54 
55Use a dedicated config file for best IDE support:
56 
57```ts
58// uno.config.ts
59import { defineConfig, presetWind3, presetIcons } from 'unocss'
60 
61export default defineConfig({
62  presets: [
63    presetWind3(),
64    presetIcons(),
65  ],
66  shortcuts: {
67    'btn': 'py-2 px-4 font-semibold rounded-lg',
68  },
69})
70```
71 
72### Nuxt Layers Support
73 
74Enable automatic config merging from Nuxt layers:
75 
76```ts
77// nuxt.config.ts
78export default defineNuxtConfig({
79  unocss: {
80    nuxtLayers: true,
81  },
82})
83```
84 
85Then in your root config:
86 
87```ts
88// uno.config.ts
89import config from './.nuxt/uno.config.mjs'
90 
91export default config
92```
93 
94Or extend the merged config:
95 
96```ts
97// uno.config.ts
98import { mergeConfigs } from '@unocss/core'
99import config from './.nuxt/uno.config.mjs'
100 
101export default mergeConfigs([config, {
102  // Your overrides
103  shortcuts: {
104    'custom': 'text-red-500',
105  },
106}])
107```
108 
109## Common Setup Example
110 
111```ts
112// nuxt.config.ts
113export default defineNuxtConfig({
114  modules: [
115    '@unocss/nuxt',
116  ],
117})
118```
119 
120```ts
121// uno.config.ts
122import {
123  defineConfig,
124  presetAttributify,
125  presetIcons,
126  presetTypography,
127  presetWebFonts,
128  presetWind3,
129  transformerDirectives,
130  transformerVariantGroup,
131} from 'unocss'
132 
133export default defineConfig({
134  presets: [
135    presetWind3(),
136    presetAttributify(),
137    presetIcons({
138      scale: 1.2,
139    }),
140    presetTypography(),
141    presetWebFonts({
142      fonts: {
143        sans: 'DM Sans',
144        mono: 'DM Mono',
145      },
146    }),
147  ],
148  transformers: [
149    transformerDirectives(),
150    transformerVariantGroup(),
151  ],
152  shortcuts: [
153    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
154  ],
155})
156```
157 
158## Usage in Components
159 
160```vue
161<template>
162  <div class="p-4 text-center">
163    <h1 class="text-3xl font-bold text-blue-600">
164      Hello UnoCSS!
165    </h1>
166    <button class="btn mt-4">
167      Click me
168    </button>
169  </div>
170</template>
171```
172 
173With attributify mode:
174 
175```vue
176<template>
177  <div p="4" text="center">
178    <h1 text="3xl blue-600" font="bold">
179      Hello UnoCSS!
180    </h1>
181  </div>
182</template>
183```
184 
185## Inspector
186 
187In development, visit `/_nuxt/__unocss` to access the UnoCSS inspector.
188 
189## Key Differences from Vite
190 
191- No need to import `virtual:uno.css` - automatically injected
192- Config file discovery works the same
193- All Vite plugin features available
194- Nuxt layers config merging available
195 
196<!-- 
197Source references:
198- https://unocss.dev/integrations/nuxt
199-->
200