Vuetify 2: Create an App with Vue JS 2 & Vuex – in 5 Hours!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What is Vuetify?

Lecture 3: Editor & Software Setup

Chapter 2: Getting Started

Lecture 1: Install Node.js & Vue CLI

Lecture 2: Create a Vue Project & Add Vuetify

Lecture 3: Folder & File Structure

Lecture 4: Install Vue Devtools on Chrome

Lecture 5: Vue.js Basics

Lecture 6: Clean up the Project

Chapter 3: Layout, Pages & Routes

Lecture 1: Start with a Wireframe

Lecture 2: Setup the Drawer

Lecture 3: Setup Pages & Routes

Lecture 4: Get Pages Ready

Lecture 5: Header Styles

Lecture 6: Replace Image & Title

Lecture 7: Finished Module Code

Chapter 4: Todo Page

Lecture 1: Create a List of Tasks

Lecture 2: Add a Data Property for the Tasks

Lecture 3: Mark Task as Done

Lecture 4: Delete Task

Lecture 5: Add Task

Lecture 6: No Tasks Fallback

Lecture 7: Finished Module Code

Chapter 5: Vuex

Lecture 1: What is Vuex?

Lecture 2: Move Tasks into Vuex Store

Lecture 3: Move addTask() Method into Vuex Store

Lecture 4: Move doneTask() Method into Vuex Store

Lecture 5: Move deleteTask() Method into Vuex Store

Lecture 6: Finished Module Code

Chapter 6: Child Components

Lecture 1: Why Use Child Components?

Lecture 2: Create Add Task Field Child Component

Lecture 3: Create Task List Child Component

Lecture 4: Create Task Child Component

Lecture 5: Create “No Tasks” Child Component

Lecture 6: Finished Module Code

Chapter 7: Snackbars

Lecture 1: Create a Snackbar Component

Lecture 2: Show Snackbar when Task Added

Lecture 3: Show Snackbar when Task Deleted

Lecture 4: Make the Snackbar Text Dynamic

Lecture 5: Allow Snackbars to be Shown in Quick Succession

Lecture 6: Allow Snackbar to be Dismissed

Lecture 7: Finished Module Code

Chapter 8: Dialogs

Lecture 1: Show a “Prompt to Delete” Dialog

Lecture 2: Customize Dialog and Show on Delete Click

Lecture 3: Delete the Task when “Yes” Button Clicked

Lecture 4: Close the Dialog on “No” Click

Lecture 5: Finished Module Code

Chapter 9: Task Menu

Lecture 1: Add a Task Menu

Lecture 2: Add the Menu Items & Icons

Lecture 3: Handle Clicks

Lecture 4: Delete Task

Lecture 5: Finished Module Code

Chapter 10: Edit Task

Lecture 1: Create the Dialog

Lecture 2: Display Current Task Title in Dialog

Lecture 3: Save the Task

Lecture 4: Close the Dialog

Lecture 5: Field Validation

Lecture 6: Add Task Field Validation

Lecture 7: Show a Snackbar

Lecture 8: Finished Module Code

Chapter 11: Due Dates

Lecture 1: Setup the Data & Styles

Lecture 2: Filter the Date with date-fns

Lecture 3: Create the Dialog

Lecture 4: Show Dialog and Select Current Date

Lecture 5: Save Due Date & Close Dialog

Lecture 6: Finished Module Code

Chapter 12: Expanding Search

Lecture 1: Add the Search Field

Lecture 2: Improve the Style

Lecture 3: Close the Search Field

Lecture 4: Open on Focus, Close on Blur

Lecture 5: Add Animation

Lecture 6: Only Close if Empty

Lecture 7: Fix Header Issues

Lecture 8: Hook it up to Vuex State

Lecture 9: Create a Getter to Filter the Tasks

Lecture 10: Finished Module Code

Chapter 13: Live Date & Time

Lecture 1: Create a Live Date & Time Component

Lecture 2: Show the Real Date

Lecture 3: Display Full Date & Time and Make it Live

Lecture 4: Finished Module Code

Chapter 14: Beautify the Drawer

Lecture 1: Add an Image

Lecture 2: Add an Avatar

Lecture 3: Add Name & Username

Lecture 4: Show the Drawer by Default on Tablet & Above

Lecture 5: Finished Module Code

Chapter 15: Dynamic Page Titles & Environment Variables