[Vuejs]-Unable to add a chart to my vue component

by

0👍

You need to import the chart component inside of your homecomponent.

import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)

const Home = {
  data: function() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }]
    }
  },
  template:
    '<div><apexchart width="500" type="bar" :options="options" :series="series"></apexchart></div>'
};

0👍

Yes, you need to use Babel and some sort of bundler (like webpack) to transpile import statements.

Vanilla JS in the browser doesn’t support modules yet.

That, or the component you’re using needs to have exposed a browser/CDN version that will define and bootstrap the component globally

Leave a comment