Vue-next-select

The selecting solution for Vue 3

       

Features

• Single select
• Multiple select
• Tagging
• Group
• Filtering / Remote Searching
• Asynchronous support
• No dependencies
• Aims to follow WAI-ARIA for the combobox and listbox widget

Installation

npm i vue-next-select

CDN

<!-- import style -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-next-select/dist/index.min.css" />

<!-- import script -->
<script src="https://unpkg.com/vue-next-select/dist/vue-next-select.iife.prod.js"></script>

You can access select component via the global variable VueNextSelect

Component Registration

Global Registration:

import { createApp } from 'vue'
import VueNextSelect from 'vue-next-select'

const app = createApp({})
app.component('vue-select', VueNextSelect)

Local Registration:

import { createApp } from 'vue'
import VueNextSelect from 'vue-next-select'

const app = Vue.createApp({
  components: {
    'vue-select': VueNextSelect,
  },
})

Getting Started

Options

In HTML, each menu option is defined by an option element nested inside the select element:

<select>
  <option>Red</option>
  <option>Green</option>
</select>

In vue-next-select, you need to pass an array of primitive values through an options prop:

<vue-select :options="['Red', 'Green']"> </vue-select>

The options prop also accepts an array of objects. In this case, you need to pass an additional prop: label-by to display the options:

<vue-select :options="[{ color: 'Red' }, { color: 'Green' }]" label-by="color"> </vue-select>

vue-next-select requires the options prop to be an array, if there are no options, you must pass an empty array:

<vue-select :options="[]"> </vue-select>

See more details about options and label-by in API reference.