VueJS, TailwindCSS & FrappeUI Training - Day 2 | VueJS with API & TailwindCSS Basics

Join in to BWH Community Discord Server:   / discord   !

Day 1:    • VueJS, TailwindCSS & FrappeUI Trainin...  
Day 3:    • VueJS, TailwindCSS & FrappeUI Trainin...  

Notes & Links
----------------------
1. Computed properties can be made writable: https://vuejs.org/guide/essentials/co...
2. Ref vs Reactive article: https://michaelnthiessen.com/ref-vs-r...

This is Day 2 (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.

Day 2 Readings: https://github.com/BuildWithHussain/v...
Day 2 Assignment: https://github.com/BuildWithHussain/v...

For schedule, past episodes and more, check website: https://bwh.live
My Setup: https://buildwithhussain.dev/setup
Articles: https://bwh.live/articles

My Twitter: https://x.com/NagariaHussain

More Resources:

About Frappe: https://frappe.io
ERPNext: https://erpnext.com
Frappe Framework: https://frappeframework.com

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

00:00:00 - Introduction
00:01:32 - Day 1 Recap
00:02:00 - Building simple API-backed VueJS app
00:05:48 - Fetching data from API
00:07:40 - Question: Composition API / script setup w/o build setup
00:10:50 - Storing the data
00:13:17 - Question: Difference b/w ref and reactive
00:15:42 - Rendering list using v-for
00:17:50 - `v-bind` for dynamic image source
00:20:54 - `onMounted` Lifecycle Hooks
00:23:19 - Basic Styling
00:24:43 - Components in VueJS / Single File Components
00:26:35 - Creating our first component
00:27:21 - Import and using a component
00:28:28 - Components in the wild / Overview of Gameplan source code
00:30:13 - Building the Item component
00:30:29 - Passing data to a component
00:31:47 - Props / Catching data in a component
00:33:52 - Why components? / Benefits of components
00:36:39 - Extracting out one more component
00:40:50 - Conclusion of Vue Basics
00:41:51 - Question: v-model / Form binding re-explained
00:44:22 - `watch` / Reacting with side effects on changes
00:48:36 - Question: Example of `watch` in production apps
00:52:40 - TailwindCSS Basics ✨
00:53:44 - Utility-first approach / comparison with Bootstrap
00:58:17 - TailwindCSS docs
00:59:00 - Hands-on with TailwindCSS
01:00:20 - Reset styles / Normalize
01:03:00 - Styling a section with TailwindCSS
01:14:15 - Integrating TailwindCSS in a VueJS project
01:15:42 - The Tailwind Config file
01:16:51 - Configuring 'content' paths
01:20:57 - Building a 'Badge' component with VueJS & TailwindCSS
01:27:18 - `computed` in VueJS
01:36:02 - Gotcha of dynamic TailwindCSS classes
01:38:19 - Component `slots`
01:44:09 - Programmatically accessing component slots in script