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)
	}
})

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"
}
...
}