5 Tools for Faster Vue.js App Development

Five tools to speed the development of your Vue.js applications.

Not long ago Vue.js passed React in GitHub stars. Although a somewhat shallow metric to measure, no doubt that this is only an indicator of the great success and popularity Vue.js is gathering in the community in 2018.

As we use more great frameworks like Vue to build new applications, Dev Velocity becomes one of the most important aspects of our work. Building amazing applications is great, building them fast is even better.

So, here are some useful tools to help speed your development with Vue.js, save time, and deliver faster to production. Feel free to comment and add useful tools you work with to build faster :)

1. Bit + Vue

Bit is an open-source tool that turns components into isolated building blocks which can be shared, used and developed from different applications.

With Bit, you can seamlessly isolate components from any project (no refactoring or configurations needed), share them with your team and use or develop them from any project to build new applications faster.

Bit provides an integrated workflow which supports NPM/Yarn installation for components, and lets you build and test components in isolation from your project in the cloud. This makes Bit a very useful tool to speed development and reuse components to build multiple apps.

Here’s a demo video of Bit with React components. It works the same way with Vue components, and any other type of JS components. Note that although Vue components are fully supported by Bit, visual rendering is still under work and is expected within weeks.

2. StoryBook + Vue

Although mostly mentioned in the context of React, with the release of Storybook 3.2 it now supports the same useful workflow for Vue components.

StoryBook provides a rapid UI component development environment that enables you to explore a component library, navigate and view UI components in a real-time web development environment with hot-reload.

Through StoryBook you can develop components faster in isolation from your app, encouraging reusability. StoryBook can also be combined with Bit, to quickly prototype and develop components in different projects.

You can also try these useful addons: addon-actions , addon-links , addon-knobs , addon-notes . More will be supported soon.

3. Vue dev-tools

Vue-devtools is a Chrome/Firefox browser extension for debugging Vue.js applications. It can also be used as a standalone Electron app in any environment . You can combine vue-devtools with Vuex to create a time-travel debugging workflow(!).

With the release of version 4, you can now modify the data of your component directly in the Component inspector pane. If you are using vue-loader or Nuxt in your project, you can now open the selected component in your favorite code editor (provided that it’s a Single-File Component).

Learn more about the new features of v.4 release here . Note: if the page uses a minified build of Vue.js, inspection is disabled by default.