Unable to add a chart to my vue component

Question

I have a vue.js 2.0 app, and i need to publish the first apex chart example :https://apexcharts.com/docs/vue-charts/

For now, my app is not using the IMPORT syntax and working well . I'm not using Babel or WebPack.

This is my router :

const routes = [
     { path: "/home", component: Home }
];
const router = new VueRouter({
  routes // short for `routes: routes`
});

const app = new Vue({
  router
}).$mount("#app");

This is my Home component :

const Home = {
  data: function() {
    return {
      count: 0
    };
  },
  template:
    `<div>Lots of informations</div> <span>I need to place the chart there</span>`
};

If you look at the ApexChart 1st example, i have to use IMPORT and the template balise :

Import doesnt work ( error) :

SyntaxError: import declarations may only appear at top level of a module

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I can't place a template inside another template .

how could I do ?

Where can I place this code ?

<template>
<div>
  <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>

I am loading Apexcharts in index.html like this :

<script src="https://cdn.jsdelivr.net/npm/apexcharts" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts" type="module"></script>

EDIT 2 :

This is my updated component :

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>'
};

I'm still getting the following errors :

**SyntaxError: import declarations may only appear at top level of a module**

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

found in

---> <Anonymous>
       <Root>

I'm trying to import like this inside of INDEX.HTML :

<script>
import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)
</script>

Do i have to use Babel or something, for import to work ?

What does your html look like? You should be able to put somerthing like <apex-chart></apex-chart> in your home component. — Evan Lalo
Thanks, my html are literal templates strings written inside of the JS file ... — harmonius cool
[Vue warn]: Unknown custom element: <apexchart> - did you register the component correctly? For recursive components, make sure to provide the "name" option. — harmonius cool

Evan Lalo Evan Lalo · Accepted Answer · 2019-10-21T18:45:24

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>'
};

Unable to add a chart to my vue component

2 Answers