VueJS, TailwindCSS & FrappeUI Training - Day 3 | Getting started with FrappeUI

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

This is Day 3 (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
00:00:18 - Day 2 assignment & readings discussion
00:01:30 - Installing and using external (NPM) packages | Canvas Confetti
00:07:30 - Getting started with FrappeUI
00:07:59 - FrappeUI without Frappe backend / standalone VueJS app
00:09:01 - Question: How to make table with TailwindCSS?
00:10:33 - Configuring FrappeUI
00:13:12 - Using FrappeUI components
00:18:54 - Question: Custom/more props to FrappeUI components
00:19:40 - Question: Is it possible to use Material UI with FrappeUI?
00:22:50 - FrappeUI's Dialog component
00:27:24 - Question: v-model explained again with Dialog
00:28:25 - Question: What if we use v-show instead of v-model?
00:30:28 - Build Process / How does the production setup work?
00:36:13 - Serving VueJS SPA from custom Frappe apps
00:49:38 - Automating production setup in custom apps / Behind the scenes of Doppio
01:07:20 - Question: Why is bench restart needed after pulling Python changes?
01:07:54 - ToDo App with FrappeUI & Frappe Framework backend
01:09:27 - Proxying API calls to Frappe web server / FrappeUI vite plugin
01:18:49 - Getting list of ToDo documents w/o magic
01:22:40 - Question: Is the API public?
01:27:55 - Fetching ToDo documents with magic / `createListResource`
01:40:03 - Rendering a basic ToDo list
01:41:30 - `v-html` / Rendering HTML in our Vue template
01:46:15 - FrappeUI's ListView component to render ToDo list
01:55:16 - Implementing create ToDo feature
02:08:14 - Displaying errors with `ErrorMessage` component and resource `error` property

[Nis.]

Hello Hussain, I have got a problem for me in order to see changes on my UI i.e todo.locahost:8000/index is not working it is requiring me to yarn build manually to reflect the changes, how can I solve this issue? Thanks!

[ShikharGupta-tb]

Hey @hussain can you tell I want to build a socket connection in the custom app to the frappe backend how can I achieve that

[ntdude]

@BuidWithHussain Your installation in frappe cloud worked fine in the first go. But when I do the same - that is - in a different environment I pull latest code and run bench build, it fails while building the Vue app. I have to manually cd into the Vue app folder and run: yarn install. Post that bench build succeeds.

How did it work for you in the frappe cloud in the first go? When does postinstall execute? Am I missing a step?

[shaikhAbdulNadir]

Serving VueJs SPA from custom Frappe apps, I have followed all the steps as mentioned in the video such as putting todo.html in www directory of frappe custom app and assets in public folder but it's showing blank page not the content, when I am running these files by keeping them in other folder and running using live server it's working properly, please tell me what is wrong

[ShikharGupta-tb]

what if my build have multiple js and multiple css file and one of the main js is calling some other css file inside the assets

[robertomarianic]

Hello. Thank you for your video. Frappe HR mobile use this framework?

[NitinAgarwal-fx]

When we close the dialog box, does the frappe ui update the showdialog from true to false by itself??

[raphaelaugustos]

May you show us how to debug a vue file using vite inside chrome dev tools and vscode?

[goldenearth]

How to mount vue app inside bench and run bench start without having to start vue app yarn dev