Using Nuxt

Create Nuxt project

To get started, we will need to create a new Nuxt project using npx.

npx nuxi@latest init test-app

pnpm dlx nuxi@latest init test-app

bunx nuxi@latest init test-app

Enter the newly created directory and install the dependencies.

cd test-app
pnpm install

cd test-app
npm install

cd test-app
yarn install

cd test-app
bun install

Install Panda

Install panda, the Vite plugin, and create your panda.config.ts file.

pnpm install -D @pandacss/dev @pandacss/vite
pnpm panda init

npm install -D @pandacss/dev @pandacss/vite
npx panda init

yarn add -D @pandacss/dev @pandacss/vite
yarn panda init

bun add -D @pandacss/dev @pandacss/vite
bun panda init

Add the Vite plugin

Nuxt runs on Vite, so the plugin goes in the vite section of your Nuxt config. It generates the styled-system folder, injects the CSS, and keeps both up to date on save. No separate watcher needed.

import pandacss from '@pandacss/vite'
import { createResolver } from '@nuxt/kit'
const { resolve } = createResolver(import.meta.url)
 
export default defineNuxtConfig({
  alias: {
    'styled-system': resolve('./styled-system')
  },
  css: ['@/assets/css/global.css'],
  vite: {
    plugins: [pandacss()]
  }
})

With the above we've performed the following:

• added the panda plugin to Nuxt's Vite config.
• imported the global css file @/assets/css/global.css (created in a later step) at the root of the system.
• created an alias that points to the styled-system directory.

Update package.json scripts

Open your package.json file and update the scripts section as follows:

{
  "scripts": {
+    "prepare": "panda codegen",
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  }
}

The plugin only runs with Vite. The "prepare" script covers type checking and your editor, which read styled-system before Vite starts, and lets the folder stay gitignored.

Configure the content

Make sure that all of the paths of your Vue components are included in the include section of the panda.config.ts file.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  // Whether to use css reset
  preflight: true,
 
  // Where to look for your css declarations
  include: ['./app.vue', './components/**/*.{js,jsx,ts,tsx,vue}', './pages/**/*.{js,jsx,ts,tsx,vue}'],
 
  // Files to exclude
  exclude: [],
 
  // The output directory for your css system
  outdir: 'styled-system'
})

Configure CSS layers

Add this code to an assets/css/global.css file.

@layer reset, base, tokens, recipes, utilities;

This file only sets the layer order. The plugin injects the generated CSS for you.

Start your build process

Run the following command to start your development server.

pnpm dev

npm run dev

yarn dev

bun dev

Start using Panda

Now you can start using Panda CSS in your project.

As an example here is a snippet of code for a components/Demo.vue file.

<script setup lang="ts">
import { css } from "styled-system/css";
</script>
 
<template>
  <div :class="css({ fontSize: '5xl', fontWeight: 'bold' })">Hello 🐼!</div>
</template>

Optional: drop the styling runtime

By default css() resolves class strings in the browser with a small runtime. Turn on source transforms and the plugin rewrites static calls to plain class strings at build time, so the runtime never ships:

vite: {
  plugins: [pandacss({ transform: true })]
}

Dynamic values keep their runtime form. See Source transforms.