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

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