installation
nuxt

Using Nuxt

Easily use Bamboo with Nuxt with the vue integration.

Learn how to set up Bamboo CSS in a Nuxt project using PostCSS.

Start a new project

Create Nuxt project

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

npx nuxi@latest init test-app

Enter the newly created directory and install the dependencies.

cd test-app
pnpm install

Install Bamboo

Install bamboo and create your bamboo.config.ts file.

pnpm install -D @bamboocss/dev
pnpm bamboo init

Update package.json scripts

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

package.json

{
  "scripts": {
+    "prepare": "bamboo codegen",
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  }
}
  • "prepare" - script that will run Bamboo CSS CLI codegen before each build. Read more about codegen in the CLI section.
💡

This step ensures that the bamboo output directory is regenerated after each dependency installation. So you can add the output directory to your .gitignore file and not worry about it.

Configure the content

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

bamboo.config.ts

import { defineConfig } from '@bamboocss/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 the entry CSS with layers

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

assets/css/global.css

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

Configure Nuxt

Add the following configuration to the nuxt.config.ts file

nuxt.config.ts

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'],
 
  postcss: {
    plugins: {
      '@bamboocss/dev/postcss': {},
    },
  },
})

With the above we've performed the following:

  • imported the global css file '@/assets/css/global.css' at the root of the system.
  • created an alias that points to the styled-system directory.
  • added bamboo into the postcss plugins section.

Start your build process

Run the following command to start your development server.

pnpm dev

Start using Bamboo

Now you can start using Bamboo CSS in your project.

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

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>
Installation
Vue
Installation
Preact