A guide to incorporating Vue multiselect in a vanilla JavaScript file without using the Command Line Interface (

I am trying to incorporate vue multiselect into my Vue app that I created without using the cli. My app is built with plain JS and all the content is within my HTML file. However, I am having trouble importing libraries such as 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0868595dd9d859c849983959c959384b0c2dec1dec0">[email protected]</a>"></script>

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

In JS:

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

I am unable to import it in the way I would do with vue cli, like:

import multiselect from 'vue-multiselect'

and

components: { multiselect}

when I try to import, I encounter errors such as:

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

Answer №1

Here is a sample code snippet using window.VueMultiselect.default for components:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f4f7e7afeff7eef6ebf1e7eee7e1f6c2b0acb3acb2">[email protected]</a>"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097f7c6c24647c657d607a6c656c6a7d493b27382739">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some alternative methods for downloading the latest file version without relying on the client cache?

On my webpage, I have a table displaying users' data. Each row represents a user and includes their business card, which is a clickable tag that opens a PDF file stored on the server. <td class="business_card"> <a href="/static/users_doc ...

Separating text for tooltips from the element itself

I'm looking to enhance my website by adding tooltip descriptions to elements based on their CSS classes. While tooltips are usually added using the element's title attribute, I have numerous elements with the same lengthy description and want to ...

Is it possible to test a Node CLI tool that is able to read from standard input with

I'm looking for a way to test and verify the different behaviors of stdin.isTTY in my Node CLI tool implementation. In my Node CLI tool, data can be passed either through the terminal or as command line arguments: cli.js #!/usr/bin/env node const ...

What is the best way to use Python and Selenium to click on an angularjs link by comparing it to the text entered by the user?

A user can input a specific link that they would like to click. For example, if the user inputs "Tampa Bay Downs" for the variable track. In my Python Selenium test program, I will search for the following code: <a ng-click="updateFavorite()(raceInfo. ...

`In Node.js, retry attempts resulted in an HTTP 504 status code.`

I have a scenario where my http server always returns a 504 status code: const express = require('express') const app = express() app.get('/', (req, res) => { console.log('I AM HERE'); res.status(504).send('N ...

How can I update an image source using JavaScript in a Django project?

Is it possible to dynamically change the image src using onclick without relying on hard paths or Django template tags? I have concerns that this may not be best practice. How can I implement a method to inject/change the ""{% static 'indv_proj&b ...

How to use Angular ng-repeat to filter an array by a specific key

Here is the data I am working with: $scope.allNames = [ "A": [ { "name": "a1" }, { "name": "a2" }, { "name": "a3"} ], "B": [ { "name": "b1" }, { "name": "b2" }, { "name": "b3"} ], "C": [ { "name": "c1" }, { "name": "c2" }, { "name": "c3"} ], ...

Is there a way to implement two distinct JavaScript functions - one for desktop and another for mobile - within the same onclick event attribute in an HTML document?

I'm currently working on a responsive HTML page that has versions for desktop and mobile. In order to properly execute specific functions based on the device's screen width, I have two separate functions - one for desktop and one for mobile - bot ...

Error: The term "Particles" has not been defined

I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...

Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

I'm working with Chart.js 2 to create a scatter plot using Epoch timestamps for the x coordinates and integers for the y coordinates. Is there a way to customize the x-axis labels on the graph to show dates in a more readable format? Update: I am cur ...

Automating radio button selection in AngularJS: Let your code choose the option

In a form with two radio buttons, I am trying to set the first one as the default selection. <input type="radio" name="playlist" ng-value="myCtrl.cleanPlaylist" ng-model="myCtrl.playlistSelected"> Clean <input type="radio" name="playlist" ng-val ...

Obtain the current status of a Stripe charge made with a specific source token using Node.js and

Imagine this scenario: a user submits a credit card token to my server for a purchase, and I save the token in their cart. However, just as I am about to store the charge id from the success response, my server crashes. The charge has been processed, but ...

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

I'm currently in the process of developing my own personal website. I believe that incorporating a section for "user comments and replies" would be a great way to enhance my site. I prefer to avoid user email verification. I'd like users to be a ...

Identifying the category of a value through a conditional check on another value

I am looking for my code editor to automatically determine the type of extraData based on the value of error, which is being narrowed down by an if statement: export enum ErrorCodes { Unknown = 'UNKWN', BadRequest = 'BDREQ', } int ...

Tips for refining the data displayed on your Kendo Grid

I have implemented a Kendo grid in my view and I am looking to apply filters to the data displayed on the grid. The grid is populated from a list within my model. @(Html.Kendo().Grid(Model.list) .Name("listgrid") .Columns(columns => { ...

Transfer elements from collections employing multer

Data Payload Example:- education[0][university]: jru education[0][degree]: mca education[0][specialization]: computer application education[0][certificate_pdf_url]: (binary) education[0][degree_type]: Teaching Degree education[0][years_of_study]: [&q ...

Looping through the ajax data to populate ion-item elements

I am currently working on a loop that retrieves user IDs, names, etc. from a JSON file. I am trying to display this data in a list view within an Ionic framework. When I simply use direct alerts in JavaScript, the users are displayed correctly, but when I ...

When attempting to run JavaScript within PHP, an Uncaught SyntaxError is encountered

When I run this code without PHP, it works perfectly. <?php $activeStatus = "$getuser[active]"; if($activeStatus == 1) { echo '<script type="text/javascript">'; echo ' $(document).ready(function () { v ...

Converting a query string to an array and then transforming it into a string

My main objective is to develop a form that collects user information and appends it to the URL query string. The data from the query string will then be organized into an array, which will subsequently be presented on the second page as text. However, I a ...

Executing the `process.nextTick` function throws an error, causing the message: "Headers cannot be set once they have been sent."

I'm attempting to retrieve data from MongoDB within a Node.js file. I am encountering the following error: /home/jay/node_project/user_data_manag/node_modules/mongodb/lib/utils.js:98 process.nextTick(function() { throw err; }); Error: Can't ...