20 Must-Have Tools for Vue.js Development

Vue.js is a popular JavaScript framework that allows you to create single-page applications and user interfaces. It has a huge and active open-source community who have created hundreds, if not thousands of tools related to the framework. In this collection, you can find starter kits, boilerplates, developer tools, component libraries, and other resources you can use in your everyday Vue.js workflow.

1. Official Vue.js Guide

Official Vue.js

The official Vue.js guide helps you get started with the Vue framework. It includes a comprehensive learning guide, the Vue.js API documentation, the official code style guide, code examples, and more. You can also get in touch with the Vue community by joining the forum or chat, or attending a meetup.

2. Vue CLI 3

Vue CLI

Vue CLI 3 provides you with a standard toolkit for rapid Vue.js development. It has out-of-the-box support for developer tools like Babel, PostCSS, TypeScript, ESLint, and others. It also comes with a graphical user interface that lets you quickly prototype your Vue.js app. You can install Vue CLI 3 with the npm and Yarn package managers.

3. Vue Starter for PWAs

Vue Starter for PWAs

Vue Starter is a Vue.js boilerplate for production-ready PWAs (progressive web applications). It focuses on performance and development speed and has an impressive 90+ Lighthouse score. Vue Starter is an opinionated boilerplate using tons of optimizations and best practices. If you want to create a PWA using Vue.js, this is your go-to boilerplate.

4. Vue Design System

Vue Design System

Vue Design System is an open-source boilerplate for building UI design systems with Vue.js. It includes a set of tools, patterns, and practices you can use as a foundation for your project. Vue Design System is built on top of the Vue Styleguidist style guide generator, Webpack, and Theo (Salesforce’s design token tool). To see what you can create with Vue Design System, have a look at the live demo on their site.

5. Nuxt.js

Nuxt.js framework

Nuxt.js is a popular Vue.js framework that lets you create performance-optimized user interfaces and single page applications. It makes server-side rendering (SSR) of Vue.js applications possible. SSR improves the SEO of your web apps and results in more responsive UIs. Nuxt.js has a modular architecture, with 50+ modules you can choose from.

6. Hare

Hare Vue.js boilerplate

Hare is a web application boilerplate that allows you to create full-stack applications with Vue.js. Besides Vue, it’s based on the Element UI library, Nuxt.js, and the Koa 2.x Node.js framework. You can install Hare with the Yarn and PM2 package managers.

7. Vue.js WordPress Theme Starter

Vue.js WordPress Theme Starter

Vue.js WordPress Theme Starter helps you create your own WordPress theme using Vue.js on the front-end. It’s based on the BlankSlate WordPress starter theme. VueRouter and the Vuex state management pattern are included in the project. The starter theme follows the development guidelines of Vue.js and comes with Firebase support.

8. Vue.js DevTools for Firefox

Vue.js DevTools for Firefox

Vue.js DevTools for Firefox is a browser extension you can add to your Firefox DevTools. It extends your developer tools with an extra “Vue” tab that lets you analyze and debug your Vue.js applications. You can inspect your components, states, events, and more. You can have a look at the source code of the project on GitHub, too.

9. Vue.js DevTools for Chrome

Vue.js DevTools for Chrome

Vue.js DevTools for Chrome allows you to add a “Vue” tab to your Chrome DevTools. It’s a simple Chrome extension you can install with a single click. It’s based on the same GitHub project as the aforementioned Vue.js DevTools for Firefox. You can use it to inspect your Vue.js components, states, and events right in the browser.

10. Vue.js Package for Atom

Vue.js package for Atom

The Vue.js package for Atom adds Vue component support to the popular Atom source code editor. You can install it from the Settings > Install menu of the Atom editor. The package extends your editor with syntax highlighting and Vue.js code snippets.

11. Vue.js Extension Pack for VS Code

Vue.js extension for Visual Studio Code

