vue-chart-3

Pre-requisites

Vue 2

You need to have @vue/composition-api installed and registered.

WARNING

Since 2.0.3, Vue composition api will not register itself. Update your project if you didn't do it manually!

Vite.js and Vue 3

Nothing required, it works out of the box!

Nuxt 2 and SSR

  • Create a plugin in <srcDir>/plugins/chartjs.js
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
1
2
  • Then register it in your nuxt.config.[js|ts]
export default {
  plugins: [{ src: '~/plugins/chartjs.js', ssr: false }],
};
1
2
3

Nuxt 3

Create a plugin in <srcDir>/plugins/chartjs.client.ts

import { defineNuxtPlugin } from '#app';

// Workaround because chart.js doesn't provide an default export
import * as ChartJs from 'chart.js';
const { Chart, registerables } = ChartJs;

export default defineNuxtPlugin(() => {
  Chart.register(...registerables);
});
1
2
3
4
5
6
7
8
9

Nuxt 3 will register the plugins itself thanks to the **.client.ts, it knows that it needs to be call only client-side