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.
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 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.
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.
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.
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.
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.
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.
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.
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.
10. 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.
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 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.
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.
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.
A Vue.js 2.0 universal responsive UI component library..
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.
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.
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.
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 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.