Nuxt

Nuxt has its own PikaCSS module path, but the same core rules still apply: import the generated CSS entry, keep style input static, and move reusable patterns into config.

Install

pnpm

pnpm add -D @pikacss/nuxt-pikacss

npm

npm install -D @pikacss/nuxt-pikacss

yarn

yarn add -D @pikacss/nuxt-pikacss

Minimal setup

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

When to customize scanning

If your project has non-standard source locations, customize scanning deliberately instead of assuming Nuxt module defaults will discover everything.

export default defineNuxtConfig({
	modules: ['@pikacss/nuxt-pikacss'],
	pikacss: {
		scan: {
			include: ['**/*.{js,ts,jsx,tsx,vue}'],
		},
	},
})

What usually goes wrong

• missing CSS entry import
• styles authored outside scanned files
• runtime expressions inside pika()
• assuming zero-config should cover all team-wide conventions

Next

• Static Arguments
• Integrations Overview
• Generated Files
• Common Problems