5 useful development tools for Vue.js

In 2014, Vue.js emerged to compete in a space primarily dominated by Angular and React. Fast-forward to 2018, and Vue had garnered more stars on Github than the latter. Although star count doesn’t imply usage, it somewhat signifies interest, which, in Vue’s case, is quite reasonable, considering its power yet relative simplicity.

While Vue is undoubtedly a joy to work with, it’s sometimes necessary for developers to deploy certain additional tools to help get them up to speed with the framework and efficiently build applications with it. This article unveils five tools to do just that.

1. Vue CLI

The Vue Command Line Interface (CLI) is the standard tooling for scaffolding Vue applications. As a scaffolding tool, Vue CLI prevents you from spending an inordinate amount of time assembling — from the ground up — various pieces of your app’s dependencies and in creating a structure for your project.

Objectively speaking, Vue CLI puts you in the driver’s seat while deciding what you want your app to be composed of.

vue create is the command that sets you up with the process of scaffolding your Vue app. At the outset, you are offered the option of picking a preset:

Presets are provided with the assumption that you might want to get your app up and running as quickly as possible without getting bogged down with too many details.

The js preset installs a vue-router (for creating single-page applications), vuex (a state management pattern and library for Vue), dart-sass (the primary implementation of sass, a CSS preprocessor), babel (for compiling ES6 code for compatibility on old browsers), and eslint (a JavaScript linter).

You can, however, choose to go with default, which provides only two of the above components, or Manually select features, which will provide alternatives to each component.

If you prefer working in a GUI to working on the terminal, then you’re in luck: Vue CLI 3 comes with a GUI, making it even easier to scaffold and manage your applications. Inputting vue ui in a terminal will spoil you with the below awesomeness.

Make no mistake about it: Vue CLI 3’s GUI doesn’t come with any special capabilities that are unavailable on the terminal; it only makes life simpler by making such capabilities more easily accessible.

2. Vue.js devtools

As developers — and, more importantly, humans — we are fallible and thus require ways to track errors or anomalies in our application. When it comes to Vue apps, Vue.js devtools has proven to be the standard for doing so.

A debugging tool, Vue devtools comes as an extension on a number of browsers, which allows you to easily debug Vue code by simply accessing the web page that harbors it.

After installing the Vue devtools extension on your browser, you’ll find a Vue icon beside your search bar, which indicates the availability (or absence) of Vue code on a given web page. The icon lightens up or fades to signify this.

To make your Vue code debuggable with Vue devtools, you must grant the latter express permission from your code, using Vue.config.devtools = true. When done, a Vue tab on your browser developer menu will be unveiled.

Basically, Vue devtools strips down your Vue application into its core essentialities to give you insight into what’s going on at each step of the way. You’ll be able to view your enabled Vue components and the data (and their state) in them; the states defined in your Vuex store and the mutations triggered; the performance of your app; and other things.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

3. webpack

When building a trivial Vue app with few pages, you just might be fine with the basic setup/process of writing Vue code within JS scripts in HTML files. But when you take things up a notch and you’re ready to create components that need to be reused on at least two pages, that basic setup becomes painful.

The temptation to reuse components as in the above illustration is what single-file components (SFCs) aims to satisfy.

Take note: running vue create actually provides for SFCs since you’ll be able to work with .vue files.

In the above image, we have a HelloWorld.vue component used in the App.vue component, which is in turn declared for rendering by main.js. It looks something like this:

import Vue from 'vue'
import App from '/App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

The main.js contains pure Vue code that is supposed to render Vue components on our web page. However, there is no way a browser can realize the needed components from this code. This is where webpack comes in handy.

Make no mistake about it: webpack alone isn’t a silver bullet for making single-page applications feasible. A typical webpack template for Vue comes with dependencies like Babel, vue-loader, and vue-template-compiler for compiling Vue code into JavaScript; css-loader, and vue-style-loader for manipulating styles declared in .vue files; and other components.

What webpack does is to assemble all of these into one piece, create a dependency graph, and then provide an output JS file that comprises all the compiled code we need.

So let’s say that rather than scaffolding our Vue app with vue create , we go with a webpack template, using vue init webpack-simple .

We’ll get additional files, including a webpack.config.js to house our configuration and a build.js in a dist folder, which is the output file derived from the webpack build. Enabling the process for getting this output file is what makes webpack super useful in Vue development.

4. Nuxt.js

To understand Nuxt.js, we must first realize the need for it. First off, Nuxt is a giant leap towards achieving server-side rendering (SSR) on Vue apps. To understand why SSR is a concern, let’s briefly touch on why Client Side Rendering is not always desirable.

Using client-side rendering, we (both developers and users) are at the mercy of the client (our browser) to fetch, initially manipulate, and render data. Thus, there is always a lag between a page’s load time and the time needed to fetch and display necessary data.

Besides this process being detrimental to user experience — especially for slow connections — it is also unfavorable for SEO since crawlers aren’t able to index content upon crawling a web page.

Nuxt can therefore be considered the official implementation tool for solving, among other things, the inadequacies of client-side rendering on Vue. This article does justice to reviewing how Nuxt competently handles SSR.

Besides this core utility, Nuxt is also widely known for static site generation, which, in my opinion, is simply an amazing value proposition. In this capacity, Nuxt allows us to build static web pages with no need to deploy a server. It handles this in a particularly simple way and makes routing a walk in the park.

Nuxt can also serve as a framework for building lightweight SPAs. In an upcoming article, I’ll take you through the process of exploring Nuxt by building a functional website.

5. vue-dummy

While there are other development tools fit for this spot, vue-dummy is one of my personal favorites. Basically, vue-dummy is a library that provides our application with placeholder text and images. It simplifies the process of generating this placeholder content to the point that we could almost take it for granted.

To use it, we’ll start out by installing the library using npm or simply adding the link to our HTML page:

npm install vue-dummy --save-dev

Or:

<script src="https://unpkg.com/vue-dummy"></script>

Once complete, we can explicitly state our intention of using vue-dummy:

Vue.use(VueDummy)

We can now make use of the vue-dummy directive to render placeholder text. For example, to add placeholder Lorem ipsum text of 300 words, we simply write something like this:

<p v-dummy="300"></p>

Similarly, we’ll use <img /> to generate a 200×200 placeholder image.

As previously stated, it’s easy to take for granted the usefulness of vue-dummy. I find it to be of great help whenever I’m developing a web app with, say, a Python backend and thus cannot take advantage of webpack’s hot reloading to instantaneously view how changes to my frontend code affect the general appearance of the interface.

Whether you’re developing a static or dynamic web app, vue-dummy is a tool that will always cut it for rapidly developing Vue apps.

Conclusion

Vue.js is great, powerful and all, but it still needs some help to enable developers to enjoy a less stressful life. This article has listed out five tools that will help every web developer in their pursuit of crafting amazing user interfaces and experience with Vue.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps — start monitoring for free.