8 VueJS Plugins to Speed Up Your Front End Development
In my previous article, I was written about starting simple API-based Project in laravel framework. After I write about backend technology, let’s talk about front end technology. Since version 5.3, Laravel comes with vue.js bundle. Vue.js is one of the fastest growing libraries javascript framework in the last 2 years. Vue.js has similarity with Laravel, it comes with good and great documentation, so for newbie developer, vue.js is the best solution to learn from scratch. Now, I will tell you about 8 plugins to speed up your front end development and make your front end development great again!
The first important thing before create new project is setup everything you need. Today, CLI has became popular to setup new project. Vue.js doesn’t have artisan like laravel, but you can install additional tool called vue CLI. Vue CLI is simple CLI for scaffolding Vuej.s projects, rather than create json files, it reduces time to setup new project. The plugin can be found here!
2. Dejavue
Debugging is the process of finding and resolving of defects that prevent correct operation of software. Vue.js offers live debugging bundle tool named vue-devtools. But, it doesn’t come with visualization, it just ordinary debug similar to original browser console. Here’s another debug tools (also in chrome extension) named Dejavue. Dejavue is Vue component and state visualization and load time optimizer.
3. Vue-router
Nowdays, Single-Page Applications (SPAs) are quickly becoming standard for web app development. Single page application are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. Creating a Single-page Application in Vue.js is so simple with vue-router. Vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications. With Vue.js + vue-router, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.
4. Axios
You might be familiar with guzzle or jquery ajax to making web requests and handle responses. Vue.js has plugin named vue-resource, it was official plugin from vue to create web requests. But recently, it has been removed from official. Here’s the alternative vue-resource, it is Axios. Axios is promise based HTTP client for the browser and node.js. Axios so popular in node.js and can be used in other javascript framework. You can install via npm package to use it. Here is the official axios page!
5. Vue-Blu
If you are familiar with bootstrap, trying to integrate with vue but you have to install jquery? You should try bulma, Bulma is modern CSS framework based on Flexbox. Em wait! Bulma comes without any javascript library, so you have to integrate manually with vue.js. So, thanks to Vue-Blu who combine bulma and vue.js. Vue-blu is an UI components library base on vue.js and bulma that helps you build your web application easily.
6. Vee-Validate
Never trust user input! Building robust applications that do not trust user input by default, you ensure the application will be able to handle unexpected data gracefully. In the client side validation you can provide a better user experience by responding quickly at the browser level. When you perform a client side validation, all the user inputs validated in the user’s browser itself. Vue.js doesn’t come with validation bundle, so you have to install additional plugin. Vee-validate is a lightweight plugin for vue.js that allows you to validate input fields, and display errors. This plugin can be found here!
7. Vuex
Is vue.js able to handle large application? Yes, vue.js offers an official plugin called vuex, if you want to build a large application with highly maintain you can use it. Vuex is a state management pattern and library for vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. In short, vuex is useful to separate process with component, so it can be easier to handle.
8. Karma-Mocha
Testing is the important things to ensure your code work perfectly. Karma is recommended to test javascript project. It’s simple tool that allows you to execute JavaScript code in multiple real browsers. Karma makes test-driven development easy, fast, and fun. Besides Karma, there’s mocha. Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Thanks to karma-runner who has created integration between karma and mocha. It’s very useful plugin to test your project. Here is the plugin official pages!
