Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps

Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps
Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 15 Hours | 11.8 GB

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

In this course I’ll show you how to use Quasar Framework (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.

What you’ll learn

  • How to create a real-world, cross-platform app for web, iOS, Android, Mac and Windows using Quasar Framework 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 and VueJS
Table of Contents

Introduction
1 Introduction & Course App Awesome Todo
2 What is Quasar
3 What is Vue.js

Getting started
4 Module Introduction
5 Install Node.js and Quasar CLI
6 Create & launch a new Quasar Project in the Browser
7 Auto-import Components & Directives
8 Folder structure – Layouts, Pages, Routes & more

Vue.js Basics
9 Module Introduction
10 Filters
11 Directives
12 Binding to Attributes & CSS
13 Lifecycle Hooks – Introduction
14 Lifecycle Hooks – In Action
15 Refs
16 Anatomy of a Vue Single File Component
17 Binding Data to the View
18 Two-way Data Binding with v-model
19 Events & Methods – Click
20 Events – Keyboard & more
21 Showing and Hiding Elements – v-show
22 Conditional Rendering – v-if & v-else
23 Computed Properties

Vue.js Lists and Components
24 Module Introduction
25 Displaying Lists with v-for
26 Displaying more details
27 Child Components
28 Passing Data to Child Components – Props
29 Passing Data to Child Components – Slots
30 Keys

Start building the Awesome Todo app
31 Module Introduction
32 Module Code
33 Pages and Routes
34 Add Page Navigation to Sidebar (Drawer)
35 Tab Navigation for Mobile
36 Consolidating Navigation Data
37 Only show Drawer on Desktop, Tabs on Mobile
38 Adding some Style to the Layout
39 Add SCSS support
40 Customise Theme with Theme Builder

Create the List of Tasks
41 Module Introduction
42 Display a List of Tasks
43 Add Due Date and Time
44 Add some Style to the List of Tasks
45 Module Code

Vuex – State Management – Setting Up
46 Introduction to Vuex
47 Setup a Vuex Store
48 Add Tasks Data to the Vuex Store Vue Devtools Chrome Extension
49 Create a Getter for the Tasks Data
50 Change Tasks Array into an Object Structure
51 Put Task into a Child Component
52 Module Code

Vuex – Actions & Mutations
53 Module Introduction
54 Set Completed Status in Vuex Store
55 Delete Task – Add Delete Button & Confirm Dialog
56 Delete Task – Delete the Task from the State
57 Module Code

Add Task – Forms, Fields & Validation
58 Module Introduction
59 Add Task – Button & Modal
60 Add Task – Customize the Modal
61 Add the Fields
62 Form Validation & Submission
63 Vuex – Add Task when Form Submitted
64 A Few Improvements
65 Module Code

Edit Task – Child Components in-depth, Update and Sync, Slots
66 Module Introduction
67 Add Task – Reusable Components (15) Modal Header
68 Add Task – Reusable Components (25) Task Name
69 Add Task – Reusable Components (35) Due Date
70 Add Task – Reusable Components (45) Due Time
71 Add Task – Reusable Components (55) Buttons
72 Edit Task – Add the Button & Show the Modal
73 Edit Task – Customise & Setup the Modal
74 Module Code

Split Tasks into Todo and Completed Sections
75 Module Introduction
76 Create Getters for Todo and Completed Tasks
77 Display Todo and Completed Tasks in Separate Lists
78 Add Headings to the Task Lists
79 Make the Heading Background Color Adjustable
80 Conditionally Show & Hide the Task Lists
81 Add a No tasks to do today! Banner
82 Use Global Event Bus to fix the No tasks Banner Button
83 Module Code

Add a Search Bar
84 Module Introduction
85 Add the Search Bar Markup
86 Connect Search Bar to Vuex State with mapState
87 Use a Computed Property Setter to set the Vuex search value
88 Setup an Action & Mutation to set the search property
89 Filter the Tasks based on Search Value
90 Display “No search results” & Hide the “No tasks today” Banner
91 Module Code

Add a Sort Dropdown (to sort Tasks by Name Due Date)
92 Module Introduction
93 Add Sorting Getter to Vuex Store
94 Make the Sort Criteria Configurable
95 Add a Sort Dropdown Component to the Page
96 Sort Dropdown – Configure the Options
97 Link the Sort Dropdown to the Vuex Store State
98 Module Code

Improve the app with Transitions, Directives, Filters, Mixins & Scroll Area
99 Module Introduction
100 Add a Scroll Area
101 Enable clicking beside the Add Task button
102 Module Code
103 Custom Directive – Select All Text in Input when Clicked
104 Custom Directive – Make it Global!
105 Clear the Search Field when Esc pressed
106 Click and Hold a Task to Edit with v-touch-hold Directive
107 Filter – Format the Date Nicely
108 Filter – Highlight the Search Query on Matching Tasks
109 Mixin – Combine Duplicated Code on Add Edit Task into Mixin
110 Transitions – Animate the Showing & Hiding of Components

Settings Page
111 Module Introduction
112 Add a Visit our website Link with openURL Utility
113 Add an Email us Link
114 Module Code
115 Add a Show 12 hour time format Setting
116 Vuex – Create a Settings Store
117 Add a Computed Getter & Setter
118 Format the Time with a Computed Property
119 Add a Show tasks in one list Setting
120 Make the Settings Persistent using LocalStorage Plugin
121 Get & Apply the LocalStorage Settings on App Load
122 Add a More Section and a Help Page

Create a Login & Register Page
123 Module Introduction
124 Module Code
125 Create a Login & Register Page (and Route)
126 Create Tab Panels for Login & Register
127 Register – Create Component & Add a Banner
128 Register – Add EmailPassword Fields & Button
129 Register – Form Validation
130 Register – Submit Form if Valid
131 Login – Reuse the Register Component
132 Login Register – Customise the Banner

Firebase – Introduction
133 Introduction to Firebase
134 How we’re going to use Firebase
135 Create a Firebase Project
136 Setup Authentication

Firebase – Authentication
137 Module Introduction
138 Navigation Guards – Protect Routes when Logged Out
139 Navigation Guards – Create a Boot File
140 Handling Errors
141 Show a Loading Overlay when Logging In
142 Module Code
143 Add Firebase to the Project using Boot File
144 Vuex – Create an Auth Store
145 Register User
146 Login User
147 Add Logout Button – Show only when User Logged In
148 Logout Button – Log the User Out
149 Redirect on Log In Log Out
150 Fix the NavigationDuplicated error

Firebase – Setup the Data Structure
151 Module Introduction
152 Data Structure – Design
153 Data Structure – Add to Firebase using Import

Firebase – Reading Data
154 Module Introduction
155 Read Data when user Logs In
156 Connect to the Database
157 Read Data – When Task Added
158 Read Data – When Task Updated
159 Read Data – When Task Deleted
160 Module Code

Firebase – Writing Data
161 Module Introduction
162 Write Data – When Task Added
163 Write Data – When Task Updated
164 Write Data – When Task Deleted
165 Module Code

Firebase – Improve The Loading Experience
166 Module Introduction
167 Add a Loading View for the Todo Page
168 Make the Loading View Pretty
169 Hide Loading View when Tasks Downloaded
170 Module Code

Firebase – Multiple Users & Database Rules
171 Module Introduction
172 Clear the State after User Logs Out
173 Update the Firebase Database Rules
174 Module Code

Firebase – Handle Errors & Show Notifications
175 Module Introduction
176 Handle Write Errors
177 Handle Read Errors
178 Add Notifications
179 Module Code

Platforms – Web
180 Module Introduction
181 Download all Icons and Splashscreens
182 How I Created the Icon in Sketch (optional)
183 Add the Icons to Awesome Todo
184 Icon Genie – Generate Icons & Splashscreens Instantly!
185 Build and Deploy App to the Web
186 Module Code

Platforms – Mac (Electron)
187 READ THIS If you don’t have a Mac
188 Menu – Listen to Settings Option with IPC Receive Platform Detection
189 Add a Keyboard Shortcut to the Settings Menu Option
190 Add a Quit Button to the Drawer with IPC send
191 Listen for the Quit Event and Quit the App
192 Removing App Data (LocalStorage etc)
193 Add an App Icon
194 Icon Genie – Generate Icons & Splashscreens Instantly!
195 Build for Production
196 Security concerns for Electron apps
197 Module Code
198 Module Introduction
199 Add the Mac Platform
200 Fix Style Issues
201 Electron Main Process file & Tidying Up
202 Customise Browser Window Settings
203 Make Menu Customizable with a Menu Template
204 Put the Menu Template into a Separate File
205 Menu – Add a Settings Option

Platforms – Windows (Electron)
206 READ THIS If you’re developing on a Windows Computer
207 Icon Genie – Generate Icons & Splashscreens Instantly!
208 Module Code
209 Module introduction
210 Install VirtualBox
211 Install Windows 10 Virtual Machine
212 Setup Virtual Machine – Enable File Sharing
213 How to work on the Windows version of your app
214 Build the Windows version
215 Menu – Add File Menu with Settings option
216 Add Icon

Platforms – iOS (Cordova)
217 Module Introduction
218 Auto Focus – Limit the Focus Delay to only Cordova Platform
219 Auto Focus – Make the Delay Period Configurable
220 Cordova Plugins – InAppBrowser
221 Add App Icons
222 Splashscreen – Create (optional)
223 Splashscreen – Add to App
224 Icon Genie – Generate Icons & Splashscreens Instantly!
225 Simulator – Run on Different iOS Devices
226 Develop on a Real iOS Device
227 Build the App for Production
228 Install Cordova and Xcode
229 Module Code
230 Launch the app on iOS Simulator for Development
231 src-cordova folder
232 Add iOS Statusbar and Footer Padding Safari Dev Tools
233 Fix the Email Input
234 Fix the Task List
235 Auto Focus – Fix Auto Focus issue on Add Edit Task Modals
236 Auto Focus – config.xml – Enable Automatic Input Focussing

Platforms – Android (Cordova)
237 Module Introduction
238 Build the App for Production
239 Module Code
240 Install Android Studio & SDK
241 Setup Virtual Device
242 Add Android to your Path
243 Launch on Android Simulator
244 Add App Icons
245 Icon Genie – Generate Icons & Splashscreens Instantly!
246 Splashscreen – Create (optional)
247 Splashscreen – Add to App

Course Round Up
248 Course Round Up

Bonus Videos
249 Icons & Splashscreens for Web, Mobile & Desktop apps Instantly with IconGenie!

More Content from Me!
250 More Content from Me!
251 My VSCode Extension – Split HTML Attributes