Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sagalbot/vue-select
Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://github.com/sagalbot/vue-select
combobox listbox select selecting selector vue vue-component vue-select vue2 vue3
Last synced: 2 days ago
JSON representation
Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
- Host: GitHub
- URL: https://github.com/sagalbot/vue-select
- Owner: sagalbot
- License: mit
- Created: 2016-03-02T05:06:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-12-11T20:28:11.000Z (about 1 month ago)
- Last Synced: 2025-01-20T11:08:45.402Z (2 days ago)
- Topics: combobox, listbox, select, selecting, selector, vue, vue-component, vue-select, vue2, vue3
- Language: JavaScript
- Homepage: https://vue-select.org
- Size: 12.8 MB
- Stars: 4,661
- Watchers: 55
- Forks: 1,339
- Open Issues: 334
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue-cn - **vue-select ★155**
README
# vue-select     [](https://coveralls.io/github/sagalbot/vue-select?branch=master) 
> **Everything you wish the HTML `` 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.
- Tagging
- Filtering / Searching
- Vuex Support
- AJAX Support
- SSR Support
- Accessible
- ~20kb Total / ~5kb CSS / ~15kb JS
- Select Single/Multiple Options
- Customizable with slots and SCSS variables
- Zero dependencies
## Documentation
Complete documentation and examples available at https://vue-select.org.
- **[API Documentation](https://vue-select.org)**
- **[Vue 2 CodePen Template](https://codepen.io/pen?template=VwdrdzG)**
- **[Vue 3 CodePen Template](https://codepen.io/pen?template=NpwrQO)**
## Sponsors :tada:
It takes a lot of effort to maintain this project. If it has saved you development time, please consider [sponsoring the project](https://github.com/sponsors/sagalbot)
with GitHub sponsors!
Huge thanks to the [sponsors](https://github.com/sponsors/sagalbot) and [contributors](https://github.com/sagalbot/vue-select/graphs/contributors) that make Vue Select possible!
## Get started
**Vue 3 / Vue Select 4.x-beta**
> Vue 3 support is on the `beta` channel: `vue-select@beta`, and will become the new default when `v4` is released. See [#1579](https://github.com/sagalbot/vue-select/issues/1597) for more details!
Install:
```bash
yarn add vue-select@beta
# or use npm
npm install vue-select@beta
```
Then, import and register the component:
```js
# main.ts or main.js
import { createApp } from "vue";
import App from "./App.vue";
import { VueSelect } from "vue-select";
createApp(App)
.component("v-select", VueSelect)
.mount("#app");
```
The component itself does not include any CSS. You'll need to include it separately in your Component.vue:
```vue
@import "vue-select/dist/vue-select.css";
```
**Vue 2 / Vue Select 3.x**
Install:
```bash
yarn add vue-select
# or use npm
npm install vue-select
```
Then, import and register the component:
```js
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:
```js
import "vue-select/dist/vue-select.css";
```
You can also include vue-select directly in the browser. Check out the
[documentation for loading from CDN.](https://vue-select.org/guide/install.html#in-the-browser).
## License
[MIT](https://github.com/sagalbot/vue-select/blob/master/LICENSE.md)