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

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

image description

What you will learn

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


Section 1: Introduction

Section 2: Getting started

Section 3: Vue.js Basics

Section 4: Vue.js Lists and Components

Section 5: Start building the Awesome Todo app

Section 6: Create the List of Tasks

Section 7: Vuex - State Management - Setting Up

Section 8: Vuex - Actions & Mutations

Section 9: Add Task - Forms, Fields & Validation

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

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

Section 12: Add a Search Bar

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

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

Section 15: Settings Page

Section 16: Create a Login & Register Page

Section 17: Firebase - Introduction

Section 18: Firebase - Authentication

Section 19: Firebase - Setup the Data Structure

Section 20: Firebase - Reading Data

Section 21: Firebase - Writing Data

Section 22: Firebase - Improve The Loading Experience

Section 23: Firebase - Multiple Users & Database Rules

Section 24: Firebase - Handle Errors & Show Notifications

Section 25: Platforms - Web

Section 26: Platforms - Mac (Electron)

Section 27: Platforms - Windows (Electron)

Section 28: Platforms - iOS (Cordova)

Section 29: Platforms - Android (Cordova)

Course Description

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


  • 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


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.

Who this course is for:

  • 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)

Show moreShow less