With the help of the potent library Vue Select, developers can produce dynamic and interactive dropdowns in Vue.js apps, improving the user experience. Vue Select enables you to manage diverse data sources, filtering, and customization with ease because of its simple syntax and feature-rich components.
This article will lead us through the necessary steps to get started with Vue Select and show you how to create responsive dropdowns that are customized to the needs of your application.
What is Vue Select
Vue Select stands as a specialized or externally developed element tailored for Vue.js applications.
Vue.js, a renowned JavaScript framework for crafting user interfaces, empowers developers to forge dynamic web applications through a clear, descriptive structure and a modular layout centered around components.
A "Vue Select" component could provide a better and more customizable version of a dropdown list, enabling developers to quickly include new features into their Vue.js applications.
This could be accomplished by using reactive data binding, component lifecycle hooks, and other capabilities of Vue.js to build a highly flexible and interactive dropdown component.
Features of Vue Select
Customization with Slots and SCSS variables:
Vue Select combines the power of Vue.js with the flexibility of slots and SCSS variables, allowing developers to create highly customized and consistent select inputs that merge smoothly with the aesthetics and user experience of their applications.
It's commonly used in Vue.js applications to improve the usability and behavior of dropdown/select components.
Vuex Support:
Vuex is the Vue.js application's official state management library.
It aids in the centralized management of an application's state (data), making it easier to communicate and modify data across multiple components.
Filtering and Searching:
In Vue Select, filtering and searching relates to limiting a list of alternatives depending on user input. Users who interact with the select dropdown can filter and search among the available options by typing into the input box.
Vue Select automatically adjusts the options presented in the dropdown to match the entered text as the user types, resulting in a responsive and intuitive filtering experience.
Tagging:
Tagging in Vue Select is a handy feature that empowers users to enter personalized values directly into the select input.
This becomes especially valuable when you wish to give users the flexibility of selecting from a predefined list of choices, all the while enabling them to introduce new options that might not exist on the original list.
Select Single/Multiple Options:
The provided list gives users the flexibility to pick either one or multiple options.
This is particularly useful when you intend for users to have the capability to pick more than a single item from a set of choices.
Once a user makes a selection, it becomes visible as a labeled tag or token within the Vue Select component.
Setting Up Your Vue Project:
To get started with Vue Select, run the command below;
yarn add vue-select@beta
npm install vue-select@beta
Use the command below to import and register the Vue Select component in the main.js file;
import { createApp } from "vue";
import App from "./App.vue";
import { VueSelect } from "vue-select";
createApp(App).component("v-select", VueSelect).mount("#app");
The component does not come with any CSS, input the code block below to include it.
import "vue-select/dist/vue-select.css";
Now we have successfully integrated Vue Select.
Importing Vue Select into your Vue.js application
Let's take a practical look at how Vue Select functions to gain a clearer understanding. We begin by establishing the collection of choices we intend to show within the dropdown.
For this example, our goal is to create a dropdown that presents several automobile companies for selection. We will use the code block below;
data() {
return {
books: [
{ country: "Lexus" },
{ country: "Fiat" },
{ country: "Mercedes-Benz" },
{ country: "Tesla" },
{ country: "Toyota" },
{ country: "BMW" },
],
},
},
//In the v-select component created, we will pass the array of our automobile companies;
<template>
<div class="container">
<form>
<v-select :options="automobiles" label="automobile"></v-select>
</form>
</div>
</template>
<script>
export default {
data() {
return {
automobiles: [...]//the array of automobile options]
};
},
};
</script>
This code block above represents a Vue.js component that utilizes the Vue Select library to create a dropdown for selecting automobile options.
This Vue component creates a user interface that consists of a form with a dropdown created using Vue Select.
The dropdown displays automobile options based on the data provided in the automobiles array within the component's data section.
The label attribute specifies which property of each option object should be shown as the label in the dropdown.
https://codepen.io/DeeVineWill/embed/LYXoPXg
Customization of the dropdown options
Now let’s make a dropdown list that includes both vehicle names and corresponding images.
We have the capability to modify the default look of the dropdown choices. This is how the procedure works:
<template>
<div class="container">
<form>
<v-select :options="automobiles" label="automobile">
<template #option="option">
<span><img :src="option.image" />{{ option.automobile }}</span>
</template>
</v-select>
</form>
</div>
</template>
<script>
export default {
data() {
return {
automobiles: [
{ automobile: "Tesla",
image: "https://upload.wikimedia.org/wikipedia/commons/e/e8/Tesla_logo.png",
},
{ automobile: "Toyota",
image: "https://www.pngall.com/wp-content/uploads/2016/04/Toyota-Logo-Free-Download-PNG.png",
},
...
],
};
},
};
</script>
This code block above generates a Vue component that renders a customizable dropdown with automobile options using Vue Select.
Each option is represented with an image logo and a label bearing the name of the automobile.
The customization is accomplished by modifying the rendering of individual choices using Vue Select's slot functionality. Below is what it looks like;
https://codepen.io/DeeVineWill/embed/LYXoPXg
Choosing multiple alternatives
Initially, the v-selectcomponent allows us to select only one option from the dropdown menu.
However, it may be customized to accept multiple options by using its multiple Boolean prop, as seen below:
<template>
<div class="container">
<form>
<v-select multiple :options="automobiles" label="automobile">
<template #option="option">
<span><img :src="option.image" />{{ option.automobile }}</span>
</template>
</v-select>
</form>
</div>
</template>
In our code block above, v-select component is used to build a dropdown that allows users to pick several automobiles.
It customizes the design of the choices by showing an image and name for each automobile. The options are drawn from the automobile array.
https://codepen.io/DeeVineWill/embed/LYXoPXg
Unique custom styles
We have the ability to customize the visual style and appearance of the select dropdown to completely match our branding preferences and unique requirements.
<style lang="scss">
.new-styles .vs__search::placeholder,
.new-styles .vs__dropdown-toggle,
.new-styles .vs__dropdown-menu {
background: #dfe5fb;
border: none;
color: #394066;
text-transform: lowercase;
font-variant: small-caps;
}
.new-styles .vs__clear,
.new-styles .vs__open-indicator {
fill: #394066;
}
</style>
This code block defines custom styles for a select dropdown component using SCSS (Sass). It looks for items with the CSS class "new-styles," which will probably be applied to the select dropdown component.
https://codepen.io/DeeVineWill/embed/LYXoPXg
Voila! Our dropdown has a better look.
Summary
In this article, we studied the Vue Select library and how it works.
We learned how to integrate it effortlessly into a Vue.js application and studied the variety of features it provides, as well as the options for customizing its design and behavior to our specifications.