Static GitHub Issues

[2503] Nuxt + Charjs Help needed

prev: failure eslint nuxt-class-component
next: error() not handled on server side in event

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>