n How to use Vue-select in Vue.js | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh


yarn add vue-select

# or use npm

npm install vue-select

Then, import and register the component:

import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);

The component itself does not include any CSS. You'll need to include it separately:

import "vue-select/dist/vue-select.css";

Alternatively, you can import the scss for complete control of the component styles:

@import "vue-select/src/scss/vue-select.scss";


Import Component Vue-select in custom component

We will import the Vue-select as locally.
import vSelect from "vue-select". And then registered the component in property components:{vSelect }

  <div class="root">
     <h3>Learn Vue-select</h3>
import vSelect from "vue-select"
export default {
  data () {
    return {

<style scoped>
    margin: 0 auto;
    max-width: 600px;}



We can add vue-select in our component like this.
<v-select : options ="fruits" ></ v-select > : This how we add Vue-select in our component, there is v-bind or : in this component, options is props we pass to component vue-select. This is the provision of the vue-select library.

Add data locally in our component.

data () {
    return {

We add data fruits and its type as array. In this tutorial , I will add array with the name of the fruit.

After all its done then we can run our program. npm run dev


the output is like this:


How to use Vue-select in Vue.js


Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook