💎 Release new version 3.0.0

💎 vue-chart.js v3

Finally version 3 of vue-chartjs is ready to 🚣 . We have some breaking changes, but they are easy to change!

✅ Removed Vue.extend() in the base components #201
✅ Changed the private data from private instance to private data instance #182
✅ Updated peerDependencies vue & chart.js

🔥 Breaking Changes!

🐣 Component creation

In v2 you were creating your own chart components by extending the base component like this:

import { Line } from 'vue-chartjs'

export default Line.extend({
  ....
})

This was possible because the base components had a export default Vue.extend({}) in it. Which creates a subclass of the vue ctor. vue docs
Because of this Vue needed to be included as a dependency and bundled into the package for the browser build.

This was causing a lot of confusing 😕 and also some weird errors #216, #151 and some more problems like increased bundle size and duplicated dependencies for browser build.

🔐 Chart instance

Like mentioned in #182 vue could possibly overwrite the private _chart variable as it is saved as an unprotected instance variable. Now it makes usage of vue's private data notation.

⬆ 📖 Upgrade Guide

🐣 Component creation

Create your components now with either extends or mixins :

import { Line } from 'vue-chartjs'

export default {
   extends: Line,
   data () {...},
   mounted () {
      ....
   }
}

or

import { Line } from 'vue-chartjs'

export default {
   mixins: [Line],
   data () {...},
   mounted () {
      ....
   }
}

🔐 Chart instance

Replace this._chart with this.$data._chart

Chart.js

Please also keep in mind the Chart.js 2.7.0 changes if you update your peerDependencies