In this comprehensive training program, we are going to learn about building modern frontend applications with VueJS, TailwindCSS and FrappeUI, by building!Note: the timings are in IST (Indian Standard Time)Why learn these?At Frappe, we are building a lot of new products: Frappe Insights, Learning (yup, the platform you are reading this on 😉), Builder, and more! They all have one thing in common: the tech stack. Frappe Framework already allows you to build full-stack web applications with low-code and in record time. It is now time to build sleek and modern front-ends with tailored UIs. This is where FrappeUI, a set of pre-built UI components and libraries, comes in. FrappeUI is built on top of VueJS.In this training program, I will teach you the foundations you need to build front-end apps with VueJS and FrappeUI. Whether you want to build your own products or want to contribute to Frappe products like Frappe CRM, this training is for you!PrerequisitesWorking knowledge of HTML, CSS and JavaScript, we will be learning VueJS from scratch. Basics of Frappe Framework is recommended but not required for the FrappeUI part of the training.ContentDOM Manipulation / Why VueJS?We will start by using Vanilla JavaScript to implement some features using DOM manipulation. This will give us an idea about the problem front-end frameworks like VueJS solve.Basics of VueJSSingle File ComponentsTemplate Syntax (v-if, v-for etc.)Reactivity FundamentalsEvent HandlingStyling with TailwindCSSThe EssentialsResponsive StylingThe Config FileComponents in VueJSBuilding our own componentsPropsv-modelEventsSlotsBuilding a simple CRUD Project with VueReading List AppUsing Vue Router to add client-side routingFrappeUISetting up FrappeUI in our VueJS appUsage of basic componentsConnecting our VueJS project to a custom Frappe appAuth/SessionResource Manager (with and without!)Project with VueJS and FrappeUILet’s put our new learning to work by building a small e-commerce store to sell merchandise with the following features:Product ListingCart (with local storage)Checkout FormOrders (connected to backend)Success PageAlong the way, we will also learn about using installing and using external NPM packages like dayjs.All in all, it is going to be fun!
Know More