Vue-multiselect: Load Single JS File in Page Directly

Created on 31 Dec 2016 · 5Comments · Source: shentao/vue-multiselect

Hi :)
I want to using vue-multiselect in traditional way (load .js file in page directly).
Is there any guide about this?
I had lots of search and also read official doc, but I couldn't found anything useful.

question

Source

ykh

All 5 comments

After adding the vue-multiselect.min.js file inside the <script> tag run:

Vue.component('Multiselect', VueMultiselect.default)

to register vue-multiselect globally.

The vue-multiselect.min.js file can be found as the main file on npm in the /lib catalog.

After 2.0-beta becomes stable it will be published to several CDNs.

The 1.x version is available on jsdelivr: https://cdn.jsdelivr.net/vue.multiselect/1.1.4/vue-multiselect.min.js

shentao on 31 Dec 2016

👍1

Tnx for quick answer :)
I did it actually but I got some errors, so I thought I'm in a wrong way!
console logs:

vue.js:525 [Vue warn]: "key" is a reserved attribute and cannot be used as component prop. 
(found in component <Multiselect>)

vue.js:525 [Vue warn]: Invalid prop: type check failed for prop "key". Expected String, got Boolean. 
(found in component <Multiselect>)

vue.js:525 [Vue warn]: Invalid prop: type check failed for prop "label". Expected String, got Boolean. 
(found in component <Multiselect>)

Uncaught TypeError: this.$options.filters.filterBy is not a function

script.js:

Vue.component('Multiselect', VueMultiselect.Multiselect);

new Vue({
    el: '#app',
    data: {
        value: '',
        options: [
            'Option1', 'Option2'
        ]
    }
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue MultiSelect</title>
</head>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-multiselect/lib/vue-multiselect.min.js"></script>
<body>

<div id="app">
    <label class="typo__label">Simple select / dropdown</label>
    <div>
        <label class="typo__label">Single select</label>
        <multiselect v-model="value" 
                     :options="options" 
                     :searchable="false" 
                     :close-on-select="false" 
                     :show-labels="false" 
                     placeholder="Pick a value">

        </multiselect>
        <pre class="language-json"><code>{{ value  }}</code></pre>
    </div>
    <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

<script src="script.js"></script>
</body>
</html>

ykh on 31 Dec 2016

Seems you’re using Vue 2.x. It might be that the version of Multiselect that is available on bower is for Vue 1.x.

You will have to either download and add the file yourself or use a fork https://github.com/monster-media/vue-multiselect that is available on bower as vue-multiselect3 and it seems to support Vue 2.0.

shentao on 31 Dec 2016

👍1

It works w npm version :)
Tnx

ykh on 31 Dec 2016

v2.0 link from CDN: https://cdn.jsdelivr.net/vue.multiselect/2.0.0/vue-multiselect.min.js

Having a easy-to-find download link on README would be useful. People not always use NPM.