vue-multiselect

Install the vue-multiselect package via npm to use it in your Vue 3 project.

npm install vue-multiselect

If you encounter issues where the Vue Options API appears disabled, it may be due to @vitejs/plugin-vue version 5.2.2 or later. To resolve this, downgrade to version 5.2.1.

npm install @vitejs/plugin-vue@5.2.1

To enable searching in a single select component, use v-model and set :searchable (default behavior) while managing :close-on-select and :clear-on-select.

<VueMultiselect
  v-model="value"
  :options="source"
  :close-on-select="true"
  :clear-on-select="false"
  placeholder="Select one"
  label="name"
  track-by="name"
/>

To allow users to create new tags that aren't in the original options list:

1. Set :taggable="true".
2. Set :multiple="true" (optional, but common for tags).
3. Listen for the @tag event to handle the creation of the new tag and update your options and model.
4. Use tag-placeholder to customize the text shown when typing a new tag.

<VueMultiselect
  v-model="taggingSelected"
  :options="taggingOptions"
  :multiple="true"
  :taggable="true"
  @tag="addTag"
  tag-placeholder="Add this as new tag"
  placeholder="Type to search or add tag"
  label="name"
  track-by="code"
/>

addTag (newTag) {
  const tag = {
    name: newTag,
    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  }
  this.taggingOptions.push(tag)
  this.taggingSelected.push(tag)
}

For loading options from an external service based on user input:

1. Listen for the @search-change event.
2. In the handler, call your service with the query and update the :options array.
3. Use the #noResult slot to display a custom message when no items match the query.

<VueMultiselect
  v-model="selectedCountries"
  :options="countries"
  :multiple="multiple"
  :searchable="searchable"
  @search-change="asyncFind"
  placeholder="Type to search"
  label="name"
  track-by="code"
>
  <template #noResult>
    Oops! No elements found. Consider changing the search query.
  </template>
</VueMultiselect>

methods: {
  asyncFind (query) {
    this.countries = findService(query)
  }
}

To allow selecting multiple items, add the :multiple="true" prop.

<VueMultiselect
  v-model="multiValue"
  :options="source"
  :multiple="true"
  :close-on-select="true"
  placeholder="Pick some"
  label="name"
  track-by="name"
/>

Use the following props to configure a single select dropdown without search functionality:

• :model-value: The current value.
• :options: The list of options.
• :searchable="false": Disables search.
• :close-on-select="false": Keeps the dropdown open after selection.
• :allow-empty="false": Prevents clearing the selection.
• label: The property name to display in the list.
• track-by: The property name used to track the selected item.

<VueMultiselect
  :model-value="value"
  :options="source"
  :searchable="false"
  :close-on-select="false"
  :allow-empty="false"
  @update:model-value="updateSelected"
  label="name"
  placeholder="Select one"
  track-by="name"
/>

To use VueMultiselect, import the component, register it in your component's components object, and provide v-model and :options. You must also import the component's CSS file.

<template>
  <div>
    <VueMultiselect
      v-model="selected"
      :options="options">
    </VueMultiselect>
  </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect'
export default {
  components: { VueMultiselect },
  data () {
    return {
      selected: null,
      options: ['list', 'of', 'options']
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>