Nuxt モジュール

UnoCSS の Nuxt モジュールです。

インストール

pnpm

pnpm add -D unocss @unocss/nuxt

yarn

yarn add -D unocss @unocss/nuxt

npm

npm install -D unocss @unocss/nuxt

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

nuxt.config.ts

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

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

uno.config.ts

import { defineConfig } from 'unocss'

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

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

サポート状況

	Nuxt 2	Nuxt Bridge	Nuxt 3
Webpack 開発	✅	✅	🚧
Webpack ビルド	✅	✅	✅
Vite 開発	-	✅	✅
Vite ビルド	-	✅	✅

設定

設定には専用の `uno.config.ts` ファイルを使用することをお勧めします。詳細は設定ファイルをご覧ください。

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

nuxt.config.ts

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

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

uno.config.ts

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, {
  // your overrides
}])

ライセンス

• MIT License © 2021-PRESENT Anthony Fu