How to use Vue.js element without npm?

Question

Is it possible to use a component without having npm?

I can't import component inside html file.

Tried:

import VueBootstrap4Table from 'vue-bootstrap4-table';

app = new Vue({
  el: '#app',
  data: {
    rows: [{

Here is the fiddle.

What is wrong with this code?

import VueBootstrap4Table from 'vue-bootstrap4-table'; a) you need webpack (or another bundler) to resolve the import, b) webpack will try to resolve the import from the node_modules folder (which you won't have without npm). Just use npm. It's the way to go. Any attempt on using any modern packages or frameworks without npm is bound to fail. — connexo
– connexo, Commented Oct 18, 2019 at 19:51
@connexo Actually modern browsers can handle those import statements if they're inside a module and not a JS import. The path has to be a valid URL, standard URL rules apply (absolute, relative, etc...), the file extension should be .mjs, and you can use a tool like unpkg.me to get a URL to what is normally a node package. I'm not saying I'd recommend this for a production project but the question doesn't sound like it's asking about production code. — Brandon Buck
– Brandon Buck, Commented Oct 18, 2019 at 20:39

Kyle · Accepted Answer · 2019-10-18 20:09:27Z

2

remove:

import VueBootstrap4Table from 'vue-bootstrap4-table';

and

...,
components: {
  VueBootstrap4Table
}

from the bottom of your Vue instance - by adding the CDN reference, it's already included.

Then lastly, looks like you were missing the bootstrap css for this table. I added it as a dependency in the fiddle.

check it out:

answered Oct 18, 2019 at 20:09

Kyle

1,5031 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1