VueJs - import component in asp.net core project

Question

I have asp.net core project, which uses vuejs framework (javascript) This is a sample of the page structure (with everything stripped out for simplicity)

//Index.cshtml

<div id="page-1">
</div>
<script src='~/page-1.js' defer></script>

//page-1.js
(function () {
    var Page1Vue = new Vue({
        el: "#page-1",
});
})();

everything works fine (mounted, all methods etc)

I want to bring in this external component https://vue-multiselect.js.org/, but cannot get it to work. Has anyone any pointers on to integrate an external component into an existing instance.

Answer 1

• import external library in _Layout.cshtml, please import esm.js library

 <script type="importmap">
      {
        "imports": {
          "vue": "/lib/vue.esm.browser.js_2.6.11/vue.esm-browser.js",
          "vue-multiselect":"https://cdnjs.cloudflare.com/ajax/libs/vue-multiselect/3.0.0-alpha.2/vue-multiselect.esm.min.js"
        }
      }
 </script>

• insert multiselect node into Index.cshtml

<div id="app">
     <multiselect v-model="value" :options="options"></multiselect>
</div>

• create Vue Component into Index.cshtml

<script type="module">
      import { createApp } from 'vue'
      import VueMultiselect from 'vue-multiselect'
       createApp({
                  data () {
                    return {
                    value: null,
                           options: ['list', 'of', 'options']
                    }
                  }
        })
        .component('multiselect', VueMultiselect)
        .mount('#app')
</script>

@section Scripts
{
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
}

• the result as below