Motivations

Ongoing resilient Frontend architecture is meant to help you build production-grade projects using the Vue framework.

This architecture maintained with several purposes in mind:

• To be used as a boilerplate to quickly deploy a new project.
  • It is used in production by Widya Imersif, and thus covers enterprise-grade features and needs.
• To be used as an educational resource, meant to be used as a learning/teaching resource, even if you don’t use it as a boilerplate.
• To be flexible and allow for extensive customization, based on your own needs and use-cases.

Don’t hesitate to share your opinion about your “getting started” experience!

Overview

This boilerplate is meant for developers with basic skills in Vue, who are looking for a way of building production-grade web applications. We took very special care regarding the Developer Experience, because it’s very important to us, as developers, to help us build quality software.

Knowing Vue, Vuex and Vue-router will be a huge help, because they are the pillars of this boilerplate.

We carefully explain installation and proper setup, but it’s your responsibility to go deeper and actually learn how they work. Tip: Bookmark this Vue Cheat Sheet if you’re new to Vue. Tip: Bookmark this Vuex Cheat Sheet if you’re new to Vuex.

Preset, opt-in features, and 3rd party vendors

This architecture comes with presets which provides “built-in” features and utilities that rely on different vendors. Don’t hesitate to check out our “What’s preset?” section for more information.

Benefits

As mentioned above, this architecture contains a set of built-in features and utilities.

Here is an overview of all the features included in this boilerplate:

• Progressive Web Apps support (thanks to Vue PWA)
• Built-in utilities
  • Stages (development, staging, production)
  • Material Design icons as components (thanks to Vuetify)
  • Material design Component (thanks to Vuetify)
  • Easy formatting time and date (thanks to Moment)
  • Proper form handling and validations (thanks to VeeValidate)
  • Charting capabilities (thanks to Apex Chart)
  • Proper handling of sensitive information (e.g: token) using custom utilities
• Built-in **scripts** (in package.json)
  • Run linter (thanks to ESLint)
  • NPM security audit
  • NPM developer-friendly outdated packages
  • Documented usage of own dependencies