Nuxt.js: Nuxt + Charjs 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

_{This question is available on Nuxt.js community (#c2172)}

[apertureless]

Thats because the example is a bit outdated.
With [email protected] there is a new way of creating your components.

<script>
import { Bar } from 'vue-chartjs'

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

or

<script>
import { Bar } from 'vue-chartjs'

export default {
  mixins: [Bar],
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

[besnikh]

@apertureless thnx for your reply.
I already fixed my issue but forgot to comment here:

<script>
import { Bar } from 'vue-chartjs'

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

This was the fix for me :+1: Cheers

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.