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" can-be-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"
  is-multiple
  :min-length="1"
  :max-length="2"
  close-on-select
></vue-select>

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

    return {
      selectedOptions,
      options,
    }
  },
})

Props

Name	Type	Default
v-model / modelValue	any	required
options	Array	required
canBeEmpty	Boolean	false
isMultiple	Boolean	false
minLength	Number	0
maxLength	Number	Infinity
isDisabled	false	false
placeholder	String	"Pick a value"
search	Function	-

Events

Name	Arguments	Listener
Select	option	@select
Remove	option	@remove
Open	-	@open
Close	-	@close
Input	event	@search-input
Change	event	@search-change
Focus	event	@focus
Blur	event	@blur