How to Implement Vue-select in Our Project

image-source
This time I will share tutorial how to use select in vue.js by using vue-select. In a web application of course we often use a lot of data. and with vue-select we can display the data like select box but more elegant and practical for the user.

What Will I Learn?

• Install Package with Npm
• How to Implement Vue-select

Requirements

• Install Nodejs
• Install Vue Cli
• Basic Javascript es6 & basic Vue

Difficulty

• Basic

Install Package with Npm

Before we start installing the vue-select package, make sure you have installed nodejs , so you can use Npm. to check its version npm -v

and now you can install the vue-select. Open your folder that has installed vue-cli. open command prompt . and then you can install .
npm install sagalbot/vue-select --save, for notes. i added --save: it's means you want to save in your package.json

How to Implement Vue-select

Create Component

The first step has been to create a simple component to make an example. The name of the component is select.vue

<template>
  <div class="root">
     <h3>Learn Vue-select</h3>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
}
</script>
(html comment removed:  Add "scoped" attribute to limit CSS to this component only )
<style scoped>
.root{
    margin: 0 auto;
    max-width: 600px;}
</style>

Import Component Vue-select

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

<template>
  <div class="root">
     <h3>Learn Vue-select</h3>
  </div>
</template>
<script>
import vSelect from "vue-select"
export default {
  data () {
    return {
    }
  },
  components:{
    vSelect
  }
}
</script>
(html comment removed:  Add "scoped" attribute to limit CSS to this component only )
<style scoped>
.root{
    margin: 0 auto;
    max-width: 600px;}
</style>

Use Vue In Our Template

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 {
      fruits:["Mangoo","Apple","Orange","Melon","Pineapple","Lecy","Blueberry"]
    }
  },

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

And finally we successfully apply vue-select in our component. there are some other options please check in vue-select documentation https://sagalbot.github.io/vue-select/. So much of me, hopefully this tutorial can help you. thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---