vue-select

vue-select is a lightweight, zero-dependency, and extensible Vue component designed for select, dropdown, and typeahead functionality.

Key features include:

• Tagging and Filtering/Searching
• Single and Multiple option selection
• AJAX and SSR support
• Vuex support
• High accessibility standards
• Customization via slots and SCSS variables
• Small footprint (~20kb total: ~5kb CSS, ~15kb JS)

Vue Select includes the following capabilities:

• Selection Modes: Select single or multiple options.
• Data Handling: Supports Tagging, Filtering/Searching, AJAX, and Vuex.
• Environment Support: Supports Server-Side Rendering (SSR).
• Customization: Highly customizable using slots and SCSS variables.
• Accessibility: Built with high accessibility standards.
• Lightweight: Approximately 20kb total (~5kb CSS / ~15kb JS) and zero dependencies.

To load options from a server or parent component based on user input, listen for the @search event. This event provides two arguments:

1. search (String): The current search string entered by the user.
2. loading (Function): A callback function used to toggle the component's loading state. Call loading(true) to show the loading state and loading(false) when the asynchronous operation is complete.

When using AJAX, it is recommended to disable client-side filtering to prevent the component from filtering the results returned by your server.

To use vue-select with Vue 3, install the beta version. Note that Vue 3 support is currently on the beta channel (vue-select@beta).

After installation, import VueSelect and register it as a component (e.g., v-select) in your main entry file. You must also import the component's CSS separately, as it is not included in the JavaScript bundle.

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

// main.ts or main.js
import { createApp } from "vue";
import App from "./App.vue";

import { VueSelect } from "vue-select";

createApp(App)
    .component("v-select", VueSelect)
    .mount("#app");

<style>
@import "vue-select/dist/vue-select.css";
</style>

When using Vuex for state management, you can synchronize the vue-select component with your store by listening to the input event. This event is emitted whenever the internal value changes (the same event used by v-model). You can use this event to dispatch a Vuex action or trigger a mutation to update your global state.

To implement this, bind the :value prop to your store state and use @input to call your store dispatch or mutation method.

<v-select 
    @input="myAction" 
    :options="$store.state.options"
    :value="$store.state.selected"
  ></v-select>

The dropdown uses a .15s cubic-bezier opacity fade by default, using the VueJS transition name vs__fade. You can modify this in two ways:

1. Using the transition prop: Pass a new transition name to change the animation classes, or pass an empty string to remove the transition entirely.
2. Using CSS: Override the .vs__fade transition classes directly in your stylesheet.

To completely eliminate the transition via CSS, use:

.vs__fade-enter-active, 
.vs__fade-leave-active {
    transition: none;
}

<v-select transition="" />

A collection of interactive examples, including all examples featured in the official documentation, is available on Codepen. This is useful for testing component behavior and visual styles in a live environment.

https://codepen.io/collection/nrkgxV/#

After installing, import the component and its CSS, then register it globally in your Vue instance. Use the name v-select for the component.

import Vue from 'vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';

Vue.component('v-select', vSelect)