Nuxt 模块

¥Nuxt Module

UnoCSS 的 Nuxt 模块。

¥The Nuxt module for UnoCSS.

安装

¥Installation

pnpmyarnnpm

bash

pnpm add -D unocss @unocss/nuxt

bash

yarn add -D unocss @unocss/nuxt

bash

npm install -D unocss @unocss/nuxt

将 @unocss/nuxt 添加到你的 Nuxt 配置文件中：

¥Add @unocss/nuxt to your Nuxt config file:

nuxt.config.ts

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

创建 uno.config.ts 文件：

¥Create a uno.config.ts file:

uno.config.ts

import { defineConfig } from 'unocss'

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

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

¥The uno.css entry will be automatically injected by the module.

支持状态

¥Support status

	Nuxt 2	Nuxt 桥	Nuxt 3
Webpack 开发	✅	✅	🚧
Webpack 构建	✅	✅	✅
Vite 开发	*	✅	✅
Vite 构建	*	✅	✅

配置

¥Configuration

我们建议使用专用的 uno.config.ts 文件进行配置。详细信息请参见配置文件。

¥We recommend to use the dedicated uno.config.ts file for configuration. See Config File for more details.

你可以启用 nuxtLayers 选项，这样 Nuxt 将自动合并来自每个 Nuxt 层的 uno.config 文件：

¥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
}])

许可

¥License

Nuxt 模块 ​

安装 ​

支持状态 ​

配置 ​

许可 ​

Nuxt 模块

安装

支持状态

配置

许可