Nuxt 整合

PikaCSS 透過 @pikacss/nuxt-pikacss 套件為 Nuxt 提供專屬模組。

安裝

pnpm

pnpm add -D @pikacss/nuxt-pikacss

npm

npm install -D @pikacss/nuxt-pikacss

yarn

yarn add -D @pikacss/nuxt-pikacss

bun

bun add -D @pikacss/nuxt-pikacss

設定 Nuxt

在你的 nuxt.config.ts 中註冊模組：

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

就這樣——不需要額外設定。模組會自動處理一切。

自訂選項

你可以透過 Nuxt 設定中的 pikacss 鍵來設定 PikaCSS 選項：

// nuxt.config.ts
export default defineNuxtConfig({
	modules: ['@pikacss/nuxt-pikacss'],

	pikacss: {
		// Customize file scanning patterns
		scan: {
			include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],
			exclude: ['node_modules/**'],
		},

		// The function name used in source code (default: 'pika')
		fnName: 'pika',

		// Output format: 'string' | 'array' | 'inline' (default: 'string')
		transformedFormat: 'string',

		// TypeScript codegen file (default: true → 'pika.gen.ts')
		tsCodegen: true,

		// CSS codegen file (default: true → 'pika.gen.css')
		cssCodegen: true,
	},
})

ModuleOptions 型別與 @pikacss/unplugin-pikacss 中的 PluginOptions 相同，但省略了 currentPackageName 欄位（它在內部被設定為 '@pikacss/nuxt-pikacss'）。

模組自動設定的內容

Nuxt 模組會自動處理以下事項：

1. 註冊 Nuxt 插件，匯入 pika.css——你無需手動匯入產生的 CSS。
2. 新增 Vite 插件（@pikacss/unplugin-pikacss/vite），並設定 enforce: 'pre' 以確保正確的轉換順序。
3. 轉送選項，將 nuxt.options.pikacss 中的選項傳遞至底層 Vite 插件。
4. 預設掃描規則：若未提供 pikacss 選項，預設會掃描 **/*.vue、**/*.tsx 和 **/*.jsx 檔案。

無需匯入 CSS

與其他整合不同，你無需在進入點檔案中新增 import 'pika.css'。Nuxt 模組會建立一個插件樣板，自動為你匯入它。

插件選項

完整的選項表請參閱 Rollup 整合頁面——模組透過 pikacss 設定鍵接受相同的選項（除了 currentPackageName）。

下一步

• Webpack