Vue3 Select Component

Vue3-Select-Component

Best-in-class select component for Vue 3, with a focus on DX, accessibility and ease-of-use.

npm package npm package GitHub stars

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, minimal dependencies (17kb gzip) ## Installation 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 ``` ## 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 ``` [There's an entire documentation page](https://vue3-select-component.vercel.app/typescript.html) dedicated to usage with TypeScript. ## Contributing & Development ### Getting Started 1. Clone the repository 2. Install dependencies: `npm install` 3. Start the playground: `npm run dev:playground` 4. Run tests: `npm run test` ### Contributing - ๐ŸŒฟ **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 ### 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](https://github.com/TotomInc/vue3-select-component/releases). ## License MIT Licensed. Copyright (c) Thomas Cazade 2024 - present.