This article was published 6 years ago, therefore the contents of this post may be out of date.

Vue.js is another popular JavaScript framework that allows you to create single-page applications and user interfaces. It has a large and active open-source community who have created probably thousands of tools related to the framework.

So in this collection here are some useful starter kits, developer tools, component libraries and other resources you can use to help speed your development with Vue.js, save time, and deliver faster to production.

1. Official Vue.js Guide

Official Vue Js Guide

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

2. Vue CLI

Vue Cli

Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.

3. Vue Electron Template

Vue Electron Template

vue-electron takes advantage of webpack-4 with vue-loader, electron-builder, and some of the most used plugins like vue-router, vuex and so much more to provide an easy to use development and building enviroment.

4. 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.

5. 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.

6. 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. The package extends your editor with syntax highlighting and Vue.js code snippets.

7. Vue.js Extension Pack for VS Code

Vue.js Extension Pack For Vs 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.

8. Vuetify

Vuetify

Vuetify is a 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 and it supports all modern web browsers even IE11 and Safari 9+ (with polyfills).

Vuetify comes with ready-made project scaffolding so that you can start building your Vue.js app with one single command.

9. Vue Design System

Vue Design System

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.

The tool is built on top of Vue.js, Vue Styleguidist, Vue Webpack Template & Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

10. Vue Native

Vue Native

The Vue Native CLI is used to generate a Vue Native app, which is a React Native API wrapper. This means that with Vue Native, you can do anything that could be done with React Native.

11. Storybook

Storybook

Storybook supports many different frontend view layers with more coming! React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, and Ember are currently supported. Follow these steps to get started with Storybook.

12. Vue Starter

Vue Starter

Vue Starter is a Vue.js boilerplate for production-ready progressive web applications. It focuses on performance and development speed.

Vue Starter is an opinionated boilerplate using ton of optimisations and best practices. If you want to create a PWA using Vue.js, this is your go-to boilerplate.

13. Nuxt.js

Nuxtjs Framework

Nuxt.js is another Vue.js framework that lets you create performance-optimised user interfaces and single page applications. It makes server-side rendering of Vue.js applications possible. 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.

14. BootstrapVue

Bootstrap And Vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap V4 components and grid system available for Vue.js 2.5+, complete with extensive and automated WAI-ARIA accessibility markup.

15. Osiris

Osiris Ui Component Library

A Vue.js 2.0 universal responsive UI component library..

16. VueFace

Vueface

VueFace is an open source component library for VueJS framework with around 40 components at the moment. It supports 20+ themes for giving different look & feel for all the components.

17. Vue Performance Devtool

Vue Performance Devtool

Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components. It statistically examines the performance of Vue components based on the measures which are collected by Vue using window.performance API.

18. Vue.JS WP Starter Theme

Vuejs WordPress Theme Starter

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

19. Element

Element Vue 2.0 Based Component Library

Element UI is a Vue.js 2.0 UI toolkits. It provides you with loads of customisable 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 with Element UI, you can use the starter kit generated by Vue CLI.

20. 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 over a year. Cube components look pretty similar to native mobile components with subtle animations and quick responses to user-generated events. You can customise the components according to your needs by editing the theme.styl file.

Share

20 Tools for Faster Vue.js Development