Vue Select2 Component

Common errors

• TypeError: $(...).select2 is not a function

  cause The Select2 jQuery plugin has not been loaded or correctly attached to the jQuery object before the Vue component attempts to initialize it.
  fix Verify 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

  cause The jQuery library itself is not loaded or accessible in the execution environment where the component or Select2 plugin attempts to run.
  fix Make 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

  cause 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.
  fix Ensure `v-select2-component` is properly imported and declared in the `components` option of its parent component, or globally registered using `Vue.component('Select2', Select2)`.

Warnings

• breaking This component is built exclusively for Vue 2 and is fundamentally incompatible with Vue 3 due to significant architectural changes in Vue's component API, reactivity system, and lifecycle hooks.
  Fix: For Vue 3 projects, use an alternative Select2 wrapper designed for Vue 3 (e.g., 'vue3-select2-component') or a native Vue 3 multi-select component.
• gotcha This component has a hard dependency on both `jQuery` and the `select2` library. These must be explicitly installed and loaded into your application (e.g., globally or via imports) before `v-select2-component` is initialized. Failure to do so will result in runtime errors.
  Fix: Ensure `jquery` and `select2` (and its CSS) are installed via npm (`npm install jquery select2`) and imported in your main application entry point (e.g., `import 'jquery'; import 'select2'; import 'select2/dist/css/select2.min.css';`).
• gotcha The project appears to be in a maintenance-only state, referencing older tooling (Vue CLI v2) and having a pre-1.0 version (0.4.7). This suggests limited or no active development for new features, compatibility with modern JavaScript ecosystems, or security updates beyond basic functionality for Vue 2.
  Fix: Assess the implications of using a less actively maintained library for long-term projects. Consider more modern or actively supported alternatives if frequent updates, new features, or strict security patching are critical.

Install

• npm install v-select2-component npm
• yarn add v-select2-component yarn
• pnpm add v-select2-component pnpm

Imports

• Select2
  wrong:

  const Select2 = require('v-select2-component');

  correct:

  import Select2 from 'v-select2-component';

  This package exports a default component. When using CommonJS `require`, you might need `require('v-select2-component').default`.
• Vue.component
  wrong:

  Vue.component('Select2', require('v-select2-component'));

  correct:

  import Select2 from 'v-select2-component';
  Vue.component('Select2', Select2);

  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.

Quickstart

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>