Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Select2
✓ import Select2 from 'v-select2-component';
✗ const Select2 = require('v-select2-component');
This package exports a default component. When using CommonJS `require`, you might need `require('v-select2-component').default`.
Vue.component
✓ import Select2 from 'v-select2-component';
Vue.component('Select2', Select2);
✗ Vue.component('Select2', require('v-select2-component'));
For global component registration in Vue 2. Using `require` directly for an ES default export will typically return the entire module object.
Local Component
✓ import Select2 from 'v-select2-component';
export default {
components: { Select2 }
};
Standard way to register the component locally within a parent Vue 2 component, compatible with both JavaScript and TypeScript.
Demonstrates basic usage of `v-select2-component` with `v-model`, options, custom settings, and event handling for both single and multiple selections.
<template>
<div id="app">
<h3>v-select2-component Quickstart</h3>
<Select2 v-model="myValue" :options="myOptions" :settings="select2Settings" @change="myChangeEvent" @select="mySelectEvent" />
<p>Selected Value: <strong>{{ myValue }}</strong></p>
<button @click="myValue = 'op2'">Set to 'op2'</button>
<button @click="myValue = { id: 'op4', text: 'Option 4' }">Set to 'Option 4' (object)</button>
<hr />
<p>Multiple Select Example:</p>
<Select2 v-model="multiValue" :options="multiOptions" :settings="{ multiple: true, placeholder: 'Select multiple options' }" @change="multiChangeEvent" />
<p>Multiple Selected Values: <strong>{{ multiValue }}</strong></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Select2 from 'v-select2-component';
// IMPORTANT: Ensure jQuery and Select2 CSS/JS are loaded globally or via your build process.
// For example, in your main.ts or main.js:
// import 'jquery';
// import 'select2';
// import 'select2/dist/css/select2.min.css';
interface Select2Option {
id: string | number;
text: string;
}
export default Vue.extend({
name: 'App',
components: {
Select2
},
data() {
return {
myValue: 'op1' as string | Select2Option,
myOptions: ['op1', 'op2', 'op3', { id: 'op4', text: 'Option 4' }] as Array<string | Select2Option>,
select2Settings: {
dropdownParent: 'body',
width: '100%',
minimumResultsForSearch: 5
},
multiValue: ['itemA'] as Array<string | number>,
multiOptions: [
{ id: 'itemA', text: 'Item A' },
{ id: 'itemB', text: 'Item B' },
{ id: 'itemC', text: 'Item C' }
] as Array<Select2Option>
};
},
methods: {
myChangeEvent(val: string | Select2Option | Array<string | Select2Option>): void {
console.log('Single select change event:', val);
},
mySelectEvent(option: { id: string | number; text: string }): void {
console.log('Single select option selected:', option);
},
multiChangeEvent(val: Array<string | Select2Option>): void {
console.log('Multiple select change event:', val);
}
}
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Errors
Common errors & fixes
TypeError: $(...).select2 is not a function
The Select2 jQuery plugin has not been loaded or correctly attached to the jQuery object before the Vue component attempts to initialize it.
fixVerify that `jQuery` is loaded, followed by the `select2` JavaScript file. Ensure they are available in the global scope or correctly imported and bundled by your build system.
Uncaught ReferenceError: jQuery is not defined
The jQuery library itself is not loaded or accessible in the execution environment where the component or Select2 plugin attempts to run.
fixMake sure the `jquery` package is installed (`npm install jquery`) and imported/included as the very first script in your application, before `select2` or `v-select2-component`.
Failed to mount component: template or render function not defined
This general Vue 2 error can occur if the `v-select2-component` component is not correctly registered in your Vue application (globally or locally), or if your Vue build isn't configured to handle SFCs correctly.
fixEnsure `v-select2-component` is properly imported and declared in the `components` option of its parent component, or globally registered using `Vue.component('Select2', Select2)`. Audit
Dependencies
vuerequiredRuntime dependency for the Vue component itself, requires Vue 2.
jqueryrequiredPeer dependency required by the underlying Select2 library.
select2requiredCore functionality is provided by the Select2 jQuery plugin.