The Vue.js Extension Pack is a collection of Vue-related extensions for the Visual Studio Code editor. It adds syntax highlighting, code formatting, and code snippets to your .vue files. It also includes additional developer packages such as ESLint, auto close tags, IntelliSense, and a few others. You can install it from the Extensions panel of Visual Studio Code.

12. Vuetify

Vuetify Component Framework

Vuetify is a popular Vue.js component framework that follows Google’s Material Design guidelines. It provides you with 80+ semantic and reusable Vue components such as cards, carousels, buttons, icons, toolbars, and other design elements. Vuetify supports all modern web browsers—even IE11 and Safari 9+ (with polyfills). It also comes with ready-made project scaffolding so that you can start building your Vue.js app with one single command.

13. Bootstrap-Vue

Bootstrap-Vue Framework

Bootstrap-Vue is a comprehensive implementation of the Bootstrap 4 front-end framework for Vue.js projects. It adds a Bootstrap 4 grid system to your Vue applications. It also allows you to use BS4 components such as dropdowns, alerts, buttons, inputs, and others in your Vue projects. Bootstrap-Vue comes with extensive and automated WAI-ARIA accessibility markup, too.

14. Buefy

Buefy Vue.js component library

Buefy is a responsive UI component library for Vue.js, based on the Bulma front-end framework. As Bulma is built on flexbox, Buefy lets you use flexbox-powered components in your Vue apps. It’s a very lightweight library, as apart from Bulma, it doesn’t have any other internal dependencies. It supports both Font Awesome and Material Design Icons, too.

15. Element UI

Element UI for Vue.js

Element UI is currently one of the most popular Vue.js 2.0 UI toolkits. It provides you with loads of customizable Vue components you can use to build a professional-looking web application. Element UI has a huge community and it’s under active development with new commits being pushed every day. To get started quickly, you can use Element UI’s starter kit, generated by Vue CLI.

16. Quasar Framework

Quasar Framework

The Quasar Framework is a Vue-powered front-end framework for creating single page apps, PWAs, hybrid mobile apps, server-side rendered apps, and Electron apps. It follows web development best practices such as HTML/CSS/JS minification, cache busting, source mapping, linting, and more. It’s packed with tons of responsive Vue.js components that cater to every need.

17. Cube UI

Cube UI

Cube UI is a mobile UI component library created with Vue.js. The components come with full unit tests and have been tested in production for more than a year, so you can safely use them. Cube components look pretty similar to native mobile components—with subtle animations and quick responses to user-generated events. You can customize the components according to your needs by editing the theme.styl file.

18. Storybook

Storybook UI development environment

Storybook is a UI development and testing environment that works with different JavaScript frameworks, including Vue, React, React Native, Angular, and Ember. With Storybook, you create your own component library as a sequence of stories.

A story describes a single state of a component (like a visual test case). A component can have many stories and a Storybook usually contains many components. Check out the Storybook for Vue page that shows how you can get it up and running with Vue.js.

19. VuePack

VuePack

VuePack is an easy-to-use starter kit for your Vue.js projects. It lets you pick Vue.js components from a list and download them as a minified JavaScript file. VuePack includes a selection of handpicked Vue components such as navigation elements, forms, charts, notifications, and others. It also comes with nice developer features like ESLint, Babel 6, PostCSS, and Electron support.

20. Vue Dummy

Vue Dummy

Vue Dummy is a simple but superb GitHub project that facilitates prototyping Vue.js apps. It’s a Vue.js wrapper around the DummyJS dynamic placeholder library. It adds Lorem Ipsum placeholder texts and dummy images to your project as a v-dummy directive. Vue Dummy has a very straightforward syntax. For instance, you can generate a 150-word paragraph using the following code:

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

Next Steps

Vue.js is one of the most well-supported projects in the open-source world. This collection was just a small selection of all the Vue.js tools and resources you can find on GitHub and other developer sites.

If you want to learn about Vue.js more, also have a look at our tutorial about how to create a data table in Vue.js. And, if you are more interested in React development, we have a React.js tools collection that you might find useful, too.

Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress