# @bazumax/vue-multiselect

> Multiselect component for Vue 3

Latest version **3.0.0-beta.3** (published 2023-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bazumax/vue-multiselect
pnpm add @bazumax/vue-multiselect
yarn add @bazumax/vue-multiselect
bun add @bazumax/vue-multiselect
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0-beta.3 |
| Published | 2023-05-26 |
| First published | 2021-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 959.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 28 |
| Author | Damian Dulisz |
| Maintainers | bazuka5801 |

## Links

- npm: https://www.npmjs.com/package/@bazumax/vue-multiselect
- Repository: https://github.com/suadelabs/vue-multiselect
- Homepage: https://github.com/suadelabs/vue-multiselect#readme
- Issues: https://github.com/suadelabs/vue-multiselect/issues
- npm.io page: https://npm.io/package/@bazumax/vue-multiselect

## Recent versions

- 3.0.0-beta.3 (latest) — 2023-05-26
- 3.0.0-beta.2 — 2023-05-26
- 2.1.16 — 2022-05-28
- 2.1.15 — 2022-05-28
- 2.1.14 — 2022-05-28
- 2.1.13 — 2022-05-28
- 2.1.12 — 2022-05-28
- 2.1.11 — 2022-05-28
- 2.1.10 — 2022-05-28
- 2.1.8 — 2022-05-28
- 2.1.7 — 2021-09-27

## README

# vue-multiselect

## Documentation

> Documentation for v3.0.0 is the same as for v2.x as it is mostly backward compatible.

Visit: [vue-multiselect.js.org](https://vue-multiselect.js.org/#sub-getting-started)

## Sponsors

<p align="center">
  <a href="https://getform.io/" target="_blank">
    <img src="https://cdn.discordapp.com/attachments/1002927810710605875/1034915542596845728/getform.png" alt="Get Form" width="240px">
  </a>
</p>

<p align="center">
  <a href="https://suade.org/" target="_blank">
    <img src="https://tinyurl.com/suadelogo" alt="Suade Labs" width="200px">
  </a>
</p>

<p align="center">
  <a href="https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
    <img src="https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png" alt="Storyblok" width="240px">
  </a>
</p>

<p align="center">
  <a href="https://www.vuemastery.com/" target="_blank">
    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" width="180px">
  </a>
</p>

## Install & basic usage

```bash
npm install vue-multiselect@next
```

```vue
<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>
```

## Examples

### Single select / dropdown
```vue
<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"
/>
```

### Single select with search
```vue
<VueMultiselect
  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
```vue
<VueMultiselect
  v-model="multiValue"
  :options="source"
  :multiple="true"
  :close-on-select="true"
  placeholder="Pick some"
  label="name"
  track-by="name"
/>
```

### Tagging
with `@tag` event
```vue
<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"
/>
```

``` javascript

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
```vue
<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>
```

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

## Special Thanks

Thanks to Matt Elen for contributing this version!

> A Vue 3 upgrade of [@shentao's](https://github.com/shentao) [vue-mulitselect](https://github.com/shentao/vue-multiselect) 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](https://suade.org/dev/a-products-vue-3-migration-a-real-life-story/)

## Contributing

``` bash
# distribution build with minification
npm run bundle

# run unit tests
npm run test

```

---
_Source: https://npm.io/package/@bazumax/vue-multiselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._