Get More Done with Vue.js: Developer Tools

Vue.js Developer Tools

Welcome to my final lesson in this series on Vue.js. In this final section, I want to look at developer tools for Vue, in addition to the Vue community. I feel that Vue’s developer tools and its community are a big part of what makes Vue compelling. The first tool we will look at is vue-cli.

vue-cli is a simple CLI for scaffolding Vue.js projects with pre-configured build setups. The CLI pulls down templates from the vuejs-templates organization on GitHub that provide development tooling setups so that users can get started building apps as fast as possible. Although the setup is pre-configured, these templates let you structure your code however you want. A common feature among these templates is that they all support *.vue single file components.

The second tool we will focus on is webpack. Webpack is a module bundler for modern JavaScript applications. While it bundles your JavaScript code, it can also transform it during this process. This opens up possibilities to do many interesting things in your JavaScript code. One of the more popular use cases is to write ES2015 code and use Babel to compile it down to browser compatible ES5. So not surprisingly, there are many options available for using Vue with webpack.

Webpack transforms your code through what are called “loaders”. vue-loader is a loader for webpack that can transform Vue components into a plain JavaScript module. vue-loader also enables ES2015 by default and allows the use of other webpack loaders for each part of your Vue component such as Sass and Jade.

webpack-simple is a template for a webpack and vue-loader setup, useful for quick prototyping, although not suitable for production. It comes with support for .vue components, ES2015, source maps and hot-reloading.

vue-template-loader is a Vue.js 2.0 template loader for webpack. This loader allows you to pre-compile templates by using vue-template-compiler and provide a function that can inject a render function to a component options object. It also supports scoped css and css modules and hot module reloading.

Prerendering generates static HTML files from a single page application for specific routes at build time. In some cases, this is preferable to server-side rendering as it can improve SEO just as well as SSR, with significantly less setup. In other cases, prerendering can serve content faster and cheaper than SSR. If you’re using Webpack, you can easily add prerendering with the prerender-spa-plugin. It’s been extensively tested with Vue apps – and in fact, the creator is a member of the Vue core team.

Other Build Tools

If you prefer to use something like Browserify instead of webpack, you can use vueify to transform Vue components with Browserify with support for scoped CSS and hot module reloading. In addition, you may want to check out vue-browserify-boilerplate. vue-browserify-boilerplate is a full-featured Browserify + vueify setup with hot-reload, linting & unit testing. This is a project template for vue-cli.

Rollup is another JavaScript module bundler you can use for bundling your JavaScript code. It supports bundling of Vue components with Rollup through a plugin called rollup-plugin-vue.

Other Tools

The vue-devtools Chrome extension is a Chrome devtools extension for debugging Vue.js applications. It also works with vuex for time-travel debugging.

During development, Vue provides a lot of warnings to help you with common errors and pitfalls. The Chrome devtools extension for debugging Vue.js applications only works in development mode.

When using a build tool like Webpack, the production mode will be determined by process.env.NODE_ENV in your Vue’s code, and it’s in development mode by default. Webpack can provide ways to overwrite this variable to enable Vue’s production mode, which strips these warnings during the build. All vue-cli templates have these pre-configured for you.

If a runtime error occurs during a component’s render, it will be passed to the global Vue.config.errorHandler config function if it has been set. You could leverage this hook together with an error-tracking service like Sentry, which provides an official integration for Vue.

I mentioned prerendering in the Webpack section. Using webpack’s code splitting to avoid forcing users to download your entire application to view a single page, still won’t be as performant as downloading a single, pre-rendered HTML file. You can achieve this in your Vue.js app with server-side rendering. Server-side rendering is fairly simple these days with Node.js and a server-side framework like Express.js.

Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. With Nuxt.js you can easily create Vue.js applications with server side rendering, code-splitting, hot-reloading, static generation and more!

Community

Before I end the lesson, I want to mention the Vue.js community. From contributing to Vue.js itself, developer tools, blog posts, tutorials and more, the Vue community is a primary reason why Vue is where it’s at today. So if you’re interested in participating, here are some places to get started.

Vue.js has an official forum where you can ask questions and get answers about Vue and its ecosystem. The Vue codebase, organization and plugins are all available on Github. You can submit issues on GitHub if you have a bug report or feature request, or you can submit pull requests. Finally, awesome-vue is a curated list of awesome things related to Vue.js, which is also a great resource.

It’s also worth mentioning Laravel here. Laravel is a PHP web application framework known for its expressive, elegant syntax. By default, newly generated Laravel applications contain an Example.vue Vue component. The Example.vue file is a single file Vue component which defines its JavaScript and HTML template in the same file. So if you’re familiar with PHP, you may want to check out Laravel if you haven’t already, since Vue components are already baked in.

That’s it for this series on Vue.js. I hope you enjoyed it! Feel free to send me any feedback you have. Thank you for reading. I plan on releasing a full course on Vue.js later this year, and I hope you’ll join me then! Sign up for the email list using the form below to be notified when it launches.

Sign up to Get More Done with Vue.js

* indicates required