https://github.com/totominc/vue3-select-component
A flexible & modern select-input control for Vue 3.
https://github.com/totominc/vue3-select-component
multi-select select vue3 vuejs
Last synced: about 1 year ago
JSON representation
A flexible & modern select-input control for Vue 3.
- Host: GitHub
- URL: https://github.com/totominc/vue3-select-component
- Owner: TotomInc
- License: mit
- Created: 2024-02-08T15:23:17.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-27T08:09:00.000Z (about 1 year ago)
- Last Synced: 2025-03-28T23:03:51.016Z (about 1 year ago)
- Topics: multi-select, select, vue3, vuejs
- Language: Vue
- Homepage: https://vue3-select-component.vercel.app/
- Size: 2.06 MB
- Stars: 75
- Watchers: 2
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue3-Select-Component
Best-in-class select component for Vue 3, with a focus on DX, accessibility and ease-of-use.
Documentation | Getting Started | Examples / Demos
**Core features:**
- ⚙️ Data manipulation with `v-model`
- 🔑 [Typesafe relationship](https://vue3-select-component.vercel.app/typescript.html) between `options` and `v-model`
- 🎨 Great styling out-of-the-box, customization with CSS variables & Vue `:deep`
- ✅ Single & multi-select support
- 🖌️ Infinite customization with ``s
- 🪄 `` menu where you want
- 📦 Extremely light, **0 dependencies** (4.4kb gzip)
## Installation
Install the package with npm:
```bash
npm i vue3-select-component
```
Use it in your Vue 3 app:
```vue
import { ref } from "vue";
import VueSelect from "vue3-select-component";
const option = ref("");
```
## Advanced TypeScript usage
Vue 3 Select Component creates a type-safe relationship between the `option.value` and the `v-model` prop.
It also leverages the power of generics to provide types for additional properties on the options.
```vue
import type { Option } from "vue3-select-component";
import { ref } from "vue";
import VueSelect from "vue3-select-component";
type UserOption = Option<number> & { username: string };
const selectedUser = ref<number>();
const userOptions: UserOption[] = [
{ label: "Alice", value: 1, username: "alice15" },
{ label: "Bob", value: 2, username: "bob01" },
{ label: "Charlie", value: 3, username: "charlie20" },
];
```
[There's an entire documentation page](https://vue3-select-component.vercel.app/typescript.html) dedicated to usage with TypeScript.
## Releases
For changelog, visit [releases](https://github.com/TotomInc/vue3-select-component/releases).
## License
MIT Licensed. Copyright (c) Thomas Cazade 2024 - present.