VueJS, TailwindCSS & FrappeUI Training - Day 4 | Vue Router & Starting the E-commerce Project

Notes & Links
----------------------

This is Day 4 (out of 5 days!) of VueJS, TailwindCSS & FrappeUI Training for Frappe School! If you want to get started or learn more about Frappe's new frontend stack, this is your chance.

More Resources:

--------------
Chapters
--------------

00:00:00 - Introduction & QnA
00:02:40 - Day 3 assignment brief
00:05:26 - Composables
00:14:17 - The `component` component
00:22:53 - `key` attribute with `v-for` / list rendering
00:26:00 - Client-side routing
00:33:52 - Vue Router basics
00:48:16 - Question: Common header and footer for all routes
00:53:40 - Lazy loading route components
00:57:50 - router-link for linking between routes
01:00:00 - `name` for routes and name-based routing
01:03:45 - Programmatic navigation with `useRouter`
01:06:56 - Dynamic Route Params
01:12:49 - Extracting router setup to a separate file
01:14:00 - Peeking into Frappe Builder source code
01:15:21 - Starting our E-commerce Project
01:15:36 - Planning rough user flow / wireframes
01:22:30 - What is doppio?
01:23:19 - Setting up new site and app
01:27:10 - Setting up frappe-ui starter
01:37:52 - How does authentication/session works in SPA frontend
01:58:25 - Guarding routes with navigation hooks
02:05:15 - Route `meta`
02:12:00 - Question: How to prevent desk access?
02:12:55 - Pushing our app to GitHub