VueJS, TailwindCSS & FrappeUI Training - Day 1 | DOM Manipulation & VueJS Basics

This is Day 1 (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. We start with the basics of DOM Manipulation to understand what problem a framework like VueJS tries to solve, moving on to learn the basics of VueJS hands-on! 🚀

More Resources:

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

00:00:00 - Introduction
00:00:40 - Why learn this stack?
00:01:28 - Goals
00:02:30 - Structure of this course
00:03:03 - DOM Manipulation
00:03:11 - Question: Why Frappe choose VueJS?
00:06:11 - Building a counter with Vanilla JavaScript
00:18:25 - Question: `innerText` vs `innerHTML`
00:20:05 - Building a Todo App with Vanilla JavaScript
00:30:00 - Implementing ToDo Delete / Refactoring to use Array
00:38:36 - Why Vue / React / etc.?
00:40:45 - Brief on Virtual DOM
00:41:35 - What is VueJS?
00:43:51 - Getting started with VueJS
00:47:15 - Two APIs in Vue, Options vs Composition API
00:49:45 - Building a counter with VueJS
00:56:20 - Note on Virtual DOM
00:57:30 - Building a Todo App with VueJS
00:57:54 - Setting up a new Vue Single Page Application (with Vite)
01:02:00 - Structure of VueJS Single Page Application Project
01:03:38 - Vue Single File Components (SFCs) with Composition API
01:10:23 - Composition vs Options API Take 2
01:13:50 - Continuing with Todo App
01:19:00 - v-for / List Rendering
01:21:57 - v-model / Binding variables to inputs
01:26:37 - Understanding Reactivity (on the board!)
01:35:02 - Implementing Todo delete
01:37:09 - Implementing Todo mark as completed
01:39:25 - v-if/v-else / Conditional Rendering
01:43:26 - Using `ref`
01:44:36 - v-show (vs v-if)
01:47:33 - Question: Example of using ternary operator

[techmaniacc]

Much appreciation, following up as I needed to contribute to frappe cloud and I met Vue

[ewatts]

Thank you so much for sharing the knowledge. I appreciate it very much.

[adeelsiddiqui]

Can't wait for the whole series. Really excited about Desk being rebuilt using VueJS

[abdoal-sofi]

Hello Hussein, I follow your courses from Yemen and I greatly admire your way of explaining and conveying information. I hope that you will activate translation into Arabic in the videos of this series. I wish you continued success and thank you.

[ممد-بر]

im from iran and i realy like your videos bro. good luck

[moh]

that's my man <3 keep it up brother

[TurkerTUNALI]

Now I can finally start frontend development.

[ممد-بر]

hi bro i'm watching your videos in iran and i like your video . good luck

[ntdude]

Hello,
in frappe-ui DocumentResource, is there a way to load the document by using a parameter other than 'name'?
Use case - when someone logs in, I want load profile of the user who is logged in. So I need to load the profile document which has user_id as a field.

[shaiknoor]

Hi Hussain, I'm building an app with Frappe UI and need some help. I want to add a feature for users to sign up, but I can't find any API that allows user registration. Could you please provide some resources or guidance on this topic? I'm stuck and would really appreciate your help.

[abdoal-sofi]

Hello Hussein, I follow your courses from Yemen and I greatly admire your way of explaining and conveying information. I hope that you will activate translation into Arabic in the videos of this series. I wish you continued success and thank you.

[abdoal-sofi]

Hello Hussein, I follow your courses from Yemen and I greatly admire your way of explaining and conveying information. I hope that you will activate translation into Arabic in the videos of this series. I wish you continued success and thank you.