Boilerplates provide a great way to get a project up and running rapidly by focusing on what’s most important to you. Boilerplates combined with reusable components accelerate development processes and, often, improve the code and simplify maintenance.
Features of ideal boilerplate:
- Well-readable documentation
- Coding structure with a deeper level of abstraction
- Complies with correct coding standards
- Features a CLI tool ( for fast prototyping and customization)
- Scalable
- Simple testing tools
- Required API modules
- Supports internationalization and localization
- Separate code
- Configuration server and client code
- Proper navigation and routing structure
Why use VueJS
VueJS is an advanced JavaScript framework designed for building dynamic/single-page applications. Applications under development must all be front-end applications. JavaScript is a programming language used in all kinds of web development projects. It also includes a huge number of web components.
Thanks to its lightweight, easy-to-learn and fun-to-write, Vue is easy to integrate with legacy technologies or an application without a specific framework. With its familiar template syntax and use of components, integrating or migrating existing projects to Vue is quicker and hassle-free.
Sing App Vue
Github Stars: 639
License: MIT
Sing App Vue is designed using VueJS and Bootstrap. It features a toolkit that will enhance the speed, build quality and support of the web application. Better yet, you can use this admin template to build different web applications that include SAAS, dashboard assets and tracking management software.
Features:
- Diagram library.
- Consists of an e-commerce section.
- jQuery-free.
- Fully documented codebase.
- Developed on VueJS.
- Fully responsive.
Light Blue Vue
Github Stars: 310
License: MIT
Light Blue is designed using Vue and the Bootstrap framework. It’s the second theme on this list from Flatlogic Platform.
The Light Blue dashboard features a transparent style and looks cool on both screens and tablets due to its superior responsiveness.
With its dark blue background and semi-overlapping dashboard information blocks, it gives a modern, professional look, even with SVG maps.
There are several pages in the Light Blue dashboard to showcase the functionality and its components, such as login, logout, notifications, graphics, icons, maps, tables, chat, error pages, etc.
Electron Nuxt
Github Stars: 658
License: MIT
Electron & Vue.js is a quick-start template with Vue-CLI. It also comes with preinstalled general Vue plugins, and an electron-packager/electron-builder. You can package your application as an installable package, it supports unit and E2E testing, Vue-dev tools, and much more. The project also focuses on eliminating the need to configure electron applications with Vue manually. Electron-Vue adds the benefits of Vue-CLI for scaffolding, Webpack with Vue-loader, electron-packager or electron-builder, as well as some of the most commonly used plugins such as Vue-router, Vuex and others.
Features:
- Automatic updatable template to simplify development.
- Typescript support, only during application rendering.
- Parallel code support
- Support unit & e2e testing.
- UI pre-built components and icons support for quick launch and offline use of the project.
- ESLint customization.
- Vue installation of the latest development tools
- Support for CSS pre-processors such as Sass.
- User interface for lightweight components like Buefy, and support for Vuetify.
Vuesion
Github Stars: 2.6K
License: MIT
Vuesion is a PWA template. Beyond that, it is an extensively maintained production-ready template for enterprise-grade PWAs. The template also focuses on performance, speed of development and best practices. Besides, it is built around the idea of microservices or service-oriented architecture. Also, you can see best practices for getting async data, i18n configuration, saving Vuex state on page update, Typescript support, routing with prefetching data and much more.
Features:
- Allows scaffolding. Generating components and plugging them into modules is effortless. Dynamic development of the UX and UI can be done easily with Vuesion.
- Instant display of UI changes. When Vuesion provides accelerated development, UI and UX updates are reflected in a moment. The changes to CSS and Typescript are similarly reflected instantly, with no page reload or a server restart.
- Application status is saved during code updates.
- Well-documented.
Peridot
Github Stars: 113
License: MIT
A fully featured Vue 2.6 PWA boilerplate.
Features:
- PWA (Progressive Web Application) with Service Worker
- Split code and asynchronous component/routine loading
- Automatic hot loading during development
- Load-balanced dockerized production setup pm2
- Auto-removal of unused CSS/SCSS
- SCSS global variables and easy theme customization
- Linking and formatting with eslint and prettier
- Uses Buefy for styling
Vue enterprise boilerplate
Github Stars: 7.6K
License: MIT
Vue enterprise boilerplate is a very well-made and detailed boilerplate from the Vue Core team member Chris Fritz. In addition, it includes an opinion-based architecture, first-class testing methods, generators to speed up day-to-day development tasks, globally auto-registered components, copied Vuex modules and much more.
The project is also very well-documented. Each section is also explained in detail. For VSCode, it also comes with a pre-configured installation, adding IntelliSense when importing and working with files.
Features:
- Thorough documentation
- Guaranteed consistency
- First class tests
- Rapid development
Vuetify
Github Stars: 23.7K
License: MIT
Vuetify is used to embellish your Vue projects. Due to his generous donations, it has been under active development since 2016. Presented as Material Design Component Framework on Github, which reduces workload around Vue development.
Features:
- Includes 82+ components and server-side rendering support.
- Template designs and layout support for long-term projects.
- Supports RTL layout and premium, theme provider.
Automated template trees reduce package size and increase performance.
Tracks weekly releases.
Active community support.
Well-documented. Documentation shows examples of ready-to-use layouts as well as supporting customisation according to the application’s required design and functionality.
Completely supported by all browsers.
Vue WordPress
Github Stars: 145
License: MIT
Vue WordPress is a SPA template that is built using the WordPress REST API and Vue. Optimised by performance, the template improves SEO by rendering pages and content on the server side. Running as a SPA, and using WordPress and the WordPress Rest API for managing backend data.
Features:
- Comprehensive documentation.
- Frontend and backend run on the same host, reducing the load of сross-origin resource sharing setup and avoiding any further misconfigurations.
- Supports client/server split code to enable SEO optimisation.
- Supports Axios, Vue, Vuex and Vue Router libraries to simplify style, deployment and dependencies.
- Snap-in optional hot plugins to simplify module replacement during runtime operations to avoid the need to reload the entire page.
- Integrates REST API component-based sampling and allows caching and batch processing of REST APIs.
- Handles via hot-routing, configurable in the WordPress dashboard.
Mevn-CLI
Github Stars: 407
License: MIT
Mevn-CLI works with the MEVN framework, which provides a quick start for web applications and automatically configures the local environment.
Features:
- Extensive tools and commands are included to build the MEVN stack.
- Allows choosing a template from the basic Progressive Web App, Nuxt and GraphQL templates. By using them, you have a platform to build up your project.
- Several databases can be configured, such as MongoDB / MySQL and mongoose ODM and sequelize ORM.
- Enables running an application in a Docker environment using a single command. Uses Mevn-CLI, an external docker image can be extracted to create a local Docker-based environment and run the local application.
- Comes with additional Vue-related packages on the fly, providing automatic integration with your project.
- Developer-friendly syntax makes for clean and simple code.
- Component-centric modules make code clean, readable and compact.
- Template code generation and automation of redundant tasks.
Vue Skeleton MVP
Github Stars: 234
License: MIT
Vue Skeleton MVP provides a way to create Vue applications using VueJS, Vuetify, Vue Router and Vue Skeleton. All the features of the MVP are in Javascript, with async/await functionality and a link to a demo application.
- Features:
- Makes use of Vuetify, to boost design with the Material Design component framework.
- Build-in support for Vue Router, Vuex, i18n and Google analytics.
- Has a landing page, a secure homepage and other pages for basic CRUD operations.
- Implements cypress and mocha/chai testing.
- Connected with ESlint for good coding practices and npm for dependency setting.
- Secure transmission is done using JSON Web Tokens.
- Schema uses Vue Router with HTML5 history mode and requires a router history mode change to allow navigating through URLs without reloading the page.
- Since it uses Vue-CLI, the global configurations can be set in the vue.config.js file. Alternatively, feel free to use the Vue config command to check or change the global CLI.
Conclusion
Boilerplate plays a key role in programming and development. As discussed above, they are helpful when codes are repetitive. The use of templates is recommended irrespective of the size of your project. However, depending on the size of your project, there are some considerations such as scalability, API modules and ease of use.
So once you have researched the requirements for your projects, it will be easy for you to choose programming templates for your project. Make sure you use them correctly.
Top comments (1)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