Use Chart.js with Nuxt v2.11.0

instructions.md

Use Chart.js with Nuxt v2.11.0

Line chart example

• Run npm i vue-chartjs
• Run npm i chart.js hchs-vue-charts
• Create a file called chart.js and save it in the /plugins directory
• Give chart.js the following contents

import Vue from 'vue'
import { Line } from 'vue-chartjs'

Vue.component('line-chart', {
	extends: Line,
	props: ['data', 'options'],
	mounted () {
		this.renderChart(this.data, this.options)
	}
})

• Include line-chart.js in nuxt.config.js plugins like so

plugins: [
	{src: '~/plugins/chart.js', mode: 'client'}
],

• Nuxt may have to be restarted at this point: npm run dev or nuxt
• Use the line chart in your views like so:

  <template>
    <client-only>
        <line-chart :data="chartData"></line-chart>
    </client-only>
  </template>

  <script>
  export default {
    data() {
      return {
        chartData: {
          datasets: [{
            label: 'Title',
            data: [45, 55, 48, 35, 12]
          }]
        }
      };
    }
  }
  </script>

• The chart will still render without client-only however the client side DOM tree will no longer match the server render and a console error will be shown.

Multi chart example

• You can add multiple Chart.js types to your chart.js plugin file like so:

import Vue from 'vue'
import { Line } from 'vue-chartjs'
import { Pie } from 'vue-chartjs'

Vue.component('line-chart', {
	extends: Line,
	props: ['data', 'options'],
	mounted () {
		this.renderChart(this.data, this.options)
	}
})

Vue.component('pie-chart', {
	extends: Pie,
	props: ['data', 'options'],
	mounted () {
		this.renderChart(this.data, this.options)
	}
})

This worked well for me with everyone's tips. I had to remove <client-only>...</client-only> .. it was causing some screwy page rendering behavior. My charts were showing up only after saving my Nuxt project, but not on a page refresh. Removing that resolved the issue for me and I haven't noticed any problems or console errors without it

I'm using chartsjs in markdown files with embedded Vue components.

Thank you all for your input on this.

Below is what worked for me.

---

Relevant package versions:

"dependencies": {
  "vue": "^2.7.8",
  "nuxt": "^2.15.8",
  "chart.js": "^3.8.0",
  "vue-chartjs": "^4.1.1",
  "hchs-vue-charts": "^1.2.8",
},

/plugins/chart.js

import Vue from 'vue'
import { Line } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement
)

Vue.component('line-chartjs', {
  extends: Line
})

nuxt.config.js

  plugins: [
    { src: '~/plugins/chart.js', mode: 'client' }
  ],

markdown file: (I'm doing some custom work here.. so the format will look a bit off)

---
title: Chart Test
description: 
---

<line-chart :labels="['a', 'b', 'c', 'd', 'e']" :datasets="[ { label:'a', data:[2,20,50,100,10] }, { label:'b', data:[25,2,15,80,60] }, { label:'c', data:[25,32,15,810,60] }, { label:'d', data:[215,2,15,80,610] } ]"></line-chart>

Custom component:

<template>
  <div class="myclass">
    <line-chartjs :chart-data="chartData" :chart-options="options" />
  </div>
</template>

Good job. Thanks for this useful gist!

I was able to fix the issue by changing the following code:

/plugins/chart.js :

import Vue from "vue";
import { Line } from "vue-chartjs/legacy";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement,
} from "chart.js";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
);

Vue.component("line-chart", {
  extends: Line,
});

nuxt.config.js:

plugins: [
	{src: '~/plugins/chart.js', mode: 'client'}
]

And then using the component as:

<template>
  <div>
    <client-only placeholder="Loading...">
      <line-chart
        :chart-options="options"
        :chart-data="data"
        :height="100"
        :width="300"
        chart-id="lineChart"
      />
    </client-only>
  </div>
</template>

Nuxt/vue/chart.js versions used:

{
   "chart.js": "^3.7.1",
   "vue-chartjs": "^4.0.6",
   "nuxt": "^2.15.7"
}

Thanks. This worked for me
"chart.js": "^3.9.1"
"vue-chartjs": "^4.1.1"
"nuxt": "^2.15.8"
"vue": "^2.6.14"

I was able to fix the issue by changing the following code:
/plugins/chart.js :

import Vue from "vue";
import { Line } from "vue-chartjs/legacy";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement,
} from "chart.js";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
);

Vue.component("line-chart", {
  extends: Line,
});

nuxt.config.js:

plugins: [
	{src: '~/plugins/chart.js', mode: 'client'}
]

And then using the component as:

<template>
  <div>
    <client-only placeholder="Loading...">
      <line-chart
        :chart-options="options"
        :chart-data="data"
        :height="100"
        :width="300"
        chart-id="lineChart"
      />
    </client-only>
  </div>
</template>

Nuxt/vue/chart.js versions used:

{
   "chart.js": "^3.7.1",
   "vue-chartjs": "^4.0.6",
   "nuxt": "^2.15.7"
}

Thanks. This worked for me "chart.js": "^3.9.1" "vue-chartjs": "^4.1.1" "nuxt": "^2.15.8" "vue": "^2.6.14"

I got an error "Cannot find module 'vue-chartjs' from" do you know how to solve?
I use same version.

@ghost Thank you! You've saved my bacon here!

I'm getting this error just from installing

package.json

"dependencies": {
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.13",
    "vue": "^2.6.14",
},
"devDependencies": {
    "node-sass": "^9.0.0",
    "sass": "^1.64.2",
    "sass-loader": "^10.4.1",
    "webpack": "^4.46.0"
}

I'm getting this error:
ERROR in ./node_modules/vue-chartjs/dist/index.js 216:37
Module parse failed: Unexpected token (216:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const ref = shallowRef(null);
| const reforwardRef = (chartRef)=>{

            ref.value = chartRef?.chart;

| };
| expose({

package.json

"nuxt": "^2.15.8", "vue": "^2.7.10",

I'm getting this error: ERROR in ./node_modules/vue-chartjs/dist/index.js 216:37 Module parse failed: Unexpected token (216:37) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | const ref = shallowRef(null); | const reforwardRef = (chartRef)=>{

            ref.value = chartRef?.chart;

| }; | expose({

package.json

"nuxt": "^2.15.8", "vue": "^2.7.10",

you have to use this versions
{
...
"dependencies": {
"chart.js": "2.9.4",
"vue-chartjs": "^3.5.1"
}
...
}