Package Exports

vue3-select-component
vue3-select-component/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-select-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 <slot>s
🪄 <Teleport /> menu where you want
📦 Extremely light, 0 dependencies (4.4kb gzip)

Installation

Install the package with npm:

npm i vue3-select-component

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

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.

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

Releases

For changelog, visit releases.