Simplifying Your Workflow with Vue Development Tools
As you begin to use any framework more, you’ll want some tools that help you streamline your workflow. This is true of Vue as well, so I’ll introduce you to a couple of tools today that will do just that.
Vue-CLI is a command line tool that is designed to help you jumpstart your Vue applications by bootstrapping a base application. This is similar to using Angular’s CLI tool, Yeoman, or other such tools, but it is more like create-react-app in that it doesn’t generate individual parts (e.g. components) for you after the app is bootstrapped; it only sets up the original application for you.
This is sensible because once you have the base application built, pretty much the only thing you make from then on is components. Those are flexible enough to be built in numerous ways and with numerous languages, so it might be better to simply create a shortcut in your editor to create one the way you like it.
Vue-CLI comes with several templates that you can use to build your base application:
- webpack – A full-featured Webpack + vue-loader setup with hot reload, linting, testing & CSS extraction.
- webpack-simple – A simple Webpack + vue-loader setup for quick prototyping.
- browserify – A full-featured Browserify + vueify setup with hot reload, linting & unit testing.
- browserify-simple – A simple Browserify + vueify setup for quick prototyping.
- pwa – PWA template for vue-cli based on the webpack template.
- simple – The simplest possible Vue setup in a single HTML file.
And that’s just the official templates, which do pretty much everything you’ll need without much, if any, customization on your part. If that’s not good enough for you, you can create custom templates, which I won’t get into here. As you can see, though, depending on the template you choose, Vue-CLI not only helps with getting started more quickly, it also installs other tools that help with your productivity long after you’ve begun building the application (e.g. hot reloading with webpack).
To use Vue-CLI, install it via npm (or Yarn if that’s your thing):
npm install -g vue-cli
Then, once it’s installed, you run
vue init to build out a new application:
vue init <template-name> <project-name>
<template-name> with the name of one of the templates I listed above, with the
username/repo of the GitHub project that houses your custom template, or with the absolute path to a template stored locally on your machine. The
<project-name> will become the name of the folder that Vue-CLI creates and stores the new application in.
After that, depending on the template, it’ll ask you a bunch of questions, such as whether or not you’ll use ES Lint or use Karma/Jasmine for testing. That way it can eliminate pieces you won’t use and just give you the things you want and need for your application.
Personally, it took me over a week to build up my webpack configuration the way I wanted it to be. Once I learned about Vue-CLI, it only took a few minutes to get up and running from then on out.
So now you have your application built up a little bit, but you need some help debugging it. The Vue devtools have you covered there. It’s a plugin for Chrome devtools, Firefox, or Safari (you’ll need a workaround to get it to work with Safari). It contains 3 tabs that give you a few different ways to look at and debug your applications.
The first tab is a component tree. It looks very similar to the “Elements” tab in the Chrome debugger except instead of showing all the DOM elements, it just shows the Vue components. Also, when you click on one, you’ll see all the current state of all the props, data, and computed properties for that component.
The second tab shows the current state of all the data—including getters—inside your Vuex store. In the left half of this tab’s pane, you’ll see a history of changes to that data. Any time a mutation is called, an entry will be added here. You can “time travel” to temporarily undo changes to the state and see what the app looked like at that point. You can also use the “Revert” buttons to permanently undo mutations or use the “Commit” button to make that snapshot the “base” one. That means you cannot time travel further back than that snapshot.
Finally, we come to the third tab. This is the events tab where you’ll see a list of every time an event was fired from a Vue component. You can click on the event to see the component that fired it, the type of event it was, and its payload.
Each of these tabs has proved their worth to me at least once while debugging or experimenting with my applications. It shows you everything you from the context you are working in most of the time (Vue components and Vuex stores), which is a lot easier than trying to figure it out from the lower-level debugging tools built into the browser. Of course, those browser tools still serve their purpose and you’ll still spend plenty of time using them, but Vue-specific debugging can be made much simpler with the Vue devtools in many instances.
These two tools have made my life using Vue much simpler and I’m very grateful for their existence. Hopefully, they can be helpful to you as well.