10 Top VueJS Boilerplates for 2020 .Boilerplates give you a head start and solid foundation by installing a template for your project. They create a local environment by automatically installing the entire framework needed for the project.
With 5.4k GitHub Stars, this is one of the most used boilerplates for Vuejs. Created by Vue Core team member Chris Fritz, it is mostly used by larger teams. It better suits enterprise-level applications due to the following reasons:
- It contains well-defined layers for a large application.
- It includes testing practices and is customizable.
- It has an in-built generator to speed up development tasks.
- It is well documented for new developers. The documentation describes the setup and development details of Vue Enterprise Boilerplates. The architecture and routing details, state management, mock-ups, and tests for TDD are explained in the document.
- It supports linters for Vuejs that helps to keep the code clean.
- It supports TDD, Unit tests and end-to-end tests with Jest and Cypress and details the core concepts and best practices in the documentation.
- It supports speedy development by allowing you to configure the generators, global base components, and handy aliases.
- It describes the troubleshooting tips for common issues during development clearly in the documentation.
Building a desktop application can be tedious. You need to pay attention to the application architecture along with the installation, packaging, and versioning. Electron-nuxt is a boilerplate to create an Electron app with Vue / Nuxt. Electron is a framework used to create web-like desktop applications with web-like features.
This feature is seen in applications like Slack, the chat application Discord, and even in Microsoft Visual Studio. Electron-nuxt includes features like:
- An auto-updating boilerplate for easy development.
- Support for typescript but only in the rendering process of the application.
- Support for parallel code compilation
- Support for unit-testing and end-to-end testing and is configurable during vue-cli scaffolding.
- Supports pre-installing UI components and icons like Font Awesome and Material design icon for a quick start and offline usage of the project.
- Configuring ESLint.
- Installing the latest vue-devtools
- Support for CSS preprocessors like Sass, LESS, and Stylus.
- Support for light-weight UI components like Buefy, Vuetify, and Element.
Progressive Web Apps (PWA) are widely used to create comprehensive sites or apps. They are web pages with an app-like appearance. PWA is quick in responding to instructions, loads instantly, and engages users with a natural experience. Vuesion is a boilerplate for production-ready PWA’s. It installs quickly through npx or npm and focuses on best practices and performance during the development and production phases. This MIT licensed project with 2k GitHub Stars displays a live demo on Heroku. Here are some salient features of Vuesion:
- Enables scaffolding: Creating components and connecting them to modules is done without much effort. It enables mock APIs and tests for individual components.
- Instant display of UI changes: Speedy development occurs when the UX and UI changes are displayed instantly. Vuesion reflects the changes of CSS and typescript instantly without refreshing the page or restarting the servers.
- The application state is preserved when updating code.
- Documentation: Documents the use-cases in all scenarios, creates SEO documents with hashtags and follows best practices for coding.
Nw.js is a framework used to build desktop applications using HTML, CSS, and Java. It is built on top of Chromium and Node.js. To build Vue applications, you can install the Vue.cli and add NW.js dependencies and NW.js SDK on your Vue project. It has 70 GitHub Stars and is a quick starter boilerplate for Vue applications. Below are the features and advantages of using NW.js in your project:
- Easily create and add the NW.js dependencies to your Vue projects.
- Documentation is detailed and good to start a project.
- It supports protected binaries. This will protect your binaries from hacking or modifications.
- Supports customizing stylings using CSS.
- It is similar to the Electron Vue boilerplate but has a few differences.
- The entry point of the application can easily be modified in the package.json.
Electron-Vue is a widely used boilerplate with 11.6K GitHub Stars. It is interesting to see the GitHub page displaying the list of projects developed on Electron Vue. As the name suggests, it is used to create electron applications for the Vue framework. Electron is an open-sourced library developed to build cross-platform desktop applications. It uses Chromium and Node.js to create single runtime apps. The application runs on various OS platforms like Mac, Windows, and Linux.
Preferred by the developer community, this boilerplate removes the need for manual set-up for Vue projects. Electron can be installed using vue-cli for your Vue projects. Below are the salient features of this boilerplate:
- It uses vue-cli for scaffolding, webpack with vue-loader and electron-packager. And is easily customizable and is built with HTML-tags.
- It has structured documentation that includes the project structure, code, and snippets for developing an app and unit testing end-to-end testing examples.
- Setup starts with a single package.json file.
- It utilizes ready-made Vue plugins like Axios, Vue-Electron, Vue-Router and Vuex.
- The boilerplate is ready with pre-installed vue-dev tools and devtron tools.
- It easily packages the applications using an electron packager or builder.
- It uses babili and supports linting using ESLint.
- Web applications built with server-side rendering have an advantage on SEO. Search engine crawlers have better visibility of pages.
- Vue.js starter boilerplates are good for sites working on slow internet or slow devices as it takes less time to load the content that has been updated on the server.
- Support for both SCSS or CSS files.
- Built-in plugins to speed up the development process.
This can be used where the time-to-content is critical as it gives the best possible initial load performance.
As the name suggests, Vuetify is used to beautify your Vue projects. With 23.7K Github Stars and generous contributions, it has been in active development since 2016. It boasts a significant list of sponsors on Github and is a Material Design Component Framework and reduces the design effort for Vue projects. These are the advantages of Vuetify.:
- Vuetify consists of a total of 82+ components and supports server-side rendering.
- Displays design and template for the projects with long term support.
- Provides premium themes are RTL layout support.
- Automated tree-shaking reduces the bundle size and improves performance.
- Follows a weekly release cadence.
- It is supported by a vibrant community and links you to this community for any queries.
- The official page displays good documentation to get started with Vuetify. It displays examples of pre-made layouts and supports customization according to the required look and feel of the application.
- Fully supported by Chromium-based browsers, firefox, Edge, Safari 10+. It works on IE 11 and Safari 9 browsers with polyfills.
Vue.wordpress is a boilerplate which builds Single Page Applications (SPA) using WP REST API and Vue.js. It is optimized for performance and enables better SEO with server-side rendered pages and content. Its front-end works like a SPA and uses WordPress and WP Rest API to manage back-end content. It has 145 Github Stars and also requires a minimal level of PHP knowledge. The boilerplate builds a demo of a basic website. These are some features that are included:
- Extensive documentation.
- The front-end and back-end work on the same host, this reduces the burden to configure for CORS and prevents further misconfigurations.
- Supports client/server code partitioning to ensure SEO optimization.
- Supports libraries like Axios, Vue.js, Vuex, and Vue Router to promote styling, implementation, and dependencies.
- Supports adding Hot Module replacement to facilitate replacing modules at runtime without having to reload the entire page.
- Integrates component-based REST API fetching and allows REST API caching and batching.
- Works on dynamic routing that can be configured in the WP dashboard.
Mevn-CLI works with the MEVN stack. MEVN stands for MongoDB, Express.js, VueJS, and Node.js. This boilerplate provides a quick start for MEVN stack-based web apps and automatically installs a local environment.
It has 407 Github Stars and the project is licensed under the MIT Licence. These are its main benefits:
- Consists of a set of commands and additional utilities to build the MEVN stack.
- It allows you to choose the template from a basic Progressive Web App, Nuxt-js and GraphQL templates. These servers are a platform to build your project.
- Allows configuration with multiple DBs such as MongoDB / MySQL and mongoose ODM and sequelize ORM.
- It allows the application to run within a Docker environment with a single command. Using Mevn-cli you can pull the external docker image to create a local Docker-based environment and launch a local app.
- It adds additional packages related to Vue on the go allowing automatic integration with your project.
- Uses developer-friendly ES6 syntax, making the code clean and simple.
- Modules and component-driven and keep the code clean, readable and compact.
- It generates boilerplate code and automates redundant tasks.
- It uses Vuetify, to enhance the designs using the Material Design component framework.
- Has built-in support for Vue router, Vuex, i18n and Google analytics.
- The template has a landing page, protected home page, and other pages for essential CRUD operations.
- Supports testing with cypress and mocha/chai.
- Uses ESlint to adhere to good coding practice and NPM for installing dependencies.
- Secures transmission of information using JSON Web Tokens (JWT).
- As the boilerplate uses Vue Router with HTML5 History Mode and requires a change in the router’s history mode to enable URL navigation without page reloads.
- As it uses Vue-CLI you can set the global configurations in the vue.config.js file. You can also use the Vue config command to inspect or modify the global CLI.
Boilerplates give you a head start and solid foundation by installing a template for your project. They create a local environment by automatically installing the entire framework needed for the project.
While it is a good idea to take a hint from the GitHub Stars when selecting a boilerplate, it is more important to look at the functionality offered by each of them as no one boilerplate suits all projects. Another vital factor to consider is the type of application they support.
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty
☞ Learn Vue.js from Scratch - Full Course for Beginners
☞ Create Shopping basket page With Vuejs and Nodejs
☞ Learn Vue 2 in 65 Minutes -The Vue Tutorial for 2018