Vue 3 & Composition API Basics | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

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

1 Introduction

Introduction & Course App - Moneyballs (2:46)
What is Quasar? (1:50)
Vue 3 & Composition API Basics (0:25)
Editor & Software Setup (0:58)
Chrome & Vue Devtools (0:31)

2 Getting Started

Install Node.js and Quasar CLI (1:51)
Create & launch a new Quasar Project in the Browser (2:14)
Folder structure - Layouts, Pages, Routes & more (3:22)
Download Source Code

3 Layout, Pages & Navigation

Customize Layout (4:51)
Colors & Style (2:31)
Pages & Routes (2:35)
Navigation (4:30)
Active Navigation State (2:13)
Improve Drawer width and Breakpoint (2:26)
Download Source Code

4 Entries Page Design

Entries List (5:44)
Currency formatting (6:43)
Composable - useCurrencify (2:05)
Composable - useAmountColorClass (3:53)
Improve the Entry Text (2:23)
Add Entry Form (9:39)
Balance Bar (4:17)
Computed Property - Balance (5:50)
Download Source Code

5 Add Entry

Connect Fields to Reactive Object (1:39)
Submit Form & Add Entry (3:48)
Fix the Balance Error (1:59)
Reset Form & Tidy Code (4:25)
Refocus Name Field (1:52)
Download Source Code

6 Swipe to Delete Entry

Swipe to Delete with SlideItem (4:45)
Prompt before Delete (6:33)
Delete the Entry (3:35)
Improve the Dialog Message with HTML (4:15)
Show a Deleted Notification (2:41)
Download Source Code

7 Pinia - Setup Store

State Management & Pinia (2:32)
Options vs Setup Stores (4:34)
Setup a Pinia Setup Store (2:29)
Move Data into Pinia State (4:58)
Move Computed Balance into Pinia Getter (2:02)
Add Entry Pinia Action (6:10)
Delete Entry Pinia Action (2:24)
Tidy Up the Entries Page (1:46)
Download Source Code

8 Child Components

Balance (3:15)
Add Entry (2:53)
Entry (7:09)
Nothing Here Fallback (3:34)
Download Source Code

9 Edit Name & Amount

Setup QPopupEdit for Name (6:28)
QPopupEdit - Customization & Style (3:50)
Setup QPopupEdit for Amount (1:26)
Update the Name & Amount (6:52)
Download Source Code

10 Mark as Paid

Mark as Paid (4:35)
Paid Entry Style (2:08)
Display the Paid Balance (2:43)
Paid Balance Getter (4:35)
Download Source Code

11 Sort Entries

Install Sortable.js (Vue 3 version) (4:37)
Show Sort Handles (2:46)
Add a Toggle Button for Sort Handles (4:29)
Only Sort on Handles (1:36)
Update the State on Reorder (4:47)
Fix the Style (4:07)
Download Source Code

12 Use Directives & Transitions to Improve the Experience

Directive - selectAll (6:33)
Context Menu Issue (1:34)
Transition - Nothing Here (3:33)
Transition - Balance Bar (2:35)
Download Source Code

13 Settings Page

Create a Settings Store (2:24)
Prompt to Delete Toggle (5:05)
Make the Delete Prompt Optional (3:59)
Show Running Balance - Setting & Styles (6:23)
Show Running Balance - Getter (6:43)
Show Running Balance - Fix Style Issues (4:37)
Change Currency Symbol (3:23)
Update useCurrencify Composable (1:41)
Download Source Code

14 Dark Mode

Add Dark Mode Settings (5:42)
Dark Plugin (3:00)
Paid Entry Styles (3:43)
Composable - useLightOrDark (4:08)
Dark & Light CSS Classes (2:24)
Add Entry Form Style (1:18)
Remove Shadows in Dark Mode (2:26)
Darker Primary Color (3:17)
Nothing Here Component & Other Tweaks (2:05)
Download Source Code

15 LocalStorage - Save our Data

Save Settings Data (4:45)
Load Settings on App Start (4:01)
Save & Load Entries Data (3:37)
Fix Strange Sort / Delete Issue (7:54)
Download Source Code

16 Platforms - Web

Icon Genie - Introduction & Installation (1:16)
Create the Source Icon with Figma (or just download it) (4:06)
Generate Icons with Icon Genie (2:36)
Create an NPM Script for our Command (1:22)
Build and Deploy App to the Web (4:06)
Download Source Code

17 Platforms - Mac (Electron)

Add the Mac Platform (3:07)
Electron Main Process file & Tidying Up (5:00)
Customize Browser Window Settings (2:49)
Make Menu Customizable with a Menu Template (3:01)
Put Menu Template into Separate File (2:30)
Menu - Add a Settings Option (4:56)
Use Context Bridge & ipcRenderer to listen to Settings Option (7:33)
Add a Settings Keyboard Shortcut (1:20)
Add a Quit Button (only for Electron) (7:10)
Listen for Quit Event and Quit the App (4:29)
Removing App Data (LocalStorage etc) (1:23)
Generate App Icon with Icon Genie (0:51)
Build for Production (2:43)
Download Source Code

18 Platforms - Windows (Electron)

Virtual Machine (Parallels or VirtualBox) (1:17)
Build the Windows Version (& setup NPM Script) (5:11)
Add Settings Option to File Menu (2:05)
Download Source Code

19 Platforms - iOS (Capacitor)

Install Xcode (2:58)
Launch app on iOS Simulator for Development (1:26)
src-capacitor folder (1:12)
Inspect with Safari & Fix Transparent Balance (2:34)
Fix Header Title & Add Entry Form (4:37)
Add Entry Form - Amount Validation (5:40)
Entry - Amount Amount Validation (2:16)
Disable Auto Focus on Capacitor & Fix Validation (4:17)
Directive - Auto Focus - delay the autofocus on Capacitor (3:56)
Capacitor Plugin - Dialog - Show Native Dialog (5:12)
Dialog Plugin - Customize the Dialog (6:14)
Generate Icons & Splash Screens with IconGenie (1:37)
Install the Splash Screen Plugin (4:41)
Launch on Different Device Simulators (1:25)
Develop on a Real iOS Device (2:52)
Build for Production (2:37)
Download Source Code

20 Platforms - Android (Capacitor)

Install Android Studio & SDK (0:52)
Add Android to your Path (1:24)
Setup Virtual Device (2:01)
Launch on Android Simulator (2:26)
Fix Status & Navigation Bar Color (6:21)
Debug with Chrome Inspect (0:40)
Generate your Android Icon & Splash Screen with Icon Genie (1:20)
Launch on Real Android Device (2:20)
Build the App for Production (1:20)
Download Source Code

21 Course Round Up

Bonus Video: Your Suggestions & Course Round Up (1:25)

Teach online with

Vue 3 & Composition API Basics

Complete and Continue

Discussion

2 comments