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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction & Course App: Awesome Todo

Lecture 2: What is Quasar?

Lecture 3: What is Vue.js?

Chapter 2: Getting started

Lecture 1: Module Introduction

Lecture 2: Install Node.js and Quasar CLI

Lecture 3: Create & launch a new Quasar Project in the Browser

Lecture 4: Update: Quasar V1 Documentation

Lecture 5: Auto-import Components & Directives

Lecture 6: Folder structure – Layouts, Pages, Routes & more

Chapter 3: Vue.js Basics

Lecture 1: Module Introduction

Lecture 2: Anatomy of a Vue Single File Component

Lecture 3: Binding Data to the View

Lecture 4: Two-way Data Binding with v-model

Lecture 5: Events & Methods – Click

Lecture 6: Events – Keyboard & more

Lecture 7: Showing and Hiding Elements – v-show

Lecture 8: Conditional Rendering – v-if & v-else

Lecture 9: Computed Properties

Lecture 10: Filters

Lecture 11: Directives

Lecture 12: Binding to Attributes & CSS

Lecture 13: Lifecycle Hooks – Introduction

Lecture 14: Lifecycle Hooks – In Action

Lecture 15: Refs

Chapter 4: Vue.js Lists and Components

Lecture 1: Module Introduction

Lecture 2: Displaying Lists with v-for

Lecture 3: Displaying more details

Lecture 4: Child Components

Lecture 5: Passing Data to Child Components – Props

Lecture 6: Passing Data to Child Components – Slots

Lecture 7: Keys

Chapter 5: Start building the Awesome Todo app

Lecture 1: Module Introduction

Lecture 2: Pages and Routes

Lecture 3: Add Page Navigation to Sidebar (Drawer)

Lecture 4: Tab Navigation for Mobile

Lecture 5: Consolidating Navigation Data

Lecture 6: Only show Drawer on Desktop, Tabs on Mobile

Lecture 7: Adding some Style to the Layout

Lecture 8: Add SCSS support

Lecture 9: Customise Theme with Theme Builder

Lecture 10: Module Code

Chapter 6: Create the List of Tasks

Lecture 1: Module Introduction

Lecture 2: Display a List of Tasks

Lecture 3: Add Due Date and Time

Lecture 4: Add some Style to the List of Tasks

Lecture 5: Module Code

Chapter 7: Vuex – State Management – Setting Up

Lecture 1: Introduction to Vuex

Lecture 2: Setup a Vuex Store

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

Lecture 4: Create a Getter for the Tasks Data

Lecture 5: Change Tasks Array into an Object Structure

Lecture 6: Put Task into a Child Component

Lecture 7: Module Code

Chapter 8: Vuex – Actions & Mutations

Lecture 1: Module Introduction

Lecture 2: Set Completed Status in Vuex Store

Lecture 3: Delete Task – Add Delete Button & Confirm Dialog

Lecture 4: Delete Task – Delete the Task from the State

Lecture 5: Module Code

Chapter 9: Add Task – Forms, Fields & Validation

Lecture 1: Module Introduction

Lecture 2: Add Task – Button & Modal

Lecture 3: Add Task – Customize the Modal

Lecture 4: Add the Fields

Lecture 5: Form Validation & Submission

Lecture 6: Vuex – Add Task when Form Submitted

Lecture 7: A Few Improvements

Lecture 8: Module Code

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

Lecture 1: Module Introduction

Lecture 2: Add Task – Reusable Components (1/5): Modal Header

Lecture 3: Add Task – Reusable Components (2/5): Task Name

Lecture 4: Add Task – Reusable Components (3/5): Due Date

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

Lecture 6: Add Task – Reusable Components (5/5): Buttons

Lecture 7: Edit Task – Add the Button & Show the Modal

Lecture 8: Edit Task – Customise & Setup the Modal

Lecture 9: Module Code

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

Lecture 1: Module Introduction

Lecture 2: Create Getters for Todo and Completed Tasks

Lecture 3: Display Todo and Completed Tasks in Separate Lists

Lecture 4: Add Headings to the Task Lists

Lecture 5: Make the Heading Background Color Adjustable

Lecture 6: Conditionally Show & Hide the Task Lists

Lecture 7: Add a "No tasks to do today!" Banner

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

Lecture 9: Module Code

Chapter 12: Add a Search Bar

Lecture 1: Module Introduction