Unable to add any module without WebPack

Question

I'm using a basical Vue Routing

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

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

Took from this green exemple : Can we make vue.js application without .vue extension component and webpack?

Everything is working flawless . I 'm not using webpack.

Now, I'm adding the APEXCHARTS library inside of index.html

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

This is one my component , using literals

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

and this is the error

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

My question is : how can I import this module, or any other module, without using WEBPACK, and using the vue 2 router ? I can't use 'IMPORT', it is not working, is there any way to mention the module name inside of the vue instantiation new Vue ?

Back in the days, ANGULARJS needed the modules names , but there, i dont know where to add the module name , I can not use the IMPORT syntax, please help.

Thank you

EDIT : I've done a FIDDLE : https://jsfiddle.net/nicolas1000/rke9xadq/

Most packages don't support ESM modules yet. Most servers are not optimised for HTTP/2 either. Why do you not want to use a bundler out of curiosity, since Vue CLI sets up everything you need? — Dominic, Oct 22 '19 at 14:34
Because my whole app is already built like this, converting it to .vue files will take a lot of time — harmonius cool, Oct 22 '19 at 15:49

johnmikelridzz · Accepted Answer · 2019-10-22T16:30:07.140

0

Try this:

Where you need the <apexchart> tag, you can do the following:

Vue.component('apexchart', VueApexCharts)

edited Oct 22 '19 at 16:30

answered Oct 22 '19 at 14:30

johnmikelridzz

340
1
2
12

Thank you a lot ! I will try this, i go shopping for 1 hour before ! – harmonius cool Oct 22 '19 at 14:31
Just a side note, you can take advantage of the import statements as they'll definitely make your life easier. Not all libraries have a UMD build or importable via script tags. Have you ever tried **parcelJS** (https://parceljs.org/)? It is very easy to set up compared to Webpack. It's much faster and it'll take care of downloading the npm packages for you as well. – johnmikelridzz Oct 22 '19 at 14:33
1

Check this: https://jsfiddle.net/poc6kfda/3/ Notice that I've also amended the import statements, so I guess I have to edit my answer as well hahaha – johnmikelridzz Oct 22 '19 at 16:20
I don't know how to explain how much grateful I am to you all , thank you 1000 times, I would pay for that on ur paypal if possible, message me – harmonius cool Oct 22 '19 at 16:24
dont know how to do how to give you a few , bro message me your paypal if possible, you saved me so much time – harmonius cool Oct 22 '19 at 16:44
Hahahah for real? I don't know yet how to send a message here. Drop me bro an email at johnmikelridz@gmail.com – johnmikelridzz Oct 22 '19 at 16:50

Unable to add any module without WebPack

1 Answers1

Linked