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 :

1. 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.

2. 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 ?

Answer 1

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

Answer 2

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