installation
vue

Using Vue

Easily use Bamboo with Vue with our dedicated integration.

Start a new project

Create Vite project

To get started, we will need to create a new Vue project using the official scaffolding tool (opens in a new tab).

If you don't enter any parameter, the CLI will guide you through the process of creating a new Vue app.

pnpm create vue@latest

You will be asked a few questions, answer them as follows:

Vue.js - The Progressive JavaScript Framework
 
✔ Project name: … test-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

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 @bamboocss/vite
pnpm bamboo init

Update package.json scripts

Add "prepare": "bamboo codegen" to scripts. It runs codegen after every dependency install, so the output directory can stay in .gitignore.

Add the Vite plugin

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bamboocss from '@bamboocss/vite'
 
export default defineConfig({
  plugins: [vue(), bamboocss()],
})

Import virtual:bamboo.css once from src/main.ts. Style calls in <script> and in the compiled template are folded after @vitejs/plugin-vue.

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: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
 
  // Files to exclude
  exclude: [],
 
  // The output directory for your css system
  outdir: 'styled-system',
})

Start your build process

Start the dev server with pnpm dev.

Start using Bamboo

src/App.vue

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