Vue 3 & Composition API Basics

Editor & Software Setup

What is Quasar

Introduction & Course App Moneyballs

Chrome & Vue Devtools

Install Node.js and Quasar CLI

Create & launch a new Quasar Project in the Browser

Customize Layout

Colors & Style

Pages & Routes

Navigation

Active Navigation State

Improve Drawer width and Breakpoint

Entries List

Composable - useCurrencify

Currency formatting

Composable - useAmountColorClass

Improve the Entry Text

Balance Bar

Add Entry Form

Computed Property - Balance

Connect Fields to Reactive Object

Fix the Balance Error

Submit Form & Add Entry

Refocus Name Field

Reset Form & Tidy Code

Swipe to Delete with SlideItem

Delete the Entry

Improve the Dialog Message with HTML

Prompt before Delete

Show a Deleted Notification

State Management & Pinia

Setup a Pinia Setup Store

Options vs Setup Stores

Move Data into Pinia State

Move Computed Balance into Pinia Getter

Add Entry Pinia Action

Tidy Up the Entries Page

Delete Entry Pinia Action

Balance

Add Entry

Nothing Here Fallback

Entry

QPopupEdit - Customization & Style

Setup QPopupEdit for Name

Setup QPopupEdit for Amount

Update the Name & Amount

Paid Entry Style

Mark as Paid

Display the Paid Balance

Paid Balance Getter

Install Sortable.js (Vue 3 version)

Show Sort Handles

Add a Toggle Button for Sort Handles

Only Sort on Handles

Fix the Style

Update the State on Reorder

Directive - selectAll

Context Menu Issue

Transition - Nothing Here

Transition - Balance Bar

Prompt to Delete Toggle

Create a Settings Store

Show Running Balance - Setting & Styles

Make the Delete Prompt Optional

Show Running Balance - Getter

Show Running Balance - Fix Style Issues

Update useCurrencify Composable

Change Currency Symbol

Add Dark Mode Settings

Dark Plugin

Paid Entry Styles

Composable - useLightOrDark

Add Entry Form Style

Dark & Light CSS Classes

Remove Shadows in Dark Mode

Darker Primary Color

Nothing Here Component & Other Tweaks

Save Settings Data

Load Settings on App Start

Save & Load Entries Data

Fix Strange Sort Delete Issue

Icon Genie - Introduction & Installation

Create the Source Icon with Figma (or just download it)

Generate Icons with Icon Genie

Create an NPM Script for our Command

Build and Deploy App to the Web

Add the Mac Platform

Customize Browser Window Settings

Electron Main Process file & Tidying Up

Make Menu Customizable with a Menu Template

Put Menu Template into Separate File

Add a Settings Keyboard Shortcut

Menu - Add a Settings Option

Use Context Bridge & ipcRenderer to listen to Settings Option

Add a Quit Button (only for Electron)

Removing App Data (LocalStorage etc)

Listen for Quit Event and Quit the App

Generate App Icon with Icon Genie

Build for Production

Virtual Machine (Parallels or VirtualBox)

Add Settings Option to File Menu

Build the Windows Version (& setup NPM Script)

Launch app on iOS Simulator for Development

Install Xcode

src-capacitor folder

Inspect with Safari & Fix Transparent Balance

Fix Header Title & Add Entry Form

Entry - Amount Amount Validation

Add Entry Form - Amount Validation

Disable Auto Focus on Capacitor & Fix Validation

Directive - Auto Focus - delay the autofocus on Capacitor

Capacitor Plugin - Dialog - Show Native Dialog

Dialog Plugin - Customize the Dialog

Generate Icons & Splash Screens with IconGenie

Install the Splash Screen Plugin

Launch on Different Device Simulators

Develop on a Real iOS Device

Build for Production

Add Android to your Path

Install Android Studio & SDK

Setup Virtual Device

Launch on Android Simulator

Debug with Chrome Inspect

Generate your Android Icon & Splash Screen with Icon Genie

Fix Status & Navigation Bar Color

Launch on Real Android Device

Build the App for Production

Bonus Video Your Suggestions & Course Round Up