Vue: Cannot call a class as a function Apex

Question

I am trying to add a pie chart to my website using ApexCharts. I've copied source code from their website but I received error "Cannot call a class as a function" in my website's console.

Error disappears when I delete this line:

<vue-apex-charts type="pie" width="380" :options="chartOptions" :series="series"> </vue-apex-charts>

Maybe there's a tiny problem.

Source code from file PieChart.vue

<template>
  <div id="chart">
    <vue-apex-charts type="pie" width="380" :options="chartOptions" :series="series"> </vue-apex-charts>
  </div>
</template>
<script>
import VueApexCharts from 'apexcharts'

export default {
  name: 'PieChart',
  components: { VueApexCharts },
  data () {
    return {
      series: [44, 55, 13, 43, 22],
      chartOptions: {
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
      }
    }
  }
}
</script>

And my second file, where I import PieChart.vue

<script>
import PieChart from '@/components/activities/PieChart.vue'

export default {
  name: 'Activities',

  components: { PieChart }

}
</script>

Answer 1

You are importing the wrong library.

Instead of

import VueApexCharts from 'apexcharts'

It should be

import VueApexCharts from 'vue-apexcharts'