MultiSelect Vue Js Npm Example

How do multi-select dropdown values in vuejs you are looking for this answer? in this post, I will tell you about the multi-value select option from the select dropdown. We will install the npm package for the multiple vue select in the dropdown. This package also provided some binding functionality like :searchable, :multiple, :options, :close-on-select, :show-labels etc etc.

This multi-select option from the dropdown is also useful in vuejs 3, Having some simple steps for integrating into the vue application multiple select. I have simplified it below some steps. you just follow it and integrate it into your application. This example works with any framework of javascript when using the node module.

Step 1. Create Project

Simple first we will create a project using the below-provided command. ignore if you already have a vue project. This step is for beginner vue js developers only.

vue create vue-example

Step 2. Install Npm Package For Vue Multiselect

Install multiple select value dependencies using provided command. This command will install the npm package library version in your application for multi-select. From this package you will get a multiple select component dropdown, also this package provides some inbuilt binding methods like:- ;searchable, :multiple, :options, :close-on-select, :show-labels, etc.

npm install vue-multiselect --save

OR via CDN

If you wish to use the direct CDN library without installing npm, you can just copy and paste it into your application.

<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

Step 3. Test & Component

This is a vuejs example component multi-select. just import the component and use it like the below example. You can also use some binding methods above described use in this tag.

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

<script>

import Multiselect from 'vue-multiselect'

// register globally
Vue.component('multiselect', Multiselect)

export default {
     // OR register locally
     components: { Multiselect },
     data () {
     return {
          value: null,
          options: ['list', 'of', 'options']
     }
     }
}
</script>

<!-- New step!
     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
//your styles
</style>

Register Globally

If there are multiple components you want to use, just define the component as global.

Vue.component('vue-multiselect', window.VueMultiselect.default)

Step 4. Start Server

Start your development server and run the example. If you want to build, use the npm dev command.

npm run serve

// OR

npm run dev

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)