Select Box Like Element Picker Component For Vue 3

Install & Download:

$ npm i @invisiburu/vue-picker --save


A user-friendly dropdown picker component that behaviors like the native select element.

How to use it:

1. Import and register the picker component.

import { VuePicker, VuePickerOption } from '@invisiburu/vue-picker'
// optional css
import '@invisiburu/vue-picker/dist/vue-picker.min.css'
Vue.component('VuePicker', VuePicker)
Vue.component('VuePickerOption', VuePickerOption)

2. Add a basic picker component to the app.

<vue-picker v-model="language" autofocus>
  <vue-picker-option value="">Empty</vue-picker-option>
  <vue-picker-option value="js">JavaScript</vue-picker-option>
  <vue-picker-option value="html">HTML</vue-picker-option>
  <vue-picker-option value="css">CSS</vue-picker-option>

3. Possible props & events for the VuePicker component.

  • autofocus: auto focus on mount
  • disabled: disable the component
  • value: define your value here
  • placeholder: placeholder text
  • @input: when an option is selected
  • @open: when opened
  • @close: after closed

4. Possible props & events for the VuePickerOption component.

  • disabled: disable the option
  • value: define your value here
  • text: text to be displayed instead of the content of the default slot


Select Box Like Element Picker Component For Vue


v2.1.0 (01/05/2022)

  • Added onKeyDown prop to override/extend the key down listener

v2.0.5 (11/18/2021)

  • Focus of null openerRef issue

v2.0.4 (09/25/2021)

  • Bugfix

v2.0.3 (09/09/2021)

  • Bugfix

v2.0.2 (06/07/2021)

  • Now supports only Vue3 version.
  • Replaced disabled and autofocus attributes with isDisabled and isAutofocus boolean props.
  • Renamed css modifier selectors.
  • The opener’s text is now immediately updated on navigation with up and down arrows in the open dropdown.

v2.0.2 (06/08/2021)

  • Bugfixed

v1.1.2 (03/06/2021)

  • Fixed Deps security issues

Add Comment