A Summary of Front End Architecture built by VueJs

I want to share my experience regarding my latest project, where we handled it by creating a front end architecture platform that can help create any web application in a fast way.
Without getting in to details of what the project actually is, I will start by defining the steps we took in order to define the architecture needed to start working on this project:

- Understanding our needs (Project Scope).
- Reviewed most relevant frameworks (Angular, React & VueJS) to decide which is better.
- Enhance our knowledge base, especially the Javascript part so we finished from EcmaScript 5 & EcmaScript 6, VueJS, Stylus.
- Understand what most web applications consists.
And as i mentioned before, we did a Javascript frameworks comparison, and we decided to go with Vuejs as a JS framework, using Vuetify as a UI component framework for Vue. We finished the following resources before starting on the project:
- Vuejs Official Documentation.
- Vuex Official documentation and simple documentation.
- Vue JS 2.0 — Mastering Web Apps — Udemy course.
- Vue Router — Official documentation.
- CSS framework using Vuetify, Official documentation.
After that, I had a question I needed to answer; What components hold a website together? Thinking outside of the box, most websites these days consist of:
- Static pages.
- Grid listings (table/grid view).
- Charts.
- Dynamic Forms.
- Custom Components.
The first four components will cover 80% of any website, and the rest will become the customize/branded component that distinguishes your website from any other.
So we collected all these components in one boilerplate called Vuejs-Boilerplate and we committed it to Github publicly.
But what the main plugins (ready or hand-coded) we used to finalize the project, actually i want to share with you all plugins we use after did a research & comparison for each one:
- HTTP client manager using axios.
- Multilingual using vue-i18n.
- Notifications (hand coded).
- Loading — (hand coded).
- Documentation using docsify.
- Template (end users & admin users) based on router meta.
- CSS framework using Vuetify and stylus.
- Vuex (languages, notifications, loading and users).
- Charts using chart.js
- Cropper for images cropping using cropperjs.
- Backend rendering using puppeteer — we used it for snapshots, images, and pdfs.
- Text editor using Quill.
- Form validation using vee validate.
- Routers using Vue-router.
- Draggable using Vue.Draggable based on SortableJS.
Here are the tools we used for development :
- Vs code, including (Vetur & Vuetify-vscode).
- Webpack dashboard.
- Vuejs chrome extension.
I also highly recommend to subscribe to the following mailers:
you can find the documentation here with all details.
Again here is the Vuejs-Boilerplate on Github
Roadmap:
- support PWA.
- support SSR by Nuxt.
- support Electron.
- Enhance Error handler.
Thanks to Tayseer Emam for assistance me in preparing this amazing project.