A light weight vue plugin built groundup.
Code Sandbox: Link
npm i @vuesimple/vs-select<template>
<vs-select :options="options1"></vs-select>
<vs-multiselect :options="options1"></vs-multiselect>
</template>
<script>
import { VsSelect, VsMultiselect } from '@vuesimple/vs-select';
export default {
components: {
VsSelect,
VsMultiselect,
},
data() {
return {
options1: ['Derek', 'Ryan', 'BB', 'Chris'],
options2: [
{ label: 'Derek', value: 'D' },
{ label: 'Ryan', value: 'R' },
{ label: 'BB', value: 'BB' },
{ label: 'Chris', value: 'C' },
],
};
},
};
</script><script src="https://unpkg.com/@vuesimple/vs-select@<version>/dist/vs-select.min.js"></script>// Main/Entry file
app.use(VsSelect.plugin);<template>
<vs-select :options="options1"></vs-select>
<vs-multiselect :options="options1"></vs-multiselect>
</template>
Nuxt Code Snippet
After installation,
-
Create a file
/plugins/vs-select.jsimport Vue from 'vue'; import { VsSelect, VsMultiselect } from '@vuesimple/vs-select'; Vue.component('vs-select', VsSelect); Vue.component('vs-multiselect', VsMultiselect);
-
Update
nuxt.config.jsmodule.exports = { ... plugins: [ { src: '~plugins/vs-select', mode: 'client' } ... ] }
-
In the page/ component
<template> <vs-select :options="options1"></vs-select> <vs-multiselect :options="options1"></vs-multiselect> </template>
| Name | Type | Default | Description |
|---|---|---|---|
| options | Array | - | This can be array or array of objects. ['Tony', 'Bruce'] or [{ label: 'Derek', value: 'D' }], |
| isSearch | Boolean | false | Searchable select |
| label | String | - | Label text |
| placeholder | String | 'Select' | Placeholder text |
| preselected | Array | - | Preselected items. For array of objects, pass value as array items ex: ['D', 'BB']
|
| disabled | Boolean | false | To disable select box |
| isError | Boolean | false | To show error in select box |
| isMenu | Boolean | false | To display like menu dropdown. Available only on vs-select
|
| isCompact | Boolean | false | Applies compact style to vs-select |
| emptyItemsText | String | No Data Available |
Empty text |
Note
You can also pass disable: true in array of objects to disable particular item.
// Example
<template>
<vs-select :options="options"></vs-select>
</template>
<script>
import { VsSelect } from 'vs-select';
export default {
data() {
return {
options: [
{ label: 'Iron Man', value: 'Tony' },
{ label: 'Thor', value: 'thor', disabled: true },
{ label: 'Captain America', value: 'Steve Roger' },
],
};
},
};
</script>| Name | Description |
|---|---|
| v-model | Emitted when the item is selected. |
| @change | Emitted when the item is selected. (arg1: value, arg2: object/value) |
Note Colors/ radius can be modified for the select box using css variables. Default colors used:
<style>
.vs-select,
.vs-multiselect {
--vs-select-bg: #ffffff;
--vs-select-border: #d8dcde;
--vs-select-border-hover: #5293c7;
--vs-select-hover: #edf7ff;
--vs-select-error: #cc3340;
--vs-select-icon: #68737d;
--vs-select-border-radius: 4px;
}
</style>