Vue - Add CDN component without webpack

user_1714178 0
Viewed 3322

I want to add this component to my Vue.js project without using webpack.

I've tried adding this to the head:

<script src="https://cdn.jsdelivr.net/npm/vuejs-auto-complete@0.9.0/dist/build.js"></script>

And this to the body:

<autocomplete :source="[{id:1,name:'abc'},{id:2,name:'def'}]"></autocomplete>

But the following error happens:

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

What should I do?

Here's the link to the component on Github.

vuejs2 vue.js cdn
2 Answers

You need to register that component first like below

components: {
   Autocomplete: window["vuejs-autocomplete"]
}

Example

new Vue({
  el: '#app',
  components: {
    Autocomplete: window["vuejs-autocomplete"]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuejs-auto-complete@0.9.0/dist/build.js"></script>

<div id="app">
  <autocomplete :source="[{id:1,name:'abc'},{id:2,name:'def'}]"></autocomplete>
</div>

user_27120790

Have you registered it in Vue.components(); in your main.js ?

user_85420530
Related