Nuxt

Installation

npm install @chartts/vue

Basic usage

<script setup lang="ts">
import { LineChart } from '@chartts/vue'

const { data: metrics } = await useFetch('/api/metrics')
</script>

<template>
  <LineChart :data="metrics" x="month" y="revenue" class="h-64" />
</template>

SSR support

Chart.ts Vue components render as SVG on the server and hydrate on the client. No special Nuxt configuration needed. Charts appear in the initial HTML response with zero layout shift.

Auto-imports

You can register Chart.ts components globally with a Nuxt plugin for auto-imports. Create plugins/chartts.ts:

import { LineChart, BarChart, PieChart } from '@chartts/vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('LineChart', LineChart)
  nuxtApp.vueApp.component('BarChart', BarChart)
  nuxtApp.vueApp.component('PieChart', PieChart)
})

Tailwind CSS

If you're using @nuxtjs/tailwindcss, Chart.ts Tailwind classes work automatically. Dark mode with dark: variants, responsive breakpoints, and all Tailwind utilities.

Composables

Use Nuxt composables like useFetch, useAsyncData, and useState to manage chart data. Reactive data flows through to charts automatically via Vue's reactivity system.