A flexible & modern select-input control for Vue 3.
npm install 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 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, minimal dependencies (17kb gzip)
Install the package with npm:
``bash`
npm i vue3-select-component
::: info
The component requires its CSS styles to be imported manually.
`javascript`
import "vue3-select-component/styles";
:::
Use it in your Vue 3 app:
`vue
: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' },
]"
/>
`
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
:options="userOptions"
:get-option-label="(option) => ${option.label} (${option.username})"
placeholder="Pick a user"
/>
`
There's an entire documentation page dedicated to usage with TypeScript.
1. Clone the repository
2. Install dependencies: npm installnpm run dev:playground
3. Start the playground: npm run test
4. Run tests:
- ๐ฟ Branching strategy - We use dev for integration and master for releases
- ๐ Release process - How to create prereleases and stable releases
- ๐ Commit conventions - We follow conventional commits
- ๐งช Testing requirements - All PRs need tests and type safety
- ๐ Documentation - How to add examples and update docs
The dev branch documentation can be found at:
https://dev-vue3-select-component.vercel.app/
This documentation is automatically generated from the dev` branch and is updated with each commit.
Note: it doesn't reflect the latest stable release.
For changelog, visit releases.
MIT Licensed. Copyright (c) Thomas Cazade 2024 - present.