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.

Explore binding data in your data object to the view, respond to clicks and keyboard events, fire methods, and control element visibility using computed properties, filters, and directives.

Explore the anatomy of a Quasar Vue single-file component by examining the template, script, and style sections, editing a page, and using hot reload across browser and mobile apps.

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.

Learn how computed properties optimize data displays by replacing methods that run on every view update, using message and counter examples to demonstrate efficiency in Vue Quasar apps.

Define a filters property and a message lowercase filter that returns value.toLowerCase, then apply it in the template to render lowercase text. Filters have limited access compared to computed properties.

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.

Demonstrate Vue lifecycle hooks in a Quasar app by logging before create, created, before mount, mounted, before update, updated, before destroy, and destroyed. Observe how navigation triggers destruction.

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.

Convert tasks to objects with name, due date, and due time; use v-for to show details and index, then delete a task with splice based on its index.

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.

Learn how to pass data from a parent component to a child component using slots, enabling dynamic task name rendering through slot content.

Learn how to assign explicit keys to looped items using a unique id with the column key directive to prevent misupdates when array items reorder and resolve the v4 warning.

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.

Learn to implement mobile tab navigation using Quasar v1, with q-tabs and Vue Router, by configuring layout and linking to the todo and settings pages.

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.

Style the Quasar layout by configuring the header, left drawer, and color palette with the layout builder, then export and apply the primary color and active link styles.

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.

Customize your Quasar theme using the built-in theme builder to adjust primary and other colors, export the palette, and paste the variables into your project to apply the new colors.

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.

Create a dynamic to-do list by defining a tasks array with id, name and completed, then render with quasar list and q checkbox with model binding to toggle completion.

Add due date and due time to tasks using Quasar components, place dates on the right with row and column layouts, and use icons for a polished interface.

Enhance the task list visuals by adding item separators, applying orange backgrounds for incomplete items and green for completed ones, and striking through completed task text.

Learn how Vuex provides a centralized store to manage state in Vue apps, using getters, actions, and mutations to share data and update components reactively.

Learn how to add tasks data to the Vuex store, inspect state with the Vue Devtools extension, and create a getter to render store data on the page.

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.

Learn to modify the state in the view store using actions and mutations, expanding how you manage the tasks data retrieved by getters and displayed on the page.

Learn to update a task’s completed status in a Vuex store by dispatching an action with a payload, committing a mutation, and applying updates with object.assign.

Add a delete button to each task using a dense red Quasar button with a delete icon, implement a confirm dialog via the Quasar plugin, and stop event propagation.

Create a delete task action and mutation to remove a task from state by id, and commit the mutation with the id using the built-in view delete.

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.

Enable autofocus for the modal, use v-if with object keys to hide empty lists, and implement clearable due date and due time fields with responsive icons in a Quasar app.

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.

Create a reusable Model Due Date component in the shared folder. Pass the due date as a prop and emit a clear event to reset it in the parent task.

Learn to extract a due time field into a reusable component in a Quasar Vue 2 project, wiring props, v-model syncing, and update events for a clean task-add flow.

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.