GitHub - TotomInc/vue3-select-component: A flexible & modern select-input control for Vue 3. (original) (raw)
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
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, minimal dependencies (17kb gzip)
Installation
Install the package with npm:
npm i vue3-select-component
::: info The component requires its CSS styles to be imported manually.
import "vue3-select-component/styles";
:::
Use it in your Vue 3 app:
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.
There's an entire documentation page dedicated to usage with TypeScript.
Contributing & Development
Getting Started
- Clone the repository
- Install dependencies:
npm install - Start the playground:
npm run dev:playground - Run tests:
npm run test
Contributing
- ๐ฟ Branching strategy - We use
devfor integration andmasterfor 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
Development documentation
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.
Releases
For changelog, visit releases.
License
MIT Licensed. Copyright (c) Thomas Cazade 2024 - present.