Boilerplates & Reusable Components
Boilerplates are a great way to quickly jump start your project and keep focus on the things that matter most to you. The combination of boilerplates together with reusable shared components boosts development and, in many cases, makes for a better, more maintainable code.
These are my 5 top boilerplate picks for Vue applications for desktop, web apps, large teams, and web sites.
1) Vue Enterprise Boilerplate
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.
2) Electron-nuxt
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.
3) Mevn-CLI
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.
4) Vuesion
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.
5) Vue.js Starter
Vue.js Starter transpiles all javascript files using babel and enables easy debugging using sourcemaps during the development process. It mainly works on server-side rendering which is not seen in other boilerplates. Though the Vue.js starter lacks documentation, it provides a demo application of server-side rendering using vue.js. Below are the advantages of using the Vue.js starter:
- 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.
Conclusion
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.