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

Install dependencies and set up the Quasar CLI to create and run a Quasar project in the browser, then explore the project folder structure.

Install Node.js from node.org (stable version), install the Quasar CLI with npm -g, and create your first Quasar project.

Bind data from the component's data object to the view by defining a data function, outputting properties with mustache syntax, and seeing the view update when state changes.

Use the v-show directive to conditionally display a message based on its length, showing when the message has content and hiding when it is empty, with a border for clarity.

Learn how v-if enables conditional rendering in Vue to remove elements from the DOM instead of just hiding them with v-show, and use v-else for alternate content.

Create a custom autofocus directive in Vue by naming it autofocus, using the inserted hook to focus the input on load, and verify behavior via the console.

Explore the Vue lifecycle hooks from before create to destroyed, including created, before output, mounted, before update, updated, and destroyed, to initialize, update, and clean up components.

Explore how to render lists of data, such as articles, with the v-for directive and build modular UIs using parent and child components, passing data via props.

Break elements into child components by creating a new child component, importing it, registering as task, and passing data from the index view to the child to fix undefined errors.

Learn to pass data from a parent component to a child component using props, including sending task data and an index, by defining a props array and importing the prop.

Begin the module by configuring pages, groups, and desktop drawer navigation, mobile bottom navigation, then apply styles and customize with the same builder.

Learn to create and connect pages and routes in a Quasar Vue app, configuring a to-do page and a settings page with proper paths such as / and /settings.

Consolidate navigation data into a shared array, render top and drawer menus with v-for, bind label, icon, and to, and add keys to resolve warnings.

Learn to conditionally render navigation: show the drawer on desktop and tablet, hide on mobile using a breakpoint and media query, enabling responsive quasar layouts.

Learn to add scss support to a quasar v1 app by installing necessary packages and enabling scss in the layout style tag to fix nested styles.

In this module, we build a to do page listing tasks with name, due date, and due time using Quasar components, pulled from an array, with styling and completion toggles.

Restructure tasks from an array into an object keyed by id to match Firebase storage, then expose the id as a display key in the loop.

Create a pop up form to capture task name, due date, and due time by binding a taskToSubmit object to Quasar input, date picker, and time picker with labeled fields.

Learn to submit a task via Vuex by generating a unique id, mutating the store with Vue.set, and emitting events to close the modal after validation.

Introduce the module workflow for editing tasks, adding an edit button to each task, and opening an edit task modal built from reusable components based on the test model.

Learn to build reusable button components in a Quasar Vue 2 app by extracting a child modal, wiring it through refs from the parent, and handling task submission and validation.

Open edit task modal and load task data into form, then pass the task and id as props and update via store action and mutation for title and due date.