Convert jQuery plugin into Vue.js component – Part 1

jQuery has been around us for over 13 years now and it has been used by every single web developers. It is a fast, light weight and feature rich JavaScript library. So far being in the market,  it has a collection of so much of nice and rich libraries that every developers are familiar with. Here we today going to see how we can convert one of the favorite jQuery plugin into Vue Component.

For this purpose, I am choosing one jQuery plugin I used around some of my project.


jQuery typeahead by Twitter

Inspired by twitter.com‘s autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

for more: https://github.com/twitter/typeahead.js

Downloading the libraries

First let us experience the typeahead in the official example page. Open the URL http://twitter.github.io/typeahead.js/examples/. Just play around with the control and see how it works with various type of setup in the example page4

It is time to download the required libraries and plugin to move forward,

jQuery typeahead plugin

Download the latest jQuery typeahead.js plugin from https://github.com/twitter/typeahead.js

jQuery

We will add jQuery from the CDN for simplicity

Vue.js

Download the Vue from https://vuejs.org/v2/guide/installation.html. As of the guide, the version of Vue 2.6.10 is the latest.

  • Download the Production version

Creating a basic HTML page

Below is the initial HTML page “vue-typeahead.html”. This contains the basic building blocks of the page, Vue intialization and the required libraries are added to it.

Initializing the new Vue component

Let us modify the  <script>  block as seen below

 

Here we have defined a Vue.js component named ‘enz-typeahead’. We have moved the input box with classname “typeahead” from the above html into the vue component’s template. Now replace the input box from the main html page as below.

Before

Now

Go to the browser and open the “vue-typeahead.html” to see what has been done so far.

This would open up the page with the input that is from the Vue component we just created. No any binding has been added so far. Therefore only the input with the placeholder is visible now.

Activating the typeahead via Vue component

Let’s construct the basic functionality with some pre defined data. Update the component as follow.

 

Add some CSS to flavor the component. Right now just add the styles in the main page, we will see how to keep the styles internal to the component at the end of the lessons.

 

Go to the browser and open the “vue-typeahead.html” to see what has been done so far.

This is fantastic. We have converted the jQuery plugin into a Vue component. We have the basic component now. We will improve the component in part 2.

What we are going to cover next?

  • How to pass data into the components?
  • Emitting a value with an event
  • Data binding with v-model on the components

Download the work

Download the completed work above from this link below. We will use the same content to proceed the next part.

Download link: typeahead-vue-component-encodez-com.zip

Link to Part 2

jQuery plugin into Vue component – Part 2

 

2 thoughts on “Convert jQuery plugin into Vue.js component – Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *


*

Please wrap all source codes with [code][/code] tags.

This site uses Akismet to reduce spam. Learn how your comment data is processed.