Recreating Bootstrap components in VueJS and Vanilla JavaScript (forget about jQuery) #1

So… I decided to start a medium series, I enjoy writing articles on Medium, so why not…!

In this article I want to recreate a basic example of the drop down component that you can find on bootstrap. http://getbootstrap.com/javascript/#dropdowns

The idea is that you don’t need to fetch jQuery (82KB) if you don’t use it heavily in your applications. 82KB is a lot. Don’t forget that a lot of people surf on the internet with their mobile phones, jQuery will just waste their data.

Thus, why not create the Bootstrap components, in vanilla JavaScript with a bit of Vue JS behind it :D.

Don’t forget that front-end libraries such as React and Vue JS and front-end frameworks such as Angular are a must to learn in 2017.

You will be shocked when you see how simple is to create a dropdown in Vue JS.

Don’t forget to follow me on Social Media to get updates for new articles.

Twitter
https://twitter.com/devlob

Facebook:
https://www.facebook.com/hysarenato
https://www.facebook.com/devlob/

Instagram:
https://www.instagram.com/renato.hysa/

And my YouTube channel currently sitting at 14.000 subscribers!
https://www.youtube.com/channel/UCciGAxHS9o54cNxkRKb7Nfg

Let’s get started!

I will do everything on JSFiddle and you can move that code to your .vue files if you want.

Remember, that you should have knowledge of Vue JS and JavaScript.

This is the working example

https://jsfiddle.net/hysarenato/rdjjpc7a/4653/

Let’s start with the HTML first.

<div id=”app”>
<a href=”#!” @click=”dropMeDown”>
Drop me down
</a>
 <ul class=”custom-dd” v-if=”visible”>
<li>PHP</li>
<li>Python</li>
<li>JS</li>
</ul>
</div>

If you know Vue JS or React, then you know that everything should be inside a parent element. Here our element is the div with ID ‘app’.

We have an anchor tag and on click we are calling the ‘dropMeDown’ method, which we will declare in a second in Vue JS.

Then we have a ul element. We want to display that ‘ul’ only if ‘visible’ is true.

The Vue JS code

new Vue({
el: ‘#app’,

data: {
visible: false
},
 methods: {
dropMeDown () {
this.visible = !this.visible
},
}
})

The Vue JS code is really simple.

Vue JS is binded to our parent div with ID ‘app’.

Then in the data we have ‘visible’ set to false. It is initially false, because we want the user to click on the anchor tag in order to display the dropdown.

Our method is pretty simple, we toggle the value of ‘visible’.

If it is true it will become false, if it is false it will become true.

THAT’S ALL!

Do you really need jQuery for that?

Developers end up using jQuery a lot, but we are in 2017 and the trend now is to use a front-end library and 100% vanilla JavaScript.

This is the purpose of this article. Understand that you can do everything in vanilla JavaScript, no need for jQuery.

I will create more articles like this one and hopefully you get rid of jQuery from now on and you depend more and more on vanilla JavaScript.

Take a look at these websites to get a better idea.

https://gist.github.com/liamcurry/2597326

Let’s add some CSS

This is really not necessary, as we focus more on the JavaScript side here, but to make it look better, I have added some CSS.

Again, you can find the working example here.

https://jsfiddle.net/hysarenato/rdjjpc7a/4653/

Twitter
https://twitter.com/devlob

Facebook:
https://www.facebook.com/hysarenato
https://www.facebook.com/devlob/

Instagram:
https://www.instagram.com/renato.hysa/

And my YouTube channel currently sitting at 14.000 subscribers!
https://www.youtube.com/channel/UCciGAxHS9o54cNxkRKb7Nfg