Hi, I am trying to implement Nuxt with Chartjs but I am having hard time doing that. Here is what I did according to nuxt official example: https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-chartjs
I created a component at components/bar-chart
<script>
import { Bar } from 'vue-chartjs'
export default Bar.extend({
props: ['data', 'options'],
mounted () {
this.renderChart(this.data, this.options)
}
})
</script>
in 'nuxt.config.js' I have the following:
vendor: [
'~/plugins/vuetify.js',
'chart.js',
'vue-chartjs'
],
and now in my 'pages/user' this is how template looks like:
<template>
<v-layout row wrap>
<v-flex xs12>
<BarChart :data="barChartData" :options="{ maintainAspectRatio: false }"></BarChart>
</v-flex>
</v-layout>
</template>
<script>
import BarChart from '~/components/bar-chart'
export default {
name: 'userpaneli',
layout: 'userpanel',
data () {
return {
currentView: 'OnlineShop',
filter: []
}
},
asyncData () {
return {
barChartData: {
labels: ['January', 'February'],
datasets: [
{
label: 'Testing this ',
data: [10, 15]
}
]
}
}
},
computed: {
...mapGetters({
view: 'user/userRoute'
})
},
components: {
BarChart
}
}
</script>
so above I am trying just some dump data to make it work but later I will get data from vuex store.
Now after doing this I am getting this error:
__WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Bar.extend is not a function
Am I missing something can someone help me please, thnx in advance
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2172">#c2172</a>)</em></sub></div>