Registry / ui-components / vue-multi-select

vue-multi-select

library4.6.0jsnpmunverified

A multi/single select component for Vue.js (>=2.x) at version 4.6.0. Provides a dropdown-based selection UI with support for groups, custom styling via CSS functions, search filtering, and programmable filters. The component emits selectionChanged (customizable), open, and close events. Differentiators include built-in filter functions for select/deselect all, customizable button labels and CSS, and position options (top-left, top-right, bottom-left, bottom-right). Requires Vue 2.x; no Vue 3 support. Release cadence is maintenance-oriented with occasional updates.

ui-components vue

npm install vue-multi-select

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-MULTI-SELECT

vue-multi-select

ui-componentsjavascriptv4.6.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueMultiSelect

✓ import vueMultiSelect from 'vue-multi-select'

Default import of the component. Also need to import CSS: import 'vue-multi-select/dist/lib/vue-multi-select.min.css'

Vue.use(vueMultiSelect)

✓ Vue.use(vueMultiSelect)

✗ Vue.component('vue-multi-select', vueMultiSelect)

The component is a plugin; use Vue.use to register globally, or manually register as a component.

component registration

✓ components: { 'vue-multi-select': vueMultiSelect }

✗ components: { vueMultiSelect }

In Vue 2, the component name should be kebab-case when used in templates. The default export is the plugin object, not a component definition; use Vue.use() or extract the component.

Shows basic usage with options, selectOptions, v-model, and event handling for a multi-select component.

// Install: npm install vue-multi-select --save import Vue from 'vue'; import vueMultiSelect from 'vue-multi-select'; import 'vue-multi-select/dist/lib/vue-multi-select.min.css'; Vue.use(vueMultiSelect); // In your template: <vue-multi-select :options="{ multi: true, labelName: 'name', cssSelected: (option) => option.selected ? { 'font-weight': 'bold', color: '#5755d9' } : '' }" :selectOptions="[ { id: 1, name: 'Option A' }, { id: 2, name: 'Option B' }, { id: 3, name: 'Option C' } ]" v-model="selectedValues" btnLabel="Select items" @selectionChanged="onChange" ></vue-multi-select>

Debug

Known issues

gotchaThe component requires Vue 2.x only. It does not support Vue 3.

fix

Use with Vue 2.x or look for a Vue 3 compatible alternative.

affects: >=0.0.0

gotchaWhen registering the component locally, use kebab-case in the components object and in templates.

fix

Use `components: { 'vue-multi-select': vueMultiSelect }` instead of `components: { vueMultiSelect }`.

affects: >=0.0.0

gotchaThe CSS file must be imported separately. Not importing it will result in unstyled select.

fix

Add `import 'vue-multi-select/dist/lib/vue-multi-select.min.css'` to your entry file.

affects: >=0.0.0

gotchaThe `options` prop expects an object, not a function or array. Common mistake: passing an array instead of an object.

fix

Pass an object with properties like `{ multi: true, labelName: 'name' }`.

affects: >=0.0.0

Errors

Common errors & fixes

Unknown custom element: <vue-multi-select> - did you register the component correctly?

Component not registered globally or locally.

fix

Use `Vue.use(vueMultiSelect)` or register it in the components option of your Vue instance/component as `'vue-multi-select'`.

Cannot find module 'vue-multi-select/dist/lib/vue-multi-select.min.css'

CSS file path incorrect or missing after installation.

fix

Ensure the package is installed and use the correct path: `import 'vue-multi-select/dist/lib/vue-multi-select.min.css'`.

Property or method "selectedValues" is not defined on the instance but referenced during render.

v-model references a data property that is not defined.

fix

Define the v-model variable in the data option of your component: `data() { return { selectedValues: [] }; }`

Invalid prop: type check failed for prop "selectOptions". Expected Array, got Object

selectOptions must be an array, not an object.

fix

Pass an array of options to selectOptions, e.g., `:selectOptions="[{name: 'Option1'}, {name: 'Option2'}]"`

Upgrade

Version history

4.6.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency - required as the component is built for Vue.js

Agent activity

35 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/IneoO/vue-multi-select ↗

packagevue-multi-select ↗

homepagehttps://github.com/IneoO/vue-multi-select#readme ↗