وحدة Nuxt

وحدة Nuxt لـ 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 الخاص بك:

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

قم بإنشاء ملف uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...خيارات UnoCSS
})

سيتم حقن إدخال uno.css تلقائياً بواسطة الوحدة.

حالة الدعم

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

التكوين

نوصي باستخدام ملف uno.config.ts المخصص للتكوين. راجع ملف التكوين للمزيد من التفاصيل.

يمكنك تمكين خيار nuxtLayers، حتى يقوم Nuxt تلقائياً بدمج ملفات uno.config من كل طبقة Nuxt:

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

ثم يمكنك إعادة تصدير التكوين المُنشأ في ملف التكوين الجذري:

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, {
  // التجاوزات الخاصة بك
}])

الترخيص

• MIT License © 2021-PRESENT Anthony Fu