🔥 Remove Vue.extend()

[apertureless]

Current state

The Base Charts are using the Vue.extend() which creates a subclass of the base vue constructor.

This way if you create your own components, you can extend the base component.

import {Line} from 'vue-chartjs'

export default Line.extend({
 mounted () {
    this.renderChart(data, options)
  }
})

I really liked the concept back then ( Jun 2016 first commit 😄 ). However it creates a lot of confusion to people new to Vue.js

And it is not really nessasary.

Proposal

To clean up the API and usage the Vue.extend() should be removed. And extending the base component should be done with either extends or mixins

This way, your component would look like this:

import {Line} from 'vue-chartjs'

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

or

import {Line} from 'vue-chartjs'

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

This way own components would be standard vue component style.
It is a breaking change, but without much efford to fix.

Scheduled for v3

Another benefit would be the decreased size, as the old version needs the base vue constructor, and bundle vue into it.

Todo

• Remove Vue.extend()
• Update docs
• Update examples
• Rewrite private data [Best Practices❓] Usage of Private Data #182

Testing

yarn add vue-chartjs@next

[kimuraz]

May I take this one @apertureless ?

[apertureless]

Hey @kimuraz

well it's already done. https://github.com/apertureless/vue-chartjs/tree/feature/v3

But needs some testing and I need to update the docs. Thats why this issue is still open.

[kimuraz]

That's ok, if I can be useful in any of these tasks, let me know.

I can also update the docs translation (pt-br) for the new version. Is it ok?

[huangche007]

this change is so cool

[amitmeghare]

its cool...