Using Nuxt

Compile Bamboo styles in Nuxt through its Vite configuration.

Install and initialize Bamboo

pnpm install -D @bamboocss/dev @bamboocss/vite
pnpm bamboo init

Keep "prepare": "bamboo codegen" in package.json so generated types exist before the editor or TypeScript reads them.

Include Vue sources

bamboo.config.ts

import { defineConfig } from '@bamboocss/dev'
 
export default defineConfig({
  include: ['./app.vue', './components/**/*.{js,jsx,ts,tsx,vue}', './pages/**/*.{js,jsx,ts,tsx,vue}'],
  outdir: 'styled-system',
})

Configure Nuxt

nuxt.config.ts

import bamboocss from '@bamboocss/vite'
import { defineNuxtConfig } from 'nuxt/config'
 
export default defineNuxtConfig({
  vite: {
    plugins: [bamboocss()],
  },
  css: ['virtual:bamboo.css'],
})

Import generated modules with relative paths from components:

components/Demo.vue

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

There is no Bamboo PostCSS configuration or authored @layer prelude. See Using Vite for the compiler contract and diagnostics.