Skip to content

Nuxt 模块

这是一个用于 UnoCSS 的 Nuxt 模块。

安装

bash
pnpm add -D @unocss/nuxt
bash
yarn add -D @unocss/nuxt
bash
npm install -D @unocss/nuxt

在你的 Nuxt 配置文件中添加 @unocss/nuxt

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

创建一个 uno.config.ts 文件:

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

export default defineConfig({
  // ...UnoCSS 选项
})

uno.css 入口将由模块自动注入。

支持状态

Nuxt 2Nuxt BridgeNuxt 3
Webpack 开发🚧
Webpack 构建
Vite 开发-
Vite 构建-

配置

我们推荐使用专门的 uno.config.ts 文件进行配置。详情见 配置文件

可以启用 nuxtLayers 选项,这样 Nuxt 会自动合并每个 Nuxt 层中的 uno.config 文件:

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

然后你可以在根配置文件中重新导出生成的配置:

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

export default config

或者修改/扩展它:

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

export default mergeConfigs(config, {
    // 你的覆盖配置
})

许可证

Released under the MIT License.