Nuxt モジュール

UnoCSS のための Nuxt モジュール。

インストール

::: code-group

pnpm add -D unocss @unocss/nuxt

yarn add -D unocss @unocss/nuxt

npm install -D unocss @unocss/nuxt

bun add -D unocss @unocss/nuxt

:::

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

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

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

import { defineConfig } from 'unocss'

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

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

サポート状況

設定

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

nuxtLayers オプションを有効にすると、Nuxt は各 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