Can't get VueApexCharts component properly included into app

Question

I was trying to display some charts in my VueJS app using VueApexCharts. They got installed properly, they're added to node_modules directory and import doesn't raise any issues.

The main file, the App.vue contains the following code:

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

Then, the HelloWorld.vue component is defined this way:

<script>
  import { ApexCharts } from 'apexcharts'

  export default {
    name: 'HelloWorld',

    components: {
      apexchart: ApexCharts
    },

    data () {
      return {
        series: [{
          name: "Desktops",
          data: [10, 41, 35, 51, 62, 60, 52, 74, 91, 128]
        }],
        chartOptions: {
          chart: {
            height: 350,
            type: 'line',
            zoom: {
              enabled: false
            }
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            curve: 'straight'
          },
          title: {
            text: 'Product Trends by Month',
            align: 'left'
          },
          grid: {
            row: {
              colors: ['#f3f3f3', 'transparent'],
              opacity: .5
            }
          },
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
          }
        },
        [...]
    }
</script>

In the HelloWorld.vue's template there is the chart:

<apexchart
  type="line"
  height="350"
  :options="chartOptions"
  :series="series"
></apexchart>

And that's it, in main.js there's nothing about VueApexCharts, they're imported in the file above.

However, I get this warning, and of course no chart gets displayed:

[Vue warn]: Unknown custom element: <apexchart> - did you register
the component correctly? For recursive components, make sure
to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <VMain>
         <VApp>
           <App> at src/App.vue
             <Root>

In the official documentation I see the following entry:

new Vue({
        el: '#app',
        components: {
          apexchart: VueApexCharts,
        },
        data: {
          [...]

I tried also naming the component VueApexCharts as in the example above, but it didn't work either. Beside that, the class in node_modules/apexcharts is called ApexCharts.

What is incorrect in my markup? How to make it work properly?

Answer 1

I found very helpful information in official docs related to VueJS integration.

In short, there are ApexCharts and VueApexCharts, and both should be installed:

npm install --save apexcharts
npm install --save vue-apexcharts

After successful installation, I added the following entry to main.js:

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)

And after this is done, you can use your <apexchart> component in the whole app (I had to remove the imports from HelloWorld.vue first, to make sure the library was imported in just one place).