How to import Vue multiselect in plain js file without CLI

Question

I wanna import vue multiselect in my Vue app which I made withhout cli. it's plain js and all the content are in my html. but I cannot import libraries like Vue Multiselect :( In HTML:

<body>
<div id="app">
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or 

add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
    </div>
<script src="../assets/js/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<script type="module" src="../assets/js/user-list.js">
</script>
</body>

In JS:

new Vue({
 data() { return {} }
}).$mount(#app)

I can't import it like how I used to in vue cli, like:

import multiselect from 'vue-multiselect'

and

components: { multiselect}

when I import, there's errors like:

Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.

Nikola Pavicevic · Accepted Answer · 2022-11-15 21:26:38Z

Try like following snippet , with components: { Multiselect: window.VueMultiselect.default }:

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
      options: [
         {"name": "aaa", "id": "1",},
         {"name": "bbb", "id": "2",},
         {"name": "ccc", "id": "3",}
       ]
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
  <multiselect
    v-model="value"
    placeholder="chose"
    label="name" 
    track-by="id"
    :options="options"
    :multiple="true"
    :taggable="true"
  ></multiselect>
<pre>{{ value  }}</pre>
</div>

Collectives™ on Stack Overflow

How to import Vue multiselect in plain js file without CLI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related