Everything you wish the HTML
<select>element could do, wrapped up into a lightweight, zero dependency, extensible Vue component.
Vue Select is a feature rich select/dropdown/typeahead component. It provides a default template that fits most use cases for a filterable select dropdown. The component is designed to be as lightweight as possible, while maintaining high standards for accessibility, developer experience, and customization.
- Filtering / Searching
- Vuex Support
- AJAX Support
- SSR Support
- ~20kb Total / ~5kb CSS / ~15kb JS
- Select Single/Multiple Options
- Customizable with slots and SCSS variables
- Zero dependencies
Complete documentation and examples available at https://vue-select.org.
It takes a lot of effort to maintain this project. If it has saved you development time, please consider sponsoring the project with GitHub sponsors!
yarn add vue-select # or use npm npm install vue-select
Then, import and register the component:
import Vue from "vue"; import vSelect from "vue-select"; Vue.component("v-select", vSelect);
The component itself does not include any CSS. You'll need to include it separately:
Alternatively, you can import the scss for complete control of the component styles:
You can also include vue-select directly in the browser. Check out the documentation for loading from CDN..