Nuxt 模組

適用於 UnoCSS 的 Nuxt 模組。

安裝

pnpm

pnpm add -D unocss @unocss/nuxt

yarn

yarn add -D unocss @unocss/nuxt

npm

npm install -D unocss @unocss/nuxt

將 @unocss/nuxt 加入您的 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 授權 © 2021-PRESENT Anthony Fu