This article will guide you on how to create and use a reusable Vue js Autocomplete example in your Vue.js apps.
Nowadays, autocomplete is a necessary ingredient for any modern web application.
Also, it’s very crucial to choose a UI friendly autocomplete and create it as a reusable component that will help us to use it anywhere throughout the Vue.js app by putting a few lines of code.
So, let’s get started to create a simple Vue js autocomplete example.
Related: How to Install and Setup Vue.js App
Install Vue.js App
Note: You can skip this step, if you already have app installed and ready.
First of all, create a simple Vue.js app.
[js]
vue init webpack vue-js-autocomplete
[/js]
Next, let’s go to the project and install the dependencies.
[js]
cd vue-js-autocomplete
npm install
[/js]
Now, you’re ready to use the app.
Setup Vue js Autocomplete Example
Firstly, let’s install the Vue.js autocomplete in our app.
[js]
npm install vue2-autocomplete-js
[/js]
After installation, we should import the Autocomplete component and necessary CSS in our main.js file.
[js]
import Autocomplete from ‘vue2-autocomplete-js’
require(‘vue2-autocomplete-js/dist/style/vue2-autocomplete.css’)
[/js]
Now, let’s enable the use of autocomplete globally.
[js]
Vue.component(‘autocomplete’, Autocomplete);
[/js]
Finally, we just need to use autocomplete HTML element in our template file to go and use the autocomplete.
Note: I’ve use the static URL that provides the dummy JSON data. You can use data according to your need, just make sure that you provide the valid anchor and label.
[html]
[/html]
Now, you just need to run your app by using following command.
[js]
npm run dev
[/js]
And you can open your app at https://www.thetechieshouse.com:8080
That’s it! It’s simple and reusable component as a Vue js autocomplete example.
Moreover, you can find the full code as below.
[codegroup]
[js tab=”main.js”]
//Import Vue
import Vue from ‘vue’
//Import app component
import App from ‘./App’
//Import router
import router from ‘./router’
//Import autocomplete
import Autocomplete from ‘vue2-autocomplete-js’
//Import CSS
require(‘vue2-autocomplete-js/dist/style/vue2-autocomplete.css’)
//Global call for autocomplete
Vue.component(‘autocomplete’, Autocomplete);
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
template: ‘
components: { App }
})
[/js]
[html tab=”app.vue”]
{{ resultContent }}
[/html]
[html tab=”index.html”]
[/html]
[/codegroup]
Note: I’ve coded autocomplete in App component but you can just use autocomplete in your any component throughout the app.
Furthermore, If you’re looking to use more options with your autocomplete, you can visit the vue2-autocomplete Github Repository.
Suggested:
