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

Use Quasar V1, Vue JS 2, Vuex & Firebase to build a Cross Platform App for Web, iOS, Android, Mac & Windows

What you'll learn
How to create a real-world, cross-platform app for web, iOS, Android, Mac and Windows using Quasar Framework V1 and Firebase
How to manage the state of your app using Vuex
How to create a back-end for the app using Firebase Realtime Database - including user authentication, reading and writing data
All the essentials of Quasar Framework V1 and VueJS 2
Requirements
Basic HTML and CSS knowledge is required
Basic JavaScript knowledge is beneficial but not required
Basic VueJS knowledge is beneficial but not required
A Mac for development is preferred
Description
In this course I’ll show you how to use Quasar Framework V1 (along with Vue JS 2, Vuex & Firebase) to create real-world, cross-platforms apps using a single Vue JS codebase; and get these apps production-ready and deployed to all the major platforms - Web, iOS, Android, Mac & Windows.Throughout this course we'll create a real-world app called Awesome Todo. In this app we can add, edit or delete tasks and mark them as completed.  We can also sort tasks by name or date and search through tasks using a search bar.It's also going to have a Settings page, with 2 real settings which change the way the app works - and which persist when app is closed and restarted (or the browser reloaded on the web version). It will also have a help page, a "visit our website" link and an "email us" link.The app will have its own back-end created using a Firebase Realtime Database. Users can register, log in and see their data sync in realtime across all of their devices.We'll get the app production ready for all the different platforms - web, iOS, Android, Mac & Windows.You'll learn all of the basics of Quasar Framework, including the Quasar CLI, Quasar Components, Quasar Plugins, Quasar Directives, Platform Detection, Layouts, Theming & various Quasar Utilities.I'll also show you all of the basics of Vue.js, including Data Binding, Events, Computed Properties, Components, Directives, Filters, Lists & Lifecycle Hooks.You'll learn how to manage the state of your app using Vuex, where I'll cover State, Mutations, Actions & Setters.I'll cover all of the basics of Firebase, including Authentication, Reading data, Writing data & protecting your data with Database Rules.By the end of this course, you will be able to create your own real-world apps, with real back-ends which work on all the different platforms.NOTE: This course is for Quasar V1 (with Vue 2). Quasar V2 (with Vue 3) is not covered in this course.

Overview

Section 1: Introduction

Lecture 1 Introduction & Course App: Awesome Todo

Lecture 2 What is Quasar?

Lecture 3 What is Vue.js?

Section 2: Getting started

Lecture 4 Module Introduction

Lecture 5 Install Node.js and Quasar CLI

Lecture 6 Create & launch a new Quasar Project in the Browser

Lecture 7 Update: Quasar V1 Documentation

Lecture 8 Auto-import Components & Directives

Lecture 9 Folder structure - Layouts, Pages, Routes & more

Section 3: Vue.js Basics

Lecture 10 Module Introduction

Lecture 11 Anatomy of a Vue Single File Component

Lecture 12 Binding Data to the View

Lecture 13 Two-way Data Binding with v-model

Lecture 14 Events & Methods - Click

Lecture 15 Events - Keyboard & more

Lecture 16 Showing and Hiding Elements - v-show

Lecture 17 Conditional Rendering - v-if & v-else

Lecture 18 Computed Properties

Lecture 19 Filters

Lecture 20 Directives

Lecture 21 Binding to Attributes & CSS

Lecture 22 Lifecycle Hooks - Introduction

Lecture 23 Lifecycle Hooks - In Action

Lecture 24 Refs

Section 4: Vue.js Lists and Components

Lecture 25 Module Introduction

Lecture 26 Displaying Lists with v-for

Lecture 27 Displaying more details

Lecture 28 Child Components

Lecture 29 Passing Data to Child Components - Props

Lecture 30 Passing Data to Child Components - Slots

Lecture 31 Keys

Section 5: Start building the Awesome Todo app

Lecture 32 Module Introduction

Lecture 33 Pages and Routes

Lecture 34 Add Page Navigation to Sidebar (Drawer)

Lecture 35 Tab Navigation for Mobile

Lecture 36 Consolidating Navigation Data

Lecture 37 Only show Drawer on Desktop, Tabs on Mobile

Lecture 38 Adding some Style to the Layout

Lecture 39 Add SCSS support

Lecture 40 Customise Theme with Theme Builder

Lecture 41 Module Code

Section 6: Create the List of Tasks

Lecture 42 Module Introduction

Lecture 43 Display a List of Tasks

Lecture 44 Add Due Date and Time

Lecture 45 Add some Style to the List of Tasks

Lecture 46 Module Code

Section 7: Vuex - State Management - Setting Up

Lecture 47 Introduction to Vuex

Lecture 48 Setup a Vuex Store

Lecture 49 Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension

Lecture 50 Create a Getter for the Tasks Data

Lecture 51 Change Tasks Array into an Object Structure

Lecture 52 Put Task into a Child Component

Lecture 53 Module Code

Section 8: Vuex - Actions & Mutations

Lecture 54 Module Introduction

Lecture 55 Set Completed Status in Vuex Store

Lecture 56 Delete Task - Add Delete Button & Confirm Dialog

Lecture 57 Delete Task - Delete the Task from the State

Lecture 58 Module Code

Section 9: Add Task - Forms, Fields & Validation

Lecture 59 Module Introduction

Lecture 60 Add Task - Button & Modal

Lecture 61 Add Task - Customize the Modal

Lecture 62 Add the Fields

Lecture 63 Form Validation & Submission

Lecture 64 Vuex - Add Task when Form Submitted

Lecture 65 A Few Improvements

Lecture 66 Module Code

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

Lecture 67 Module Introduction

Lecture 68 Add Task - Reusable Components (1/5): Modal Header

Lecture 69 Add Task - Reusable Components (2/5): Task Name

Lecture 70 Add Task - Reusable Components (3/5): Due Date

Lecture 71 Add Task - Reusable Components (4/5): Due Time

Lecture 72 Add Task - Reusable Components (5/5): Buttons

Lecture 73 Edit Task - Add the Button & Show the Modal

Lecture 74 Edit Task - Customise & Setup the Modal

Lecture 75 Module Code

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

Lecture 76 Module Introduction

Lecture 77 Create Getters for Todo and Completed Tasks

Lecture 78 Display Todo and Completed Tasks in Separate Lists

Lecture 79 Add Headings to the Task Lists

Lecture 80 Make the Heading Background Color Adjustable

Lecture 81 Conditionally Show & Hide the Task Lists

Lecture 82 Add a "No tasks to do today!" Banner

Lecture 83 Use Global Event Bus to fix the "No tasks" Banner Button

Lecture 84 Module Code

Section 12: Add a Search Bar

Lecture 85 Module Introduction

Lecture 86 Add the Search Bar Markup

Lecture 87 Connect Search Bar to Vuex State with mapState

Lecture 88 Use a Computed Property Setter to set the Vuex search value

Lecture 89 Setup an Action & Mutation to set the search property

Lecture 90 Filter the Tasks based on Search Value

Lecture 91 Display “No search results” & Hide the “No tasks today” Banner

Lecture 92 Module Code

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

Lecture 93 Module Introduction

Lecture 94 Add Sorting Getter to Vuex Store

Lecture 95 Make the Sort Criteria Configurable

Lecture 96 Add a Sort Dropdown Component to the Page

Lecture 97 Sort Dropdown - Configure the Options

Lecture 98 Link the Sort Dropdown to the Vuex Store State

Lecture 99 Module Code

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

Lecture 100 Module Introduction

Lecture 101 Custom Directive - Select All Text in Input when Clicked

Lecture 102 Custom Directive - Make it Global!

Lecture 103 Clear the Search Field when Esc pressed

Lecture 104 Click and Hold a Task to Edit with v-touch-hold Directive

Lecture 105 Filter - Format the Date Nicely

Lecture 106 Filter - Highlight the Search Query on Matching Tasks

Lecture 107 Mixin - Combine Duplicated Code on Add / Edit Task into Mixin

Lecture 108 Transitions - Animate the Showing & Hiding of Components

Lecture 109 Add a Scroll Area

Lecture 110 Enable clicking beside the Add Task button

Lecture 111 Module Code

Section 15: Settings Page

Lecture 112 Module Introduction

Lecture 113 Add a "Show 12 hour time format" Setting

Lecture 114 Vuex - Create a Settings Store

Lecture 115 Add a Computed Getter & Setter

Lecture 116 Format the Time with a Computed Property

Lecture 117 Add a "Show tasks in one list" Setting

Lecture 118 Make the Settings Persistent using LocalStorage Plugin

Lecture 119 Get & Apply the LocalStorage Settings on App Load

Lecture 120 Add a "More" Section and a Help Page

Lecture 121 Add a "Visit our website" Link with openURL Utility

Lecture 122 Add an "Email us" Link

Lecture 123 Module Code

Section 16: Create a Login & Register Page

Lecture 124 Module Introduction

Lecture 125 Create a Login & Register Page (and Route)

Lecture 126 Create Tab Panels for Login & Register

Lecture 127 Register - Create Component & Add a Banner

Lecture 128 Register - Add Email/Password Fields & Button

Lecture 129 Register - Form Validation

Lecture 130 Register - Submit Form if Valid

Lecture 131 Login - Reuse the Register Component

Lecture 132 Login / Register - Customise the Banner

Lecture 133 Module Code

Section 17: Firebase - Introduction

Lecture 134 Introduction to Firebase

Lecture 135 How we’re going to use Firebase

Lecture 136 Create a Firebase Project

Lecture 137 Setup Authentication

Section 18: Firebase - Authentication

Lecture 138 Module Introduction

Lecture 139 Add Firebase to the Project using Boot File

Lecture 140 Vuex - Create an Auth Store

Lecture 141 Register User

Lecture 142 Login User

Lecture 143 Add Logout Button - Show only when User Logged In

Lecture 144 Logout Button - Log the User Out

Lecture 145 Redirect on Log In / Log Out

Lecture 146 Fix the NavigationDuplicated error

Lecture 147 Navigation Guards - Protect Routes when Logged Out

Lecture 148 Navigation Guards - Create a Boot File

Lecture 149 Handling Errors

Lecture 150 Show a Loading Overlay when Logging In

Lecture 151 Module Code

Section 19: Firebase - Setup the Data Structure

Lecture 152 Module Introduction

Lecture 153 Data Structure - Design

Lecture 154 Data Structure - Add to Firebase using Import

Section 20: Firebase - Reading Data

Lecture 155 Module Introduction

Lecture 156 Read Data when user Logs In

Lecture 157 Connect to the Database

Lecture 158 Read Data - When Task Added

Lecture 159 Read Data - When Task Updated

Lecture 160 Read Data - When Task Deleted

Lecture 161 Module Code

Section 21: Firebase - Writing Data

Lecture 162 Module Introduction

Lecture 163 Write Data - When Task Added

Lecture 164 Write Data - When Task Updated

Lecture 165 Write Data - When Task Deleted

Lecture 166 Module Code

Section 22: Firebase - Improve The Loading Experience

Lecture 167 Module Introduction

Lecture 168 Add a Loading View for the Todo Page

Lecture 169 Make the Loading View Pretty

Lecture 170 Hide Loading View when Tasks Downloaded

Lecture 171 Module Code

Section 23: Firebase - Multiple Users & Database Rules

Lecture 172 Module Introduction

Lecture 173 Clear the State after User Logs Out

Lecture 174 Update the Firebase Database Rules

Lecture 175 Module Code

Section 24: Firebase - Handle Errors & Show Notifications

Lecture 176 Module Introduction

Lecture 177 Handle Write Errors

Lecture 178 Handle Read Errors

Lecture 179 Add Notifications

Lecture 180 Module Code

Section 25: Platforms - Web

Lecture 181 Module Introduction

Lecture 182 Icon Genie - Introduction & Installation

Lecture 183 Create the Source Icon (or just download it)

Lecture 184 Generate Icons with Icon Genie

Lecture 185 Create an NPM Script for our Command

Lecture 186 Build and Deploy App to the Web

Lecture 187 Module Code

Section 26: Platforms - Mac (Electron)

Lecture 188 READ THIS If you don't have a Mac

Lecture 189 Module Introduction

Lecture 190 Add the Mac Platform

Lecture 191 Fix Style Issues

Lecture 192 Electron Main Process file & Tidying Up

Lecture 193 Customise Browser Window Settings

Lecture 194 Make Menu Customizable with a Menu Template

Lecture 195 Put the Menu Template into a Separate File

Lecture 196 Menu - Add a Settings Option

Lecture 197 Menu - Listen to Settings Option with IPC Receive / Platform Detection

Lecture 198 Add a Keyboard Shortcut to the Settings Menu Option

Lecture 199 Add a Quit Button to the Drawer with IPC send

Lecture 200 Listen for the Quit Event and Quit the App

Lecture 201 Removing App Data (LocalStorage etc)

Lecture 202 Add an App Icon

Lecture 203 Build for Production

Lecture 204 Security concerns for Electron apps

Lecture 205 Module Code

Section 27: Platforms - Windows (Electron)

Lecture 206 READ THIS If you're developing on a Windows Computer

Lecture 207 Module introduction

Lecture 208 Install VirtualBox

Lecture 209 Install Windows 10 Virtual Machine

Lecture 210 Setup Virtual Machine - Enable File Sharing

Lecture 211 How to work on the Windows version of your app

Lecture 212 Build the Windows version

Lecture 213 Menu - Add File Menu with Settings option

Lecture 214 Generate your Windows Icon with Icon Genie

Lecture 215 Module Code

Section 28: Platforms - iOS (Cordova)

Lecture 216 Module Introduction

Lecture 217 Install Cordova and Xcode

Lecture 218 Launch the app on iOS Simulator for Development

Lecture 219 src-cordova folder

Lecture 220 Add iOS Statusbar and Footer Padding / Safari Dev Tools

Lecture 221 Fix the Email Input

Lecture 222 Fix the Task List

Lecture 223 Auto Focus - Fix Auto Focus issue on Add / Edit Task Modals

Lecture 224 Auto Focus - config.xml - Enable Automatic Input Focussing

Lecture 225 Auto Focus - Limit the Focus Delay to only Cordova Platform

Lecture 226 Auto Focus - Make the Delay Period Configurable

Lecture 227 Cordova Plugins - InAppBrowser

Lecture 228 Generate Icons & Splashscreens with Icon Genie

Lecture 229 Simulator - Run on Different iOS Devices

Lecture 230 Develop on a Real iOS Device

Lecture 231 Build the App for Production

Lecture 232 Module Code

Section 29: Platforms - Android (Cordova)

Lecture 233 Module Introduction

Lecture 234 Install Android Studio & SDK

Lecture 235 Setup Virtual Device

Lecture 236 Add Android to your Path

Lecture 237 Launch on Android Simulator

Lecture 238 Generate your Android Icon & Splashscreen with Icon Genie

Lecture 239 Build the App for Production

Lecture 240 Module Code

Section 30: Course Round Up

Lecture 241 Course Round Up

Lecture 242 Update: Quasar V2, Vue 3 & Composition API

Section 31: Bonus Lectures

Lecture 243 More Content from Me!

Lecture 244 My VSCode Extension - "Split HTML Attributes"

Section 32: ARCHIVE: 25 Platforms - Web

Lecture 245 Download all Icons and Splashscreens

Lecture 246 How I Created the Icon in Sketch (optional)

Lecture 247 Add the Icons to Awesome Todo

Lecture 248 Icon Genie - Generate Icons & Splashscreens Instantly!

Section 33: ARCHIVE: 26 Platforms - Mac (Electron)

Lecture 249 ARCHIVE: Make Menu Customizable with a Menu Template

Lecture 250 ARCHIVE: Put the Menu Template into a Separate File

Lecture 251 ARCHIVE: Add an App Icon

Lecture 252 ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!

Section 34: ARCHIVE: 27 Platforms - Windows (Electron)

Lecture 253 ARCHIVE: Add Icon

Lecture 254 ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!

Section 35: ARCHIVE: 28 Platforms - iOS (Cordova)

Lecture 255 ARCHIVE: Add App Icons

Lecture 256 ARCHIVE: Splashscreen - Create (optional)

Lecture 257 ARCHIVE: Splashscreen - Add to App

Lecture 258 ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!

Section 36: ARCHIVE: 29 Platforms - Android (Cordova)

Lecture 259 ARCHIVE: Add App Icons

Lecture 260 ARCHIVE: Icon Genie - Generate Icons & Splashscreens Instantly!

Lecture 261 ARCHIVE: Splashscreen - Create (optional)

Lecture 262 ARCHIVE: Splashscreen - Add to App

Anyone who wants to create real-world, cross platform apps using a single VueJS codebase.,Web Developers who want to use their existing skills to create a real-world app on many different platforms (Web, iOS, Android, Mac & Windows)