Nuxt Module

Nuxt module สำหรับ UnoCSS

การติดตั้ง

pnpm

pnpm add -D unocss @unocss/nuxt

yarn

yarn add -D unocss @unocss/nuxt

npm

npm install -D unocss @unocss/nuxt

bun

bun add -D unocss @unocss/nuxt

เพิ่ม @unocss/nuxt ไปยัง Nuxt config file:

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

สร้างไฟล์ uno.config.ts:

import { defineConfig } from 'unocss'

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

Entry uno.css จะถูก inject โดยอัตโนมัติโดย module

สถานะการรองรับ

	Nuxt 2	Nuxt Bridge	Nuxt 3
Webpack Dev	✅	✅	🚧
Webpack Build	✅	✅	✅
Vite Dev	-	✅	✅
Vite Build	-	✅	✅

การกำหนดค่า

เราแนะนำให้ใช้ไฟล์ uno.config.ts เฉพาะสำหรับการกำหนดค่า ดู Config File สำหรับรายละเอียดเพิ่มเติม

คุณสามารถเปิดใช้งานตัวเลือก nuxtLayers เพื่อให้ Nuxt รวมไฟล์ uno.config จากแต่ละ Nuxt layer โดยอัตโนมัติ:

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

จากนั้นคุณสามารถ reexport config ที่สร้างขึ้นใน root config file:

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

License

• MIT License © 2021-PRESENT Anthony Fu