Package Exports

vue-next-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-next-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-next-select

Status: WIP

Live Demo

Features

Fully configurable
Single select
Multiple select
Searching
Async options support

Installation

$ npm install vue-next-select

import { reactive, ref, createApp } from 'vue'
import VueSelect from 'vue-next-select'
import 'vue-next-select/dist/index.min.css'

const app = createApp({
  setup() {
    const value = ref(0)
    const options = reactive([0, 1, 2])
    return {
      value,
      options,
    }
  },
  components: {
    // Local registration
    VueSelect,
  },
  template: `
    <vue-select
      v-model="value"
      :options="options"
    ></vue-select
  `,
})
// Or global registration
app.component('vue-select', VueSelect)
app.mount(document.querySelector('#app'))

Examples

Single Select

<vue-select
  v-model="selectedOptions"
  :options="options"
  allow-empty
  close-on-select
></vue-select>

createApp({
  setup() {
    const selectedOptions = ref('I')
    const options = ref(['I', 'Love', 'Vue'])

    return {
      selectedOptions,
      options,
    }
  },
})

Multiple Select

<vue-select
  v-model="selectedOptions"
  :options="options"
  multiple
  :min="1"
  :max="2"
  close-on-select
></vue-select>

createApp({
  setup() {
    const selectedOptions = ref(['I'])
    const options = ref(['I', 'Love', 'Vue'])

    return {
      selectedOptions,
      options,
    }
  },
})

Props

Prop	Type	Default	Arguments
v-model / modelValue	any	required
options	Array	required
visibleOptions	Array	props.option
allowEmpty	Boolean	false
multiple	Boolean	false
min	Number	0
max	Number	Infinity
closeOnSelect	Boolean	false
labelBy	Function, String		option
valueBy	Function, String		option
trackBy	Function, String		option
hideSelected	Boolean	false
disabled	Boolean	false
loading	Boolean	false
placeholder	String	"Pick a value"
searchable	Boolean	false
taggable	Boolean	false
ellipsis	Boolean	false

Events

Listener	Arguments
@select	option
@remove	option
@open
@close
@search-input	event
@search-change	event
@focus	event
@blur	event

Slots

Name	Arguments
#tag-item	option
#dropdown-item	option