Feature rich select component for Vue.js – vue-select

Category: Vue.js Vue.js Form | August 27, 2021
Author: sagalbot
Official Page: Go to website
Last Update: August 27, 2021
License: MIT

vuejs feature rich multi select

Description:

vue-select is a feature rich select component for Vue.js. It works as multi-select drop-down too. This component is designed keeping in mind that, it should be lightweight, simple to use, and highly customizable.

Features:

  • Tagging
  • Filtering / Searching
  • Vuex Support
  • AJAX Support
  • SSR Support
  • Accessible
  • ~20kb Total / ~5kb CSS / ~15kb JS
  • Select Single/Multiple Options
  • Customizable with slots and SCSS variables
  • Zero dependencies

You may also like see:

How to install and use it?

1. Install the vue select component with NPM or YARN.

#npm
npm install vue-select

#yarn
yarn add vue-select

2. Import the required components.

import Vue from "vue";
import vSelect from "vue-select";

3. Register the component.

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [
      'foo',
      'bar',
      'baz'
    ]
  }
})

4. Add the vue select component in your template.

<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options"></v-select>
</div>