Nuxt + Vue-Chartjs help needed

[besnikh]

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 #

[besnikh]

Ok this was the fix for me

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}

Just put the extends below

[apertureless]

Yep, beacuse the example is using vue-chartjs < 3.0.0 After 3.0.0 you have to use either extends: MyModule or mixins: [MyModule] to create your components :)

[RouillerRomain]

Ok, this way was still not working for my Nuxt project, however I found an other way of doing it in this repository , and it works !: https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-chartjs Hope it can help !