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

Easily share Vue components between apps

Bit (GitHub) lets you easily share Vue components across projects and teams.

Bit makes it easy to turn Vue components into reusable building blocks, that can be easily shared and reused across projects, applications and teams.

Apart from making code-sharing simpler than ever, and enabling the automated isolation of components, Bit helps teams collaborate by organizing their shared components in one place so that everyone can find and use them.

Apart from installing components using NPM/Yarn, you can also use Bit to import and develop components right from any consuming project, and easily sync updates across your codebase, to get true adoption for components.

Bit 5 min demo with React; works the same with Vue

Bit’s technology automatically handles the isolation of components, with all dependencies and zero-config build environments, from the project. Then, it lets you manage, update and sync shared components across projects.

With recent Vue support (see Bit + Vue tutorial), Bit became a better way to share and manage your team’s shared components, so you can reuse them across apps, standardize development, collaborate and keep UI consistent.

Vue loaders: Just choose, use and share with your team

Through your component hub components are also visualized and made discoverable, so you can try the actual components hands-on (in isolation) before using them. Then, you can just install or import them into your repo.

Visualize and try each component before using it in your code

Reusing components saves time, helps your team collaborate (not just developers, invite others to see your components as well), simplifies the maintenance of your codebase, and helps you build better. Try it out free:

2. StoryBook

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.

4. Vue loader and Vue-CLI

Vue-loader