A Fancy Multi-select Drop-down For Vue.js Version 2 And 3

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

vuejs multi-select

Description:

In my previous post, I have written about a multi-select drop-down component for Vue.js version 3. Now, here I am sharing with you another fancy multi-select component which is compatible with Tailwind CSS. And, it has many features.

Features:

  • Vue 2 & 3 support
  • No dependencies
  • 100% coverage
  • Typescript support
  • ESM support
  • Single select options
  • Multiple select options
  • Tags
  • Async options
  • Search & filtering
  • Custom slots
  • Events
  • CSS vars support
  • Tailwind & utility class support
  • Fully configurable
  • CSP compliant

How can I use it?

1. Install the component using npm, as following:

npm install @vueform/multiselect

2. Import the component in your project.

import Multiselect from '@vueform/multiselect'

3. Then, register the component and define the options, that will be shown on the front end.

export default {
    components: {
      Multiselect,
    },
    data() {
      return {
        value: null,
        options: [
          'Batman',
          'Robin',
          'Joker',
        ]
      }
    }
  }

4. Now, create the template and add the multi-select component.

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

Thanks for reading. 🙂