nuxt3-select2

This is a select2 component for nuxt3 based on godbasin work here: vue3-select2-component credits belong to them for making all these availble for us for free.

How to use

---

$3

`` cmd
// npm install
npm install nuxt3-select2 --save
`

$3

1. make a plugin
` javascript
// plugins/select2.client.ts
import Select2 from 'nuxt3-select2';

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("Select2", Select2, {});
});
`

2. now it's available on your template
` javascript
// use it


`

$3


- options: option[]
- select options for select2
- option: {id: key, text: value} or string
- v-model: option value that is selected
- id or string while multiple is disable
- id[] or string[] while multiple is enable
- disabled
- if select is disabled
- placeholder
- placeholder attribute for select element
- id
- id attribute for select element
- name
- name attribute for select element
- settings
- configurable settings, see Select2 options API
- setting: { settingOption: value, settingOption: value }

$3

currently supporting these events:
- change := change
- closing := select2:closing
- close := select2:close
- opening := select2:opening
- open := select2:open
- selecting := select2:selecting
- select := select2:select
- unselecting := select2:unselecting
- unselect := select2:unselect
- clearing := select2:clearing
- clear := select2:clear

For the complete documentation, see on Select2 Event API

$3

- problem with select2 inside input-group class
Somehow this select2 doesn't work well with bootstrap input-group. Has googled it and found many people facing the same problem.

Here is how I manage it works:

`html



`

Putting form-control class is ok, but it will create borders, while I don't want to have that border. So I create my own class: my-control. It's optional of course.

here is the css:
` css
.input-group .select2-container {
height: 37px;
}

.input-group .select2-container .selection .select2-selection--single {
height: 100%;
}

/ optional, you can use form-control if you prefer /
.input-group .my-control {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
`

- problem with select2 inside modal class
this is also a weird behaviour.

there are 30 solutions (wow :) here: https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

but sadly few top answers just doesn't work for me. Instead, I did a little trick, and it worked.
just override the z-index
`css
.select2-container.select2-container--default.select2-container--open {
z-index: 9999;
}
`

you don't have to make it 9999. at least the modal z-index + 1 is enough.


- somehow after npm run build, the jquery and select2 doesn't work

(warning: it's not recommended to add jquery to vuejs application. so take it at your own risk
basically, all you need to do in jquery, you should be able to do it in vue. all you need to do is a little more googling and stackoverflowing :''
)

add this in the nuxt-config.ts

`ts
app: {
head: {
script: [
{src: '/_nuxt/node_modules/jquery/dist/jquery.js'},
{src: '/_nuxt/node_modules/select2/dist/js/select2.min.js'},
],
},
css: [
"/_nuxt/node_modules/select2/dist/css/select2.min.css",
],
``