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