A way to use vue-chartjs as a plugin of Nuxt.js

readme.md

How does this work

1. Create a custom plugin and put it in plugins (plugins_vue-chartjs.js).
2. Add the plugin to nuxt.config.js and set ssr to false to prevent the server to initialize it.
3. You can use the component now just like other Vue-components. The only problem is that you get errors because the DOM-tree is out of sync (because the server misses the component)
4. As mounted() is only called by the client (browser) we're using this to render the component only in the browser. Add showLine: false to data (so the server will not render it) and turn it to true in mounted().
5. Use v-if to render the component. Now it won't be rendered on the server side, but it will show up in de browser.

This way also works with other Vue.js plugins

Used in this example:
npm install vue-chartjs --save
npm install chart.js --save

chart.vue

// just an example. A cleaner way is to wrap the showLine-stuff in a dedicated component
<template>
  <div>
    <my-line v-if="showLine" :data="lineData" :options="options">
  </div>
</template>

<script>
export default {
  data () {
    return {
      showLine: false
    }
  },
  mounted () {
    this.showLine = true // showLine will only be set to true on the client. This keeps the DOM-tree in sync.
  },  
  asyncData () {
    const lineData = {} // some data
    const options = {} // some options
    return { lineData, options }
  }
}
</script>

nuxt.config.js

...
/*
** Build configuration
*/
plugins: [
  { src: '~plugins/vue-chartjs.js', ssr: false },
],
...

plugins_vue-chartjs.js

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

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

hello,
thanks for that, It's actually doest work unfortunately for my Nuxt project, i got this error :
Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1_vue_chartjs.a.extend is not a function

I simply pasted your code here,,

thanks,

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

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

I needed to use some different chart types and wasn't feeling like copy&pasting everything for each chart type and having to refactor each copy, etc... so I wrote this, in case someone finds it useful:

import Vue from 'vue'
import { Bar, Doughnut, Line, Pie } from 'vue-chartjs'

const registerComponent = function(name, originalComponent) {
    Vue.component(
        name,
        {
            extends: originalComponent,
            props: ['data', 'options'],
            mounted() {
                this.renderChart(this.data, this.options)
            }
        }
    )
}

registerComponent('BarChart', Bar);
registerComponent('DoughnutChart', Doughnut);
registerComponent('LineChart', Line);
registerComponent('PieChart', Pie);