Nuxtモジュール

UnoCSS用のNuxtモジュールです。

インストール

pnpm

pnpm add -D unocss @unocss/nuxt

yarn

yarn add -D unocss @unocss/nuxt

npm

npm install -D unocss @unocss/nuxt

bun

bun add -D unocss @unocss/nuxt

Nuxtの設定ファイルに@unocss/nuxtを追加します：

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

uno.config.tsファイルを作成します：

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSSのオプション
})

uno.cssエントリはモジュールによって自動的に挿入されます。

サポート状況

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

設定

設定には専用のuno.config.tsファイルを使うことを推奨します。詳細は設定ファイルを参照してください。

nuxtLayersオプションを有効にすると、Nuxtは各レイヤーのuno.configファイルを自動的にマージします：

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

その後、生成された設定をルートの設定ファイルで再エクスポートできます：

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

export default config

または、修正・拡張も可能です：

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

export default mergeConfigs([config, {
  // 独自の上書き設定
}])

ライセンス

• MIT License © 2021-PRESENT Anthony Fu