Vue.js Essentials – 3 Course Bundle

Course Curriculum

Chapter 1: Introduction & Crash Course

Lecture 1: Introduction overview

Lecture 2: What is Vue.js?

Lecture 3: What can you build with Vue.js?

Lecture 4: What do I need to know before learning Vue.js?

Lecture 5: Vue basic feature crash course

Lecture 6: Advanced features

Lecture 7: Ecosystem tools

Lecture 8: Vue.js frameworks and plugins

Lecture 9: Framework comparison

Lecture 10: Vue.js Essentials preview

Chapter 2: Build Your First Vue.js App – Introduction

Lecture 1: Introducing the course

Chapter 3: Build Your First Vue.js App – Setting up the project

Lecture 1: Starter code installation

Lecture 2: Running the server and viewing the project

Lecture 3: Touring the project files

Chapter 4: Build Your First Vue.js App – Up and running with Vue

Lecture 1: Including Vue in the project

Lecture 2: Creating an instance of Vue

Lecture 3: Rendering data on the page

Lecture 4: Understanding directives

Lecture 5: Adding a method

Lecture 6: Rendering the list of products

Lecture 7: Adding key to iterated products

Chapter 5: Build Your First Vue.js App – Building the shopping cart

Lecture 1: Creating the cart

Lecture 2: Understanding reactivity

Lecture 3: Vue Devtools

Lecture 4: Adding products to the cart

Lecture 5: Displaying cart items

Lecture 6: Hiding cart if empty

Lecture 7: Adding quantity to cart items

Lecture 8: Cart items quantity logic

Lecture 9: Understanding filters

Lecture 10: Formatting price

Lecture 11: Adding quantity buttons to template

Lecture 12: Implementing inc and dec logic

Chapter 6: Build Your First Vue.js App – Adding product search

Lecture 1: Adding search button

Lecture 2: Adding search input

Lecture 3: Overview of vue-resource

Lecture 4: Overview of API

Lecture 5: Adding vue-resource to project

Lecture 6: AJAX call for products

Chapter 7: Build Your First Vue.js App – Building the product list

Lecture 1: Replacing dummy items

Lecture 2: Adding product image & price

Lecture 3: Adding search result count to product list

Lecture 4: Adding the loading message

Lecture 5: Understanding lifecycle hooks

Lecture 6: Default search on page load

Lecture 7: Understanding transitions

Lecture 8: Fading in cart total

Lecture 9: Fading in cart items

Chapter 8: Build Your First Vue.js App – Scroll loading products

Lecture 1: How scroll load works

Lecture 2: Adding a sensor element

Lecture 3: Scroll monitor setup

Lecture 4: Triggering code with scroll monitor

Lecture 5: Appending items

Lecture 6: Fixing search results

Chapter 9: Build Your First Vue.js App – Adding finishing touches

Lecture 1: Loading indicator with v-cloak

Chapter 10: Build A Vue.js Single-Page App with Vue Router – Introduction

Lecture 1: Introduction

Chapter 11: Build A Vue.js Single-Page App with Vue Router – Overview & setup

Lecture 1: Demo of the finished product

Lecture 2: Getting data from the OMDB API

Lecture 3: Clone repo, NPM install, setup environment

Lecture 4: Running local server

Lecture 5: Tour of the project files

Lecture 6: Webpack configuration

Lecture 7: Hello World

Chapter 12: Build A Vue.js Single-Page App with Vue Router – Setting up components

Lecture 1: Vue essentials: Components

Lecture 2: Configuring components

Lecture 3: Setup the movie-list component

Lecture 4: Setup the check-filter component

Chapter 13: Build A Vue.js Single-Page App with Vue Router – Filters

Lecture 1: Vue essentials: Props

Lecture 2: Add props to check-filter component

Lecture 3: Making check-filter toggleable

Lecture 4: Vue essentials: Custom events

Lecture 5: Emitting a custom event from check-filter

Lecture 6: Vue essentials: Vue.js devtools

Lecture 7: Adding a payload to check-filter event

Lecture 8: Processing check-filter event in root instance

Lecture 9: Add filter arrays to movie-list

Lecture 10: Creating logic for genre filter

Chapter 14: Build A Vue.js Single-Page App with… – Refactoring with single file components

Lecture 1: Vue essentials: Single file components

Lecture 2: Refactor project to use single file components

Chapter 15: Build A Vue.js Single-Page App with Vue Router – Getting data from API

Lecture 1: Understanding the API

Lecture 2: Getting data from the API

Lecture 3: Replace dummy data with API data

Lecture 4: Creating movie-item component

Lecture 5: Fleshing out movie-item template

Lecture 6: Enhance genre filter for multi-genre movies