Anatomy of a Vue Single File Component | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase)

1: Introduction

Introduction & Course App: Awesome Todo (3:26)
What is Quasar? (3:30)
What is Vue.js? (7:16)

2: Getting started

Module Introduction (0:25)
Install Node.js and Quasar CLI (1:40)
Create & launch a new Quasar Project in the Browser (3:35)
Update: Quasar V1 Documentation
Auto-import Components & Directives
Folder structure - Layouts, Pages, Routes & more (3:26)

3: Vue.js Basics

Module Introduction (0:37)
Anatomy of a Vue Single File Component (1:55)
Binding Data to the View (1:55)
Two-way Data Binding with v-model (0:59)
Events & Methods - Click (2:31)
Events - Keyboard & more (5:42)
Showing and Hiding Elements - v-show (2:23)
Conditional Rendering - v-if & v-else (2:43)
Computed Properties (5:38)
Filters (3:23)
Directives (2:33)
Binding to Attributes & CSS (5:11)
Lifecycle Hooks - Introduction (2:02)
Lifecycle Hooks - In Action (3:15)
Refs (4:15)
Assignment 1: Practise Vue.js Basics (3:02)
Assignment 1: Practise Vue.js Basics - Solution (18:42)

4: Vue.js Lists and Components

Module Introduction (0:49)
Displaying Lists with v-for (2:25)
Displaying more details (5:17)
Child Components (4:03)
Passing Data to Child Components - Props (2:10)
Passing Data to Child Components - Slots (0:52)
Keys (1:39)
Assignment 2: Practise Vue.js Lists & Components (2:15)
Assignment 2: Practise Vue.js Lists & Components - Solution (9:27)

5: Start building the Awesome Todo app

Module Introduction (0:20)
Pages and Routes (4:04)
Add Page Navigation to Sidebar (Drawer) (7:00)
Tab Navigation for Mobile (6:11)
Consolidating Navigation Data (5:23)
Only show Drawer on Desktop, Tabs on Mobile (3:51)
Adding some Style to the Layout (7:21)
Add SCSS support (2:01)
Customise Theme with Theme Builder (1:43)
Module Code

6: Create the List of Tasks

Module Introduction (0:22)
Display a List of Tasks (7:15)
Add Due Date and Time (7:31)
Add some Style to the List of Tasks (4:03)
Module Code

7: Vuex - State Management - Setting Up

Introduction to Vuex (3:38)
Setup a Vuex Store (3:05)
Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension (2:15)
Create a Getter for the Tasks Data (4:01)
Change Tasks Array into an Object Structure (3:00)
Put Task into a Child Component (4:07)
Module Code

8: Vuex - Actions & Mutations

Module Introduction (0:23)
Set Completed Status in Vuex Store (10:16)
Delete Task - Add Delete Button & Confirm Dialog (6:20)
Delete Task - Delete the Task from the State (4:22)
Module Code

9: Add Task - Forms, Fields & Validation

Module Introduction (0:34)
Add Task - Button & Modal (8:00)
Add Task - Customize the Modal (4:07)
Add the Fields (9:02)
Form Validation & Submission (8:24)
Vuex - Add Task when Form Submitted (10:11)
A Few Improvements (12:40)
Module Code

10: Edit Task - Child Components in-depth, Update and Sync, Slots

Module Introduction (0:27)
Add Task - Reusable Components (1/5): Modal Header (3:15)
Add Task - Reusable Components (2/5): Task Name (5:08)
Add Task - Reusable Components (3/5): Due Date (3:55)
Add Task - Reusable Components (4/5): Due Time (2:42)
Add Task - Reusable Components (5/5): Buttons (2:58)
Edit Task - Add the Button & Show the Modal (4:09)
Edit Task - Customise & Setup the Modal (5:59)
Module Code
Assignment 3: Practice Vuex, Forms, Quasar Components & Vue.js (4:36)
Assignment 3: Practice Vuex, Forms, Quasar Components & Vue.js - Solution (41:31)

11: Split Tasks into "Todo" and "Completed" Sections

Module Introduction (0:32)
Create Getters for Todo and Completed Tasks (5:46)
Display Todo and Completed Tasks in Separate Lists (5:36)
Add Headings to the Task Lists (7:25)
Make the Heading Background Color Adjustable (2:36)
Conditionally Show & Hide the Task Lists (1:28)
Add a "No tasks to do today!" Banner (4:04)
Use Global Event Bus to fix the "No tasks" Banner Button (5:38)
Module Code

12: Add a Search Bar

Module Introduction (0:14)
Add the Search Bar Markup (3:33)
Connect Search Bar to Vuex State with mapState (2:20)
Use a Computed Property Setter to set the Vuex search value (1:29)
Setup an Action & Mutation to set the search property (2:21)
Filter the Tasks based on Search Value (6:27)
Display “No search results” & Hide the “No tasks today” Banner (3:48)
Module Code

13: Add a Sort Dropdown (to sort Tasks by Name / Due Date)

Module Introduction (0:10)
Add Sorting Getter to Vuex Store (8:45)
Make the Sort Criteria Configurable (1:14)
Add a Sort Dropdown Component to the Page (4:38)
Sort Dropdown - Configure the Options (5:18)
Link the Sort Dropdown to the Vuex Store State (4:11)
Module Code

14: Improve the app with Transitions, Directives, Filters, Mixins & Scroll Area

Module Introduction (0:37)
Custom Directive - Select All Text in Input when Clicked (5:00)
Custom Directive - Make it Global! (2:51)
Clear the Search Field when Esc pressed (1:11)
Click and Hold a Task to Edit with v-touch-hold Directive (2:57)
Filter - Format the Date Nicely (3:27)
Filter - Highlight the Search Query on Matching Tasks (8:51)
Mixin - Combine Duplicated Code on Add / Edit Task into Mixin (4:23)
Transitions - Animate the Showing & Hiding of Components (6:07)
Add a Scroll Area (6:22)
Enable clicking beside the Add Task button (1:44)
Module Code

15: Settings Page

Module Introduction (0:44)
Add a "Show 12 hour time format" Setting (4:21)
Vuex - Create a Settings Store (3:05)
Add a Computed Getter & Setter (3:04)
Format the Time with a Computed Property (5:43)
Add a "Show tasks in one list" Setting (7:19)
Make the Settings Persistent using LocalStorage Plugin (7:00)
Get & Apply the LocalStorage Settings on App Load (4:21)
Add a "More" Section and a Help Page (5:03)
Add a "Visit our website" Link with openURL Utility (1:38)
Add an "Email us" Link (1:29)
Module Code

16: Create a Login & Register Page

Module Introduction (0:19)
Create a Login & Register Page (and Route) (2:47)
Create Tab Panels for Login & Register (3:44)
Register - Create Component & Add a Banner (2:30)
Register - Add Email/Password Fields & Button (4:14)
Register - Form Validation (4:37)
Register - Submit Form if Valid (1:52)
Login - Reuse the Register Component (3:07)
Login / Register - Customise the Banner (2:31)
Module Code

17: Firebase - Introduction

Introduction to Firebase (4:07)
How we’re going to use Firebase (2:48)
Create a Firebase Project (4:06)
Setup Authentication (1:35)

18: Firebase - Authentication

Module Introduction (0:36)
Add Firebase to the Project using Boot File (5:47)
Vuex - Create an Auth Store (1:10)
Register User (5:31)
Login User (2:21)
Add Logout Button - Show only when User Logged In (5:44)
Logout Button - Log the User Out (3:03)
Redirect on Log In / Log Out (3:12)
Fix the NavigationDuplicated error
Navigation Guards - Protect Routes when Logged Out (2:30)
Navigation Guards - Create a Boot File (5:48)
Handling Errors (4:55)
Show a Loading Overlay when Logging In (3:37)
Module Code

19: Firebase - Setup the Data Structure

Module Introduction (0:26)
Data Structure - Design (3:25)
Data Structure - Add to Firebase using Import (2:54)

20: Firebase - Reading Data

Module Introduction (0:19)
Read Data when user Logs In (3:16)
Connect to the Database (1:24)
Read Data - When Task Added (7:31)
Read Data - When Task Updated (2:51)
Read Data - When Task Deleted (2:27)
Module Code

21: Firebase - Writing Data

Module Introduction (0:11)
Write Data - When Task Added (5:01)
Write Data - When Task Updated (2:13)
Write Data - When Task Deleted (1:51)
Module Code

22: Firebase - Improve The Loading Experience

Module Introduction (0:10)
Add a Loading View for the Todo Page (3:13)
Make the Loading View Pretty (1:32)
Hide Loading View when Tasks Downloaded (3:07)
Module Code

23: Firebase - Multiple Users & Database Rules

Module Introduction (0:20)
Clear the State after User Logs Out (4:05)
Update the Firebase Database Rules (9:57)
Module Code

24: Firebase - Handle Errors & Show Notifications

Module Introduction (0:15)
Handle Write Errors (3:45)
Handle Read Errors (1:23)
Add Notifications (6:40)
Module Code
Assignment 4: Practice Firebase (6:16)
Assignment 4: Practice Firebase - Solution (64:41)

25: Platforms - Web

Module Introduction (0:18)
Icon Genie - Introduction & Installation (1:39)
Create the Source Icon (or just download it) (4:22)
Generate Icons with Icon Genie (2:56)
Create an NPM Script for our Command (1:04)
Build and Deploy App to the Web (3:29)
Module Code

26: Platforms - Mac (Electron)

READ THIS If you don't have a Mac
Module Introduction (0:50)
Add the Mac Platform (1:47)
Fix Style Issues (7:12)
Electron Main Process file & Tidying Up (4:56)
Customise Browser Window Settings (1:59)
Make Menu Customizable with a Menu Template (4:14)
Put the Menu Template into a Separate File (2:28)
Menu - Add a Settings Option (3:29)
Menu - Listen to Settings Option with IPC Receive / Platform Detection (3:17)
Add a Keyboard Shortcut to the Settings Menu Option (2:01)
Add a Quit Button to the Drawer with IPC send (4:34)
Listen for the Quit Event and Quit the App (1:20)
Removing App Data (LocalStorage etc) (2:09)
Add an App Icon (1:28)
Build for Production (2:16)
Security concerns for Electron apps (0:34)
Module Code

27: Platforms - Windows (Electron)

READ THIS If you're developing on a Windows Computer
Module introduction (0:19)
Install VirtualBox (1:14)
Install Windows 10 Virtual Machine (1:24)
Setup Virtual Machine - Enable File Sharing (2:35)
How to work on the Windows version of your app (0:58)
Build the Windows version (4:51)
Menu - Add File Menu with Settings option (3:25)
Generate your Windows Icon with Icon Genie
Module Code

28: Platforms - iOS (Cordova)

Module Introduction (0:28)
Install Cordova and Xcode (1:50)
Launch the app on iOS Simulator for Development (4:44)
src-cordova folder (2:04)
Add iOS Statusbar and Footer Padding / Safari Dev Tools (4:50)
Fix the Email Input (1:21)
Fix the Task List (2:56)
Auto Focus - Fix Auto Focus issue on Add / Edit Task Modals (3:19)
Auto Focus - config.xml - Enable Automatic Input Focussing (3:43)
Auto Focus - Limit the Focus Delay to only Cordova Platform (2:09)
Auto Focus - Make the Delay Period Configurable (5:52)
Cordova Plugins - InAppBrowser (2:01)
Generate Icons & Splashscreens with Icon Genie (3:45)
Simulator - Run on Different iOS Devices (3:12)
Develop on a Real iOS Device (4:59)
Build the App for Production (1:28)
Module Code

29: Platforms - Android (Cordova)

Module Introduction (0:20)
Install Android Studio & SDK (1:37)
Setup Virtual Device (1:49)
Add Android to your Path (2:57)
Generate your Android Icon & Splashscreen with Icon Genie
Launch on Android Simulator (9:31)
Build the App for Production (0:56)
Module Code

30: Course Round Up

Course Round Up (2:55)
Update: Quasar V2, Vue 3 & Composition API (0:32)

31: Bonus Lectures

More Content from Me!
My VSCode Extension - "Split HTML Attributes"

Teach online with

Anatomy of a Vue Single File Component

Complete and Continue

Discussion

0 comments