Vue JS 3 Complete – Including Composition API & Pinia

Course Curriculum

Chapter 1: The Basics of Vue JS

Lecture 1: Setting up the Workspace

Lecture 2: Declarative Rendering and Data Objects

Lecture 3: Setting up Vue Dev Tools

Lecture 4: Directives and For Loops

Lecture 5: Event Handlers – The v-on Directive

Lecture 6: A Bug in Chrome Dev Tools

Lecture 7: Event Modifiers (Stop Propagation) and Attribute Binding

Lecture 8: Filling up The Order Details Section

Lecture 9: Working with Methods

Lecture 10: User Input and Two-Way Data Binding (Part 1)

Lecture 11: User Input and Two-Way Data Binding (Part 2)

Chapter 2: Project – To-Do List App

Lecture 1: Project Presentation – To-Do List App

Lecture 2: Setting up Vue JS

Lecture 3: Adding To-Dos

Lecture 4: Setting the Done & Undone Functionality

Lecture 5: Using Localstorage to Load To-dos

Lecture 6: Lifecycle Hooks

Lecture 7: Loading Data from Localstorage

Lecture 8: Updating Localstorage on Clear and Update

Chapter 3: Quiz Game Project using the Vue CLI

Lecture 1: Project Presentation – Quiz Game

Lecture 2: Create a Vue JS Application with the Vue CLI

Lecture 3: The Application Boiler Plate

Lecture 4: Clean up Unused Component and HTML Structure

Lecture 5: HTTP Requests with Axios

Lecture 6: Making Requests to the Open Trivia API

Lecture 7: Showing the Question Data on the Page

Lecture 8: The Answers Array – Computed Properties

Lecture 9: Shuffling the Answers Array

Lecture 10: Rendering the Answers Radio Buttons

Lecture 11: Submitting the Answer

Lecture 12: Presenting the Result

Lecture 13: Getting the Next Question

Lecture 14: The Score Component

Lecture 15: Passing Data to Child Components

Chapter 4: Vuex & Vue Router

Lecture 1: Project Presentation – Shopping Bag

Lecture 2: Setting up Vue Router

Lecture 3: Using Axios to Get Products Data

Lecture 4: Working with Vuex

Lecture 5: Setting Up Actions and Mutations – Part 1

Lecture 6: Setting Up Actions and Mutations – Part 2

Lecture 7: Rendering the Products

Lecture 8: Adding Products to Bag

Lecture 9: Avoiding Repeated Items on Shopping Bag

Lecture 10: Removing Items from Bag

Lecture 11: The Mapstate Helper

Lecture 12: Listing items in the Shopping Bag

Lecture 13: Calculating the Order Total

Chapter 5: Composition API

Lecture 1: Options API x Composition API

Lecture 2: Presentation of Project #6 – Task Manager

Lecture 3: Reactivity with Ref

Lecture 4: Reactivity with Reactive

Lecture 5: Components, Props and Scoped Styles

Lecture 6: Adding IDs to Tasks

Lecture 7: Filtering Tasks By State

Lecture 8: Computed Properties

Lecture 9: Code for the Modal Component

Lecture 10: The Modal Component

Lecture 11: Component Slots

Chapter 6: State Management with Pinia – The Vuex Replacement (2023 Update)

Lecture 1: What is State?

Lecture 2: Getting Started with Pinia

Lecture 3: Completing the Tasks Store

Lecture 4: The New Task Modal Functionality

Lecture 5: Adding the State to the Local Storage