# nuxt3-select2

> select2 for nuxt3. https://github.com/jackysupit/nuxt3-select2/tree/for-nuxt3

Latest version **0.1.29** (published 2022-12-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt3-select2
pnpm add nuxt3-select2
yarn add nuxt3-select2
bun add nuxt3-select2
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.29 |
| Published | 2022-12-05 |
| First published | 2022-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jacky supit |
| Maintainers | jeksu |
| Keywords | vue, vue3, nuxt3, select2 |

## Links

- npm: https://www.npmjs.com/package/nuxt3-select2
- Repository: https://github.com/jackysupit/nuxt3-select2
- Homepage: https://github.com/jackysupit/nuxt3-select2/tree/for-nuxt3#readme
- Issues: https://github.com/jackysupit/nuxt3-select2/tree/for-nuxt3/issues
- npm.io page: https://npm.io/package/nuxt3-select2

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) ^3.3.1
- [select2](https://npm.io/package/select2.md) ^4.0.7-rc.0

## Recent versions

- 0.1.29 (latest) — 2022-12-05
- 0.1.28 — 2022-12-05
- 0.1.27 — 2022-12-05
- 0.1.26 — 2022-12-02
- 0.1.25 — 2022-12-02
- 0.1.24 — 2022-12-02
- 0.1.22 — 2022-12-02
- 0.1.21 — 2022-12-02
- 0.1.20 — 2022-12-02
- 0.1.19 — 2022-11-07
- 0.1.18 — 2022-11-06
- 0.1.17 — 2022-11-06
- 0.1.16 — 2022-11-06
- 0.1.15 — 2022-11-06
- 0.1.14 — 2022-11-06
- … 13 more at https://npm.io/package/nuxt3-select2/versions

## README

This is a [select2](https://select2.org/) component for [nuxt3](https://v3.nuxtjs.org/) based on godbasin work here: [vue3-select2-component](https://github.com/godbasin/vue-select2/tree/npm-publish-code-for-vue3)  credits belong to them for making all these availble for us for free.


## How to use
---
### Install
``` cmd
// npm install
npm install nuxt3-select2 --save
```

### Use as component
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
<template>
  <div>
    <Select2 v-model="myValue" :options="myOptions" :settings="{ settingOption: value, settingOption: value }" @change="myChangeEvent($event)" @select="mySelectEvent($event)" />
    <h4>Value: {{ myValue }}</h4>
  </div>
</template>
<script setup lang="ts">
  const myChangeEvent = (event) => {
    console.log("myChangeEvent: ", event);
  }
  const mySelectEvent = (e) => {
    console.log("mySelectEvent: ", event);
  }
  const myOptions = [
    {id: 1, text: 'apple'},
    {id: 2, text: 'berry'},
    {id: 3, text: 'cherry'},
  ]
  const myValue = ref();
</script>
```

### Options
- `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](https://select2.org/configuration/options-api)
  - `setting`: `{ settingOption: value, settingOption: value }`

### Supported Events
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](https://select2.org/programmatic-control/events)



### Misc

- 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
  <div class="input-group">
    <Datepicker class="my-control" />
    <Select2 class="my-control"/>
  </div>
```

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](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",
  ],
```

---
_Source: https://npm.io/package/nuxt3-select2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._