Vue-multiselect: Can't install via CDN - Unknown custom element

Created on 12 Feb 2018  路  9Comments  路  Source: shentao/vue-multiselect

Hello, i followed the instructions for installing from CDN but it gives the following error:

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

found in

---> <xxxxxxxxxxx>
       <Root>

I tried some of the similar issues here but nothing works 馃槶

Please someone help, i must make it work through CDN, i tried it with webpack it works fine (it is very fast component), but i want to use it with CDN 馃

help wanted

Most helpful comment

Somehow i found this jsfiddle and i figured out the solution myself.

Here are my instructions if someone is beginner like me, and had the same problem.

First include the files (version can be different):

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">

Then, you need to register multiselect on the component which should have the multiselect.

components: {
    Multiselect: window.VueMultiselect.default
},
data: {
    // here goes data
},
methods: {
    // here goes methods
}

Then you can use it.

All 9 comments

Somehow i found this jsfiddle and i figured out the solution myself.

Here are my instructions if someone is beginner like me, and had the same problem.

First include the files (version can be different):

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">

Then, you need to register multiselect on the component which should have the multiselect.

components: {
    Multiselect: window.VueMultiselect.default
},
data: {
    // here goes data
},
methods: {
    // here goes methods
}

Then you can use it.

@shentao Why the part where we should register the component by using

components: {
    Multiselect: window.VueMultiselect.default
}

is not written in the documentation?

Can you please add that to the documentation (or add the jsfiddle link at least) so people can install it from CDN.

I almost gave up trying this component because i couldn't install it from CDN. I somehow managed to install it. Please accept the suggestion to explain better installation in the documentation as it can help someone.

BTW the component is great. 馃

Thanks for the suggestion! Sorry for the trouble. Updated the docs! :)

afraid this is not working in 2.1 now, with this error:

caught TypeError: Cannot read property 'default' of undefined

2.0.6 is fine though

Had to came here to find out how to make VueMultiselect work on a simple PHP + Pure Javascript application + Vue.

Birjup - did you find a solution for this default error?

@ChristinaDRoberts I just followed the comment above with the Vue v2.5.16.

@shentao The documentation just mentions the global component registration which does not work when adding the component via a CDN. Could you please add the @TheAndroidGuy solution to the docs https://github.com/shentao/vue-multiselect/issues/643#issuecomment-365104178
components: { Multiselect: window.VueMultiselect.default },

Having a similar issue, working with a cloud IDE platform so I can't use NPM with multi-select. The docs are confusing on how to include via CDN. Please provide an example with CDN

Was this page helpful?
0 / 5 - 0 ratings