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 between
optionsandv-model - 🎨 Great styling out-of-the-box, customization with CSS variables & Vue
:deep - ✅ Single & multi-select support
- 🖌️ Infinite customization with
<slot>s - 🪄
<Teleport />menu where you want - 📦 Extremely light, 0 dependencies (4.4kb gzip)
Install the package with npm:
npm i vue3-select-componentUse it in your Vue 3 app:
<script setup lang="ts"> import { ref } from "vue"; import VueSelect from "vue3-select-component"; const option = ref(""); </script> <template> <div class="my-app"> <VueSelect v-model="option" :options="[ { label: 'A Wizard of Earthsea', value: 'wizard_earthsea' }, { label: 'Harry Potter and the Philosopher\'s Stone', value: 'harry_potter', disabled: true }, { label: 'The Lord of the Rings', value: 'the_lord_of_the_rings' }, ]" /> </div> </template>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.
<script setup lang="ts"> 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" }, ]; </script> <template> <VueSelect v-model="selectedUser" :options="userOptions" :get-option-label="(option) => `${option.label} (${option.username})`" placeholder="Pick a user" /> </template>There's an entire documentation page dedicated to usage with TypeScript.
For changelog, visit releases.
MIT Licensed. Copyright (c) Thomas Cazade 2024 - present.