{"id":42272,"library":"vue-multi-select","title":"vue-multi-select","description":"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.","status":"active","version":"4.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/IneoO/vue-multi-select","tags":["javascript","vue","vuejs","multi","single","select","web-components"],"install":[{"cmd":"npm install vue-multi-select","lang":"bash","label":"npm"},{"cmd":"yarn add vue-multi-select","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-multi-select","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency - required as the component is built for Vue.js","package":"vue","optional":false}],"imports":[{"note":"Default import of the component. Also need to import CSS: import 'vue-multi-select/dist/lib/vue-multi-select.min.css'","symbol":"vueMultiSelect","correct":"import vueMultiSelect from 'vue-multi-select'"},{"note":"The component is a plugin; use Vue.use to register globally, or manually register as a component.","wrong":"Vue.component('vue-multi-select', vueMultiSelect)","symbol":"Vue.use(vueMultiSelect)","correct":"Vue.use(vueMultiSelect)"},{"note":"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.","wrong":"components: { vueMultiSelect }","symbol":"component registration","correct":"components: { 'vue-multi-select': vueMultiSelect }"}],"quickstart":{"code":"// Install: npm install vue-multi-select --save\nimport Vue from 'vue';\nimport vueMultiSelect from 'vue-multi-select';\nimport 'vue-multi-select/dist/lib/vue-multi-select.min.css';\n\nVue.use(vueMultiSelect);\n\n// In your template:\n<vue-multi-select\n  :options=\"{\n    multi: true,\n    labelName: 'name',\n    cssSelected: (option) => option.selected ? { 'font-weight': 'bold', color: '#5755d9' } : ''\n  }\"\n  :selectOptions=\"[\n    { id: 1, name: 'Option A' },\n    { id: 2, name: 'Option B' },\n    { id: 3, name: 'Option C' }\n  ]\"\n  v-model=\"selectedValues\"\n  btnLabel=\"Select items\"\n  @selectionChanged=\"onChange\"\n></vue-multi-select>","lang":"javascript","description":"Shows basic usage with options, selectOptions, v-model, and event handling for a multi-select component."},"warnings":[{"fix":"Use with Vue 2.x or look for a Vue 3 compatible alternative.","message":"The component requires Vue 2.x only. It does not support Vue 3.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use `components: { 'vue-multi-select': vueMultiSelect }` instead of `components: { vueMultiSelect }`.","message":"When registering the component locally, use kebab-case in the components object and in templates.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Add `import 'vue-multi-select/dist/lib/vue-multi-select.min.css'` to your entry file.","message":"The CSS file must be imported separately. Not importing it will result in unstyled select.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pass an object with properties like `{ multi: true, labelName: 'name' }`.","message":"The `options` prop expects an object, not a function or array. Common mistake: passing an array instead of an object.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'2':11,78 '3':82 '4.6.0':15 'base':20 'bottom':71,74 'bottom-left':70 'bottom-right':73 'built':49 'built-in':48 'button':57 'cadenc':85 'close':44 'compon':8,38,101 'css':30,60 'custom':27 'customiz':41,56 'differenti':46 'dropdown':19 'dropdown-bas':18 'emit':39 'event':45 'filter':33,36,51 'function':31,52 'group':26 'includ':47 'javascript':93 'label':58 'left':66,72 'mainten':88 'maintenance-ori':87 'multi':3,96 'multi/single':6 'occasion':91 'open':42 'option':63 'orient':89 'posit':62 'programm':35 'provid':16 'releas':84 'requir':76 'right':69,75 'search':32 'select':4,7,21,98 'select/deselect':54 'selectionchang':40 'singl':97 'style':28 'support':24,83 'top':65,68 'top-left':64 'top-right':67 'ui':22 'updat':92 'version':14 'via':29 'vue':2,77,81,94 'vue-multi-select':1 'vue.js':10 'vuej':95 'web':100 'web-compon':99 'x':12,79","created_at":"2026-06-04T18:56:27.329635+00:00","updated_at":"2026-06-04T18:56:27.329635+00:00","problems":[{"fix":"Use `Vue.use(vueMultiSelect)` or register it in the components option of your Vue instance/component as `'vue-multi-select'`.","cause":"Component not registered globally or locally.","error":"Unknown custom element: <vue-multi-select> - did you register the component correctly?"},{"fix":"Ensure the package is installed and use the correct path: `import 'vue-multi-select/dist/lib/vue-multi-select.min.css'`.","cause":"CSS file path incorrect or missing after installation.","error":"Cannot find module 'vue-multi-select/dist/lib/vue-multi-select.min.css'"},{"fix":"Define the v-model variable in the data option of your component: `data() { return { selectedValues: [] }; }`","cause":"v-model references a data property that is not defined.","error":"Property or method \"selectedValues\" is not defined on the instance but referenced during render."},{"fix":"Pass an array of options to selectOptions, e.g., `:selectOptions=\"[{name: 'Option1'}, {name: 'Option2'}]\"`","cause":"selectOptions must be an array, not an object.","error":"Invalid prop: type check failed for prop \"selectOptions\". Expected Array, got Object"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/IneoO/vue-multi-select#readme","github":"https://github.com/IneoO/vue-multi-select","docs":null,"changelog":null,"pypi":null,"npm":"vue-multi-select","openapi_spec":null,"status_page":null,"smithery":null,"categories":["ui-components","vue"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}