Getting started with Vue Select
Tags: vue, webdev
Published: 2023-05-24 13:45:25

**Written by [Nefe James](https://blog.logrocket.com/author/nefejames/)✏️**

[Forms](https://blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-2/) are an integral part of the web and a key interface that people use to input data for different purposes like reporting issues, contacting businesses, or making payments online. Select forms are one type of form component we see online. We can use them to display a dropdown list of options that users can choose from. The select element is a great way to provide multiple options to users while preserving the space on a page. 

In this article, we will explore [Vue Select](https://github.com/sagalbot/vue-select), a select component library built for [Vue.js applications](https://blog.logrocket.com/tag/vue/). We will learn what it is, its features, how it works, and how to integrate it into a Vue.js application. 

_Jump ahead:_

*   [What is Vue Select?](#what-vue-select)
    *   [Features of Vue Select](#features-vue-select)
*   [Getting started with Vue Select](#getting-started-with-vue-select)
*   [Using Vue Select in a Vue.js application ](#using-vue-select-vue-js-application)
    *   [Customizing the appearance of the dropdown options](#customizing-appearance-dropdown-options)
    *   [Selecting multiple options](#selecting-multiple-options)
    *   [Applying custom styles](#applying-custom-styles)

## What is Vue Select? <a name="what-vue-select">

[Vue Select](https://vue-select.org/) is a feature-packed select dropdown component built for Vue.js applications. It is designed with accessibility and developer experience in mind, allowing us to add customizations to fit our unique use cases and needs. Vue Select is a supercharged and extensible select component with the functionalities that Vue.js provides. 

It is a very lightweight library, weighing 20kB in total, with 5kB coming from the [CSS](https://blog.logrocket.com/tag/css/) files and 15kB from the [JavaScript](https://blog.logrocket.com/tag/vanilla-javascript/) files. It also has zero dependencies, which makes it a great select library to use in cases where we are concerned about the speed and performance of applications.

### Features of Vue Select <a name="features-vue-select">

Vue Select is packed with the following great features and functionalities, such as:

*   Filtering/searching: Vue Select’s search functionality allows us to filter through the list of dropdown options. This is a helpful feature that gives users a more pleasant experience
*   Pagination: Instead of users having to scroll through dropdown with a long list of options, we can use Vue Select to paginate the options
*   Supports AJAX: We can perform data fetches on the select component to dynamically load the dropdown options and render them on the component
*   Supports server-side rendering: It is compatible with [server-side rendering](https://blog.logrocket.com/server-side-rendering-with-vue-and-nuxt-js-64a6d99f5a82/) and client-side rendering
*   Select single or multiple options: Depending on our use cases, we can configure Vue Select to allow users to choose one or more options from the dropdown
*   Customizable with slots and [SCSS variables](https://blog.logrocket.com/scss-vs-styled-components-advantages-caveats/): We can customize the appearance and behavior of the select component

## Getting started with Vue Select <a name="getting-started-with-vue-select">

To get started with Vue Select, let’s create a new application. Run the command below:

```bash
npm init vue@latest 
```

The command triggers the Vue CLI, which we use to configure the application to fit our needs. As shown below: ![Vue Select CLI Example](http://blog.logrocket.com/wp-content/uploads/2023/05/vue-select-cli.png) Run the commands below in sequence to install the dependencies and initiate the dev server:

```bash
cd <project-name>
npm install
npm run dev
```

Then, run the command below to install Vue Select:

```bash
# for Vue 3
npm install vue-select
yarn add vue-select@beta

# for Vue 2
yarn add vue-select
```

Now, register Vue Select and import the CSS style sheet in the `main.js` file, as shown below:

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";

const app = createApp(App);
app.component("v-select", vSelect);
app.mount("#app");
```

With that, we have successfully integrated Vue Select.

## Using Vue Select in a Vue.js application <a name="using-vue-select-vue-js-application">

Let’s see how Vue Select works in practice to understand it better. We start by defining the list of options we want to display in the dropdown. In this scenario, we want to render a dropdown with some countries to choose from. Use the code below:

```javascript
data() {
  return {
    books: [
      { country: "Spain" },
      { country: "France" },
      { country: "Ghana" },
      { country: "Nigeria" },
      { country: "Brazil" },
      { country: "Ecuador" },
    ],
  };
},
```

Next, we take the array of `countries` and pass it into the `v-select` component we registered earlier, like so:

```javascript
<template>
  <div class="container">
    <form>
      <v-select :options="countries" label="country"></v-select>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countries: [...]//the array of countries]
    };
  },
};
</script>
```

The `v-select` component has an `options` prop through, and we pass the `countries` we want to render in the dropdown to this prop. Note that the value of `v-select`'s `label` prop and the property name for each `country` object must match for the dropdown to work properly. 

That is, if the label's value is `"country"`, then the name of the object we want to display on the dropdown must also be `"country"`. With that, we have a dropdown of countries to choose from, as shown below:

See the Pen [Countries without images](https://codepen.io/nefejames/pen/jOeEMGY) by Emadamerho Nefe ([@nefejames](https://codepen.io/nefejames)) on [CodePen](https://codepen.io).

![Vue Select Countries Dropdown GIF](http://blog.logrocket.com/wp-content/uploads/2023/05/vue-select-countries-dropdown.gif)

### Customizing the appearance of the dropdown options <a name="customizing-appearance-dropdown-options">

Say we want the dropdown list to contain the names and images of the countries. We can change the default appearance of the dropdown options. Here’s how that works:

```javascript
<template>
  <div class="container">
    <form>
      <v-select :options="countries" label="country">
        <template #option="option">
          <span><img :src="option.image" />{{ option.country }}</span>
        </template>
      </v-select>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      countries: [
        { country: "Spain",
          image: "https://flagsworld.org/img/cflags/spain-flag.png",
        },
        { country: "France",
          image: "https://flagsworld.org/img/cflags/France-flag.png",
        },
        ...
      ],
    };
  },
};
</script>
```

We made some changes to the previous code to render the country’s image and name in the dropdown. We updated the `v-select` component and added some children components to it. We used the `#option`, which is a shorthand for `v-slot`, to access the country’s name and image. Then we pass the name and image to the `span` and `img` elements for rendering. Here’s what that looks like:

See the Pen [Countries with images](https://codepen.io/nefejames/pen/JjmoRJq) by Emadamerho Nefe ([@nefejames](https://codepen.io/nefejames)) on [CodePen](https://codepen.io).

![Vue Select Custom Options](http://blog.logrocket.com/wp-content/uploads/2023/05/vue-select-custom-options.png)

### Selecting multiple options

The `v-select` component only allows us to choose one option from the dropdown by default. However, we can configure it to support multiple values via its `multiple` Boolean prop, like so:

```javascript
<template>
  <div class="container">
    <form>
      <v-select multiple :options="countries" label="country">
        <template #option="option">
          <span><img :src="option.image" />{{ option.country }}</span>
        </template>
      </v-select>
    </form>
  </div>
</template>
```

Vue Select automatically converts the `multiple options` to tags for us. Also, we can see from the GIF below that it ensures no one can select the same option twice, meaning we don’t have to handle that ourselves.

See the Pen [Multiple Options](https://codepen.io/nefejames/pen/qBJEape) by Emadamerho Nefe ([@nefejames](https://codepen.io/nefejames)) on [CodePen](https://codepen.io).

![Vue Select Countries and Images Dropdown GIF](http://blog.logrocket.com/wp-content/uploads/2023/05/vue-select-countries-images-dropdown.gif)

### Applying custom styles

We can customize the styling and appearance of the select dropdown to fit our branding needs and requirements.

```javascript
<template>
  <div class="container">
    <form>
      <v-select
        class="new-styles"
        placeholder="Choose some countries"
        multiple
        :options="countries"
        label="country"
      >
        <template #option="option">
          <span><img :src="option.image" />{{ option.country }}</span>
        </template>
      </v-select>
    </form>
  </div>
</template>

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

`v-select` provides some classes that start with the `vs__` prefix. Here, we target those classes and change their styles using the `new-styles` class we added. We also added a placeholder text to the dropdown through the `placeholder` prop.

See the Pen [Custom styles](https://codepen.io/nefejames/pen/MWPYjQq) by Emadamerho Nefe ([@nefejames](https://codepen.io/nefejames)) on [CodePen](https://codepen.io).

With that, the dropdown has a new look. ![Vue Select Dropdown Final GIF](http://blog.logrocket.com/wp-content/uploads/2023/05/vue-select-dropdown-final.gif)

## Conclusion

In this article, we explored the Vue Select library and how it worked. We learned how to integrate it into a Vue.js application and looked into its features and available customizations.

---

##Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, [try LogRocket](https://lp.logrocket.com/blg/vue-signup).

[![LogRocket Signup](https://files.readme.io/00591d0-687474703a2f2f692e696d6775722e636f6d2f6a3049327856572e706e67.png)](https://lp.logrocket.com/blg/vue-signup)

[LogRocket](https://lp.logrocket.com/blg/vue-signup) is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - [Start monitoring for free](https://lp.logrocket.com/blg/vue-signup).