Introduction
  • Introduction & Course App: Awesome Todo
  • What is Quasar?
  • What is Vue.js?
Getting started
  • Module Introduction
  • Install Node.js and Quasar CLI
  • Create & launch a new Quasar Project in the Browser
  • Auto-import Components & Directives
  • Folder structure - Layouts, Pages, Routes & more
Vue.js Basics
  • Module Introduction
  • Anatomy of a Vue Single File Component
  • Binding Data to the View
  • Two-way Data Binding with v-model
  • Events & Methods - Click
  • Events - Keyboard & more
  • Showing and Hiding Elements - v-show
  • Conditional Rendering - v-if & v-else
  • Computed Properties
  • Filters
  • Directives
  • Binding to Attributes & CSS
  • Lifecycle Hooks - Introduction
  • Lifecycle Hooks - In Action
  • Refs
  • Practise Vue.js Basics
Vue.js Lists and Components
  • Module Introduction
  • Displaying Lists with v-for
  • Displaying more details
  • Child Components
  • Passing Data to Child Components - Props
  • Passing Data to Child Components - Slots
  • Keys
  • Practise Vue.js Lists & Components
Start building the Awesome Todo app
  • Module Introduction
  • Pages and Routes
  • Add Page Navigation to Sidebar (Drawer)
  • Tab Navigation for Mobile
  • Consolidating Navigation Data
  • Only show Drawer on Desktop, Tabs on Mobile
  • Adding some Style to the Layout
  • Add SCSS support
  • Customise Theme with Theme Builder
  • Module Code
Create the List of Tasks
  • Module Introduction
  • Display a List of Tasks
  • Add Due Date and Time
  • Add some Style to the List of Tasks
  • Module Code
Vuex - State Management - Setting Up
  • Introduction to Vuex
  • Setup a Vuex Store
  • Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension
  • Create a Getter for the Tasks Data
  • Change Tasks Array into an Object Structure
  • Put Task into a Child Component
  • Module Code
Vuex - Actions & Mutations
  • Module Introduction
  • Set Completed Status in Vuex Store
  • Delete Task - Add Delete Button & Confirm Dialog
  • Delete Task - Delete the Task from the State
  • Module Code
Add Task - Forms, Fields & Validation
  • Module Introduction
  • Add Task - Button & Modal
  • Add Task - Customize the Modal
  • Add the Fields
  • Form Validation & Submission
  • Vuex - Add Task when Form Submitted
  • A Few Improvements
  • Module Code
Edit Task - Child Components in-depth, Update and Sync, Slots
  • Module Introduction
  • Add Task - Reusable Components (1/5): Modal Header
  • Add Task - Reusable Components (2/5): Task Name
  • Add Task - Reusable Components (3/5): Due Date
  • Add Task - Reusable Components (4/5): Due Time
  • Add Task - Reusable Components (5/5): Buttons
  • Edit Task - Add the Button & Show the Modal
  • Edit Task - Customise & Setup the Modal
  • Module Code
  • Practice Vuex, Forms, Quasar Components & Vue.js
Split Tasks into "Todo" and "Completed" Sections
  • Module Introduction
  • Create Getters for Todo and Completed Tasks
  • Display Todo and Completed Tasks in Separate Lists
  • Add Headings to the Task Lists
  • Make the Heading Background Color Adjustable
  • Conditionally Show & Hide the Task Lists
  • Add a "No tasks to do today!" Banner
  • Use Global Event Bus to fix the "No tasks" Banner Button
  • Module Code
Add a Search Bar
  • Module Introduction
  • Add the Search Bar Markup