Installation

Requirements

• Vue ^3.5
• motion-v ^2.4, a required peer dependency that drives all animation
• An ESM build setup (Vite, Nuxt, or another bundler). vccs ships ES modules only.
• For the Nuxt module (vccs/nuxt): Nuxt ^4
• For the resolver (vccs/resolver): unplugin-vue-components in your own dev dependencies

Install

motion-v is a peer dependency. Install it with vccs, because some package managers (for example yarn 1) do not install peer dependencies.

pnpm add vccs motion-v

npm install vccs motion-v

yarn add vccs motion-v

bun add vccs motion-v

You can now import components from vccs. To use them without imports, add the Nuxt module or the Vite resolver.

Nuxt

The module needs Nuxt 4 or later; on Nuxt 3 it stops the build with an error. It registers every component and composable. Import types and defineChartComponents from vccs.

export default defineNuxtConfig({
  modules: ['vccs/nuxt'],
  // Optional: register <VBarChart>, <VLine>, … to avoid name clashes with other UI libraries.
  vccs: { prefix: 'V' },
})

See Nuxt and SSR for server rendering.

Vite

Install unplugin-vue-components and add the resolver. It imports each component when a template uses it.

pnpm add -D unplugin-vue-components

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VccsResolver } from 'vccs/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [VccsResolver()] }),
  ],
})

Use your first chart

Import chart components and compose them in your template:

<script setup>
import {
  Bar,
  BarChart,
  CartesianGrid,
  Tooltip,
  XAxis,
  YAxis,
} from 'vccs'

const data = [
  { name: 'Page A', uv: 4000, pv: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398 },
  { name: 'Page C', uv: 2000, pv: 9800 },
  { name: 'Page D', uv: 2780, pv: 3908 },
  { name: 'Page E', uv: 1890, pv: 4800 },
  { name: 'Page F', uv: 2390, pv: 3800 },
]
</script>

<template>
  <BarChart
    :data="data"
    :height="300"
  >
    <CartesianGrid stroke-dasharray="3 3" />
    <XAxis data-key="name" />
    <YAxis />
    <Tooltip />
    <Bar
      data-key="pv"
      fill="#8884d8"
    />
    <Bar
      data-key="uv"
      fill="#82ca9d"
    />
  </BarChart>
</template>

Charts fill their container's width; :height="300" fixes the height. See Chart Size for fixed sizes and aspect ratios.

Next steps

• Nuxt and SSR — server rendering and the Nuxt module
• shadcn-vue — use vccs with shadcn-vue's chart components
• Theming and dark mode — style charts with CSS variables
• Animation — how charts move and how to tune it
• Events and v-model — react to interaction and control chart state
• TypeScript — typed slots and row-typed data keys
• Accessibility — accessible names, keyboard support and focus
• Migrate from 0.6 — breaking changes in 1.0
• Bar Chart, Line Chart, Area Chart — chart reference