vue3-multiselect

A Vue 3 upgrade of @shentao's vue-mulitselect component. The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work.

Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at suade.org

Features & characteristics:

NO dependencies
Single select
Multiple select
Tagging
Dropdowns
Filtering
Search with suggestions
Logic split into mixins
Basic component and support for custom components
V-model support
Vuex support
Async options support
Fully configurable

Install & basic usage

npm install @suadelabs/vue3-multiselect

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

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

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

Examples

in jade-lang/pug-lang

Single select / dropdown

multiselect(
  :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"
)

Single select with search

multiselect(
  v-model="value",
  :options="source",
  :close-on-select="true",
  :clear-on-select="false",
  placeholder="Select one",
  label="name",
  track-by="name"
)

Multiple select with search

multiselect(
  v-model="multiValue",
  :options="source",
  :multiple="true",
  :close-on-select="true",
  placeholder="Pick some",
  label="name",
  track-by="name"
)

Tagging

with @tag event

multiselect(
  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)
},

Asynchronous dropdown

multiselect(
  v-model="selectedCountries",
  :options="countries",
  :multiple="multiple",
  :searchable="searchable",
  @search-change="asyncFind",
  placeholder="Type to search",
  label="name"
  track-by="code"
)
  span(slot="noResult").
    Oops! No elements found. Consider changing the search query.

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

Contributing

# distribution build with minification
npm run bundle

# run unit tests
npm run test

License

SMishin/vue3-multiselect

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages