1: Introduction
2: Getting started
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
7: Vuex - State Management - Setting Up
8: Vuex - Actions & Mutations
9: Add Task - Forms, Fields & Validation
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)
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
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
20: Firebase - Reading Data
21: Firebase - Writing Data
22: Firebase - Improve The Loading Experience
23: Firebase - Multiple Users & Database Rules
24: Firebase - Handle Errors & Show Notifications
25: Platforms - Web
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)
30: Course Round Up
31: Bonus Lectures
