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 选项
})

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

支持状态

	Nuxt 2	Nuxt Bridge	Nuxt 3
Webpack 开发	✅	✅	🚧
Webpack 构建	✅	✅	✅
Vite 开发	-	✅	✅
Vite 构建	-	✅	✅

配置

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

You can enable the nuxtLayers option, so Nuxt will automatically merge uno.config files from each Nuxt layer:

nuxt.config.ts

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

then you can reexport the generated config in the root config file:

uno.config.ts

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

export default config

or modify/extend it:

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

export default mergeConfigs([config, {
  // your overrides
}])

许可证

• MIT 许可证 © 2021-至今 Anthony Fu