Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction & Course App: Moneyballs

Lecture 2: What is Quasar?

Lecture 3: Vue 3 & Composition API Basics

Lecture 4: Editor & Software Setup

Lecture 5: Chrome & Vue Devtools

Chapter 2: Getting Started

Lecture 1: Install Node.js and Quasar CLI

Lecture 2: Create & launch a new Quasar Project in the Browser

Lecture 3: Folder structure – Layouts, Pages, Routes & more

Lecture 4: Download Source Code

Chapter 3: Layout, Pages & Navigation

Lecture 1: Customize Layout

Lecture 2: Colors & Style

Lecture 3: Pages & Routes

Lecture 4: Navigation

Lecture 5: Active Navigation State

Lecture 6: Improve Drawer width and Breakpoint

Lecture 7: Download Source Code

Chapter 4: Entries Page Design

Lecture 1: Entries List

Lecture 2: Currency formatting

Lecture 3: Composable – useCurrencify

Lecture 4: Composable – useAmountColorClass

Lecture 5: Improve the Entry Text

Lecture 6: Add Entry Form

Lecture 7: Balance Bar

Lecture 8: Computed Property – Balance

Lecture 9: Download Source Code

Chapter 5: Add Entry

Lecture 1: Connect Fields to Reactive Object

Lecture 2: Submit Form & Add Entry

Lecture 3: Fix the Balance Error

Lecture 4: Reset Form & Tidy Code

Lecture 5: Refocus Name Field

Lecture 6: Download Source Code

Chapter 6: Swipe to Delete Entry

Lecture 1: Swipe to Delete with SlideItem

Lecture 2: Prompt before Delete

Lecture 3: Delete the Entry

Lecture 4: Improve the Dialog Message with HTML

Lecture 5: Show a Deleted Notification

Lecture 6: Download Source Code

Chapter 7: Pinia – Setup Store

Lecture 1: State Management & Pinia

Lecture 2: Options vs Setup Stores

Lecture 3: Setup a Pinia Setup Store

Lecture 4: Move Data into Pinia State

Lecture 5: Move Computed Balance into Pinia Getter

Lecture 6: Add Entry Pinia Action

Lecture 7: Delete Entry Pinia Action

Lecture 8: Tidy Up the Entries Page

Lecture 9: Download Source Code

Chapter 8: Child Components

Lecture 1: Balance

Lecture 2: Add Entry

Lecture 3: Entry

Lecture 4: Nothing Here Fallback

Lecture 5: Download Source Code

Chapter 9: Edit Name & Amount

Lecture 1: Setup QPopupEdit for Name

Lecture 2: QPopupEdit – Customization & Style

Lecture 3: Setup QPopupEdit for Amount

Lecture 4: Update the Name & Amount

Lecture 5: Download Source Code

Chapter 10: Mark as Paid

Lecture 1: Mark as Paid

Lecture 2: Paid Entry Style

Lecture 3: Display the Paid Balance

Lecture 4: Paid Balance Getter

Lecture 5: Download Source Code

Chapter 11: Sort Entries

Lecture 1: Install Sortable.js (Vue 3 version)

Lecture 2: Show Sort Handles

Lecture 3: Add a Toggle Button for Sort Handles

Lecture 4: Only Sort on Handles

Lecture 5: Update the State on Reorder

Lecture 6: Fix the Style

Lecture 7: Download Source Code

Chapter 12: Use Directives & Transitions to Improve the Experience

Lecture 1: Directive – selectAll

Lecture 2: Context Menu Issue

Lecture 3: Transition – Nothing Here

Lecture 4: Transition – Balance Bar

Lecture 5: Download Source Code

Chapter 13: Settings Page

Lecture 1: Create a Settings Store

Lecture 2: Prompt to Delete Toggle

Lecture 3: Make the Delete Prompt Optional

Lecture 4: Show Running Balance – Setting & Styles

Lecture 5: Show Running Balance – Getter

Lecture 6: Show Running Balance – Fix Style Issues

Lecture 7: Change Currency Symbol

Lecture 8: Update useCurrencify Composable

Lecture 9: Download Source Code

Chapter 14: Dark Mode

Lecture 1: Add Dark Mode Settings

Lecture 2: Dark Plugin

Lecture 3: Paid Entry Styles

Lecture 4: Composable – useLightOrDark