8 Vue.js UI Component for 2019
Tags: javascripttips, vue, vuejs2
Published: 2019-01-22 08:11:16

---
title: 8 Vue.js UI Component for 2019
published: true
tags: javascript-tips,vue,vuejs-2,vuejs
canonical_url: https://medium.com/swlh/8-vue-js-ui-component-for-2019-79fc43d6da79
---

![](https://cdn-images-1.medium.com/max/1024/1*a5ccv_LxuMu6fvHOlcbZNw.png)

#### Feature Vue Course

[Learn Vue.js from Scratch: Building & Testing a Movie App](https://www.educative.io/collection/5024793980043264/5629499534213120?affiliate_id=5312887308419072)

Vue.js is quickly becoming a fan favorite for developers when it comes to web app development. This modern, fresh JavaScript library It has over 123,000 stars on GitHub, a compelling option for developers as it is so easy to integrate into an existing project. It’s fast. It’s extremely powerful. And you can build a dynamic, scalable, and maintainable Single-Page Application from scratch with it.

As a JavaScript framework, Vue.js allows you to easily render dynamic data to the DOM, bind data to DOM elements, and manage/maintain your app’s state (local storage) without a user having to reload the browser. It’s preferred because it’s lightweight, modular, and requires minimal configuration. It’s also extremely fast and has a low file size. Developers can easily drop it into any project or existing framework.

With Vue.js slowly becoming the framework of choice for more developers, here are 8 UI components to watch and hopefully integrate into your projects in 2019. At the end of each component, I’ve added a link to the components GitHub repository account in case you want to contribute.

### [Sweet Modal](https://sweet-modal-vue.adepto.as/)

![](https://cdn-images-1.medium.com/max/1024/0*5Wj4s3jX8ECXopjq.gif)

Modals are a great way to add something different to the user experience of your web app. Sweet Modal gives you so many great modals to pick from, many sure to set your web app apart. They can be used for collecting data through a form or just passing an alert, every project needs a nice modal. With over 500 stars on GitHub, it’s definitely one to watch.

GitHub: [https://github.com/adeptoas/sweet-modal-vue](https://github.com/adeptoas/sweet-modal-vue)

### [Vue Scrollama](https://vue-scrollama.now.sh/#/basic)

![](https://cdn-images-1.medium.com/max/1024/0*cHnKa8BGVYehFVF6.gif)

![](https://cdn-images-1.medium.com/max/1024/0*AjE-IysqbZOvNcgQ.gif)

Vue Scrollama is a component that lets you easily make scroll-driven interactions on your web pages to give the user a story like experience. With this component, the visuals say it all. It’s also very customizable and will make for some amazing web apps.

GitHub: [https://github.com/shenoy/vue-scrollama](https://github.com/shenoy/vue-scrollama)

### [Vue-parallax](https://apertureless.github.io/vue-parallax/)

![](https://cdn-images-1.medium.com/max/1024/1*DA2vh6MqUfGQbWoxdKFIqw.gif)

A parallax is a great way to add spunk and uniqueness to your web app, Vue-parallax lets you implement one on your Vue project with ease and it’s fully customizable. With over 300 stars on GitHub, this component has regular maintenance and a budding community growing behind it.

GitHub: [https://github.com/apertureless/vue-parallax](https://github.com/apertureless/vue-parallax)

### [Vue-typer](https://cngu.github.io/vue-typer/)

![](https://cdn-images-1.medium.com/max/1024/0*pfsc7zkUDu3g8YBe.gif)

There’s something special about the typewriter effect, it engages users and like most great UI components engages the user creating a better experience. Not forgetting, the component is very customizable and has many options to change the font type, size, typing speed, and many other things to make your web app perfect?

GitHub: [https://github.com/cngu/vue-typer](https://github.com/cngu/vue-typer)

### [Vue-slider](http://vue-slider.surge.sh/)

![](https://cdn-images-1.medium.com/max/1024/0*TYYXWPi4A-id3tAC.gif)

Pictures captivate users and sliders are a great way to display them. Vue-slider gives us a very modern responsive “Netflix” style slider that is sure to make your web app stand out.

GitHub: [https://github.com/fanyeh/vue-slider](https://github.com/fanyeh/vue-slider)

### [Vue.js Popover](http://vue-js-dropdown.yev.io/)

![](https://cdn-images-1.medium.com/max/1024/0*lVeqE4leaOIWQCbh.gif)

Popups and tooltips — important but very underappreciated UI components. These are great ways to display information to the user without distracting them from the main content you want to present to them. Vue.js popover lets us add creative and animated tooltips and pop-ups to different elements of the web app.

GitHub: [https://github.com/euvl/vue-js-popover](https://github.com/euvl/vue-js-popover)

### [Vue-bar](https://deviavir.github.io/vue-bar/)

![](https://cdn-images-1.medium.com/max/1024/0*Oo5naO747hMoEX_4.png)

When it comes to data, presentation matters. Creating customizable, modern, elegant and attractive bars to represent data in your web app just got much easier with Vue-bar.

GitHub: [https://github.com/DeviaVir/vue-bar](https://github.com/DeviaVir/vue-bar)

### [Vue Infinite Slide Bar](https://biigpongsatorn.github.io/#/vue-infinite-slide-bar)

![](https://cdn-images-1.medium.com/max/1024/0*ZLZEJlJBebdQ8LOs.gif)

A very niche UI component, Infinite Slide Bar lets you display what would usually be boring normal information to users in a fresh new way.

GitHub: [https://github.com/biigpongsatorn/vue-infinite-slide-bar](https://github.com/biigpongsatorn/vue-infinite-slide-bar)

### Honorable Mentions

Some UI components couldn’t make the list but definitely deserve the spotlight.

- [Vue Dark Mode](https://www.vuedarkmode.com/)

This group/ collection of various UI components adds a dark theme to your Vue projects with icons and elements in colors to compliment them. Great for adding a dark mode to your web app or simply mixing it up with the design.

And that’s it, 8 amazing UI components for Vue.js you could implement in your projects right now. What are you waiting for?

[![](https://cdn-images-1.medium.com/max/1024/1*YqDjlKFwScoQYQ62DWEdig.png)](https://medium.com/swlh)

#### This story is published in [The Startup](https://medium.com/swlh), Medium’s largest entrepreneurship publication followed by +406,714 people.

#### Subscribe to receive [our top stories here](http://growthsupply.com/the-startup-newsletter/).

[![](https://cdn-images-1.medium.com/max/1024/1*ouK9XR4xuNWtCes-TIUNAw.png)](https://medium.com/swlh)

* * *