{"id":12339,"library":"v-select2-component","title":"Vue Select2 Component","description":"The `v-select2-component` package, currently at version 0.4.7, provides a Vue 2 wrapper for the popular jQuery Select2 plugin. It enables developers to integrate enhanced `<select>` elements with search, tagging, and remote data capabilities into their Vue 2 applications. The library directly leverages jQuery and the Select2 library, meaning these are required dependencies and must be loaded in the application. As indicated by its reference to Vue CLI v2.9.1 and a pre-1.0 version number, the project appears to be in a maintenance state, primarily supporting Vue 2 applications, with no active development for Vue 3 or modern front-end tooling. Its primary differentiator is its direct, unopinionated wrapper approach for Select2 within the Vue 2 ecosystem.","status":"maintenance","version":"0.4.7","language":"javascript","source_language":"en","source_url":"https://github.com/godbasin/vue-select2","tags":["javascript","vue","select2"],"install":[{"cmd":"npm install v-select2-component","lang":"bash","label":"npm"},{"cmd":"yarn add v-select2-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add v-select2-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the Vue component itself, requires Vue 2.","package":"vue","optional":false},{"reason":"Peer dependency required by the underlying Select2 library.","package":"jquery","optional":false},{"reason":"Core functionality is provided by the Select2 jQuery plugin.","package":"select2","optional":false}],"imports":[{"note":"This package exports a default component. When using CommonJS `require`, you might need `require('v-select2-component').default`.","wrong":"const Select2 = require('v-select2-component');","symbol":"Select2","correct":"import Select2 from 'v-select2-component';"},{"note":"For global component registration in Vue 2. Using `require` directly for an ES default export will typically return the entire module object.","wrong":"Vue.component('Select2', require('v-select2-component'));","symbol":"Vue.component","correct":"import Select2 from 'v-select2-component';\nVue.component('Select2', Select2);"},{"note":"Standard way to register the component locally within a parent Vue 2 component, compatible with both JavaScript and TypeScript.","symbol":"Local Component","correct":"import Select2 from 'v-select2-component';\nexport default {\n  components: { Select2 }\n};"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h3>v-select2-component Quickstart</h3>\n    <Select2 v-model=\"myValue\" :options=\"myOptions\" :settings=\"select2Settings\" @change=\"myChangeEvent\" @select=\"mySelectEvent\" />\n    <p>Selected Value: <strong>{{ myValue }}</strong></p>\n    <button @click=\"myValue = 'op2'\">Set to 'op2'</button>\n    <button @click=\"myValue = { id: 'op4', text: 'Option 4' }\">Set to 'Option 4' (object)</button>\n    <hr />\n    <p>Multiple Select Example:</p>\n    <Select2 v-model=\"multiValue\" :options=\"multiOptions\" :settings=\"{ multiple: true, placeholder: 'Select multiple options' }\" @change=\"multiChangeEvent\" />\n    <p>Multiple Selected Values: <strong>{{ multiValue }}</strong></p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport Select2 from 'v-select2-component';\n// IMPORTANT: Ensure jQuery and Select2 CSS/JS are loaded globally or via your build process.\n// For example, in your main.ts or main.js:\n// import 'jquery';\n// import 'select2';\n// import 'select2/dist/css/select2.min.css';\n\ninterface Select2Option {\n  id: string | number;\n  text: string;\n}\n\nexport default Vue.extend({\n  name: 'App',\n  components: {\n    Select2\n  },\n  data() {\n    return {\n      myValue: 'op1' as string | Select2Option,\n      myOptions: ['op1', 'op2', 'op3', { id: 'op4', text: 'Option 4' }] as Array<string | Select2Option>,\n      select2Settings: {\n        dropdownParent: 'body',\n        width: '100%',\n        minimumResultsForSearch: 5\n      },\n      multiValue: ['itemA'] as Array<string | number>,\n      multiOptions: [\n        { id: 'itemA', text: 'Item A' },\n        { id: 'itemB', text: 'Item B' },\n        { id: 'itemC', text: 'Item C' }\n      ] as Array<Select2Option>\n    };\n  },\n  methods: {\n    myChangeEvent(val: string | Select2Option | Array<string | Select2Option>): void {\n      console.log('Single select change event:', val);\n    },\n    mySelectEvent(option: { id: string | number; text: string }): void {\n      console.log('Single select option selected:', option);\n    },\n    multiChangeEvent(val: Array<string | Select2Option>): void {\n      console.log('Multiple select change event:', val);\n    }\n  }\n});\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"typescript","description":"Demonstrates basic usage of `v-select2-component` with `v-model`, options, custom settings, and event handling for both single and multiple selections."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.1.0"},{"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';`).","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The Select2 jQuery plugin has not been loaded or correctly attached to the jQuery object before the Vue component attempts to initialize it.","error":"TypeError: $(...).select2 is not a function"},{"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`.","cause":"The jQuery library itself is not loaded or accessible in the execution environment where the component or Select2 plugin attempts to run.","error":"Uncaught ReferenceError: jQuery is not defined"},{"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)`.","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.","error":"Failed to mount component: template or render function not defined"}],"ecosystem":"npm"}