Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.4 KiB

Raw Blame History

name, description

name	description
unocss-nuxt-integration	UnoCSS module for Nuxt applications

UnoCSS Nuxt Integration

The official Nuxt module for UnoCSS.

Installation

pnpm add -D unocss @unocss/nuxt

Add to Nuxt config:

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

Create config file:

// uno.config.ts
import { defineConfig, presetWind3 } from 'unocss';

export default defineConfig({
  presets: [presetWind3()],
});

Note: The uno.css entry is automatically injected by the module.

Support Status

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

Configuration

Using uno.config.ts (Recommended)

Use a dedicated config file for best IDE support:

// uno.config.ts
import { defineConfig, presetWind3, presetIcons } from 'unocss';

export default defineConfig({
  presets: [presetWind3(), presetIcons()],
  shortcuts: {
    btn: 'py-2 px-4 font-semibold rounded-lg',
  },
});

Nuxt Layers Support

Enable automatic config merging from Nuxt layers:

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

Then in your root config:

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

export default config;

Or extend the merged config:

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

export default mergeConfigs([
  config,
  {
    // Your overrides
    shortcuts: {
      custom: 'text-red-500',
    },
  },
]);

Common Setup Example

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

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind3,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';

export default defineConfig({
  presets: [
    presetWind3(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  shortcuts: [
    [
      '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',
    ],
  ],
});

Usage in Components

<template>
  <div class="p-4 text-center">
    <h1 class="text-3xl font-bold text-blue-600">Hello UnoCSS!</h1>
    <button class="btn mt-4">Click me</button>
  </div>
</template>

With attributify mode:

<template>
  <div p="4" text="center">
    <h1 text="3xl blue-600" font="bold">Hello UnoCSS!</h1>
  </div>
</template>

Inspector

In development, visit /_nuxt/__unocss to access the UnoCSS inspector.

Key Differences from Vite

No need to import virtual:uno.css - automatically injected
Config file discovery works the same
All Vite plugin features available
Nuxt layers config merging available

3.4 KiB Raw Blame History