Russell Clark
About
Features
Features
a) Bootstrap: bootstrap 5 & bootstrap-vue-3; b) Form Validation: demonstrating vee-validate(v4);
c) Axios & Fetch: Fetching data using Axios & the Fetch api;
e) i18N: localisation & globalisation;
f) Test Error: global handler & local try-catch;
g) On-Off Line: detection & notification;
h) Media query: a Vue way to do media queries in code;
i) Test 404: route to a missing page;
j) Route Guards: this page (About) demonstrates page-level route guards. Test 404 is a global guard;
Dynamic Loading
Some more interesting aspects of the Vue ecosystem:
a) Dynamic loading of Vue templates (requires the build-time inclusion of the Vue Compiler);
b) Dynamic loading of js scripts;
c) Upload: upload a file & text to cloud storage;
Nested Routes
A demo of nested or child routes Technical Stuff
Javascript framework: Vue.js (v3)
Features: bootstrap-vue-4 for UI; Pinia for state; nested routes; vue-i18n for localisation; vee-validate (declarative & schema-based) for client-side validation; exception handling; logging.
Hosting: Google Firebase.
Firebase: real-time database for User Authentication & data storage.
NB: Firebase user role-based authorisation requires Cloud Functions - which requires a paid tier.
Data access rules, by user & role, are enforced on the client with route-guards & page-level security; & on the server with database rules.
Error Handling
Logging
LogRocket: logs what the user does at UI level.
Sentry
Rollbar: logs all errors & messages.
Airbrake: logs all errors & messages.
Features: bootstrap-vue-4 for UI; Pinia for state; nested routes; vue-i18n for localisation; vee-validate (declarative & schema-based) for client-side validation; exception handling; logging.
Hosting: Google Firebase.
Firebase: real-time database for User Authentication & data storage.
NB: Firebase user role-based authorisation requires Cloud Functions - which requires a paid tier.
Data access rules, by user & role, are enforced on the client with route-guards & page-level security; & on the server with database rules.
Error Handling
UI
Client Globally: Vue error handler. The main handler for Vue component errors. This triggers the vuex handler.
Client Locally: try-catch updating Vuex State triggering a Modal & an Alert in App.vue.
Handlers
Vue Warn handler: (development only).
Window onerror: handles errors raised outside vue components (like vuex).
Client Globally: Vue error handler. The main handler for Vue component errors. This triggers the vuex handler.
Client Locally: try-catch updating Vuex State triggering a Modal & an Alert in App.vue.
Handlers
Vue Warn handler: (development only).
Window onerror: handles errors raised outside vue components (like vuex).
Logging
LogRocket: logs what the user does at UI level.
Sentry
Rollbar: logs all errors & messages.
Airbrake: logs all errors & messages.
Sources
Essential Links
Cloud
Start Here
There is a large Ecosystem
- vuex
- vue-devtools
- vue-loader
- awesome-vue
- bootstrap-vue
- vue-rollbar
- vee-validate)
- vue-i18n
- examples
- madewithvue
- vuescript
Logging
Exception Handling
Dynamic Template Loading