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)

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 dedicated to usage with TypeScript.

Contributing & Development

$3

1. Clone the repository
2. Install dependencies: npm install
3. Start the playground: npm run dev:playground
4. Run tests: npm run test

$3

- 🌿 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

$3

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.