Having developed a vue.js 2.0 application, I am now looking to integrate my first apex chart example from the following link:
At this moment, my app is functioning smoothly without utilizing the IMPORT syntax. I have chosen not to use Babel or WebPack.
Below is an overview of my router setup:
const routes = [
{ path: "/home", component: Home }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
const app = new Vue({
router
}).$mount("#app");
The structure of my Home component is as follows:
const Home = {
data: function() {
return {
count: 0
};
},
template:
`<div>Lots of informations</div> <span>I need to place the chart there</span>`
};
Referring back to the ApexChart's first example, it requires the use of IMPORT and the inclusion of the template tag:
Error encountered while using Import:
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.
Inability to nest a template within another template.
What would be the ideal approach in resolving these issues?
Where should the provided code be implemented?
<template>
<div>
<apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
To load Apexcharts in index.html, the following script tags are included:
<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 :
The updated version of my component is presented below:
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>'
};
Despite making these updates, I continue to encounter 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 attempted to implement an import statement within INDEX.HTML in the following manner:
<script>
import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)
</script>
Is it essential to utilize Babel or any similar tool for the import feature to function accordingly?