Introduction & Crash Course
  • Introduction overview
  • What is Vue.js?
  • What can you build with Vue.js?
  • What do I need to know before learning Vue.js?
  • Vue basic feature crash course
  • Advanced features
  • Ecosystem tools
  • Vue.js frameworks and plugins
  • Framework comparison
  • Vue.js Essentials preview
Build Your First Vue.js App - Introduction
  • Introducing the course
Build Your First Vue.js App - Setting up the project
  • Starter code installation
  • Running the server and viewing the project
  • Touring the project files
Build Your First Vue.js App - Up and running with Vue
  • Including Vue in the project
  • Creating an instance of Vue
  • Rendering data on the page
  • Understanding directives
  • Adding a method
  • Rendering the list of products
  • Adding key to iterated products
Build Your First Vue.js App - Building the shopping cart
  • Creating the cart
  • Understanding reactivity
  • Vue Devtools
  • Adding products to the cart
  • Displaying cart items
  • Hiding cart if empty
  • Adding quantity to cart items
  • Cart items quantity logic
  • Understanding filters
  • Formatting price
  • Adding quantity buttons to template
  • Implementing inc and dec logic
Build Your First Vue.js App - Adding product search
  • Adding search button
  • Adding search input
  • Overview of vue-resource
  • Overview of API
  • Adding vue-resource to project
  • AJAX call for products
Build Your First Vue.js App - Building the product list
  • Replacing dummy items
  • Adding product image & price
  • Adding search result count to product list
  • Adding the loading message
  • Understanding lifecycle hooks
  • Default search on page load
  • Understanding transitions
  • Fading in cart total
  • Fading in cart items
Build Your First Vue.js App - Scroll loading products
  • How scroll load works
  • Adding a sensor element
  • Scroll monitor setup
  • Triggering code with scroll monitor
  • Appending items
  • Fixing search results
Build Your First Vue.js App - Adding finishing touches
  • Loading indicator with v-cloak
Build A Vue.js Single-Page App with Vue Router - Introduction
  • Introduction
Build A Vue.js Single-Page App with Vue Router - Overview & setup
  • Demo of the finished product
  • Getting data from the OMDB API
  • Clone repo, NPM install, setup environment
  • Running local server
  • Tour of the project files
  • Webpack configuration
  • Hello World
Build A Vue.js Single-Page App with Vue Router - Setting up components
  • Vue essentials: Components
  • Configuring components
  • Setup the movie-list component
  • Setup the check-filter component
Build A Vue.js Single-Page App with Vue Router - Filters
  • Vue essentials: Props
  • Add props to check-filter component
  • Making check-filter toggleable
  • Vue essentials: Custom events
  • Emitting a custom event from check-filter
  • Vue essentials: Vue.js devtools
  • Adding a payload to check-filter event
  • Processing check-filter event in root instance
  • Add filter arrays to movie-list
  • Creating logic for genre filter
Build A Vue.js Single-Page App with... - Refactoring with single file components
  • Vue essentials: Single file components
  • Refactor project to use single file components
Build A Vue.js Single-Page App with Vue Router - Getting data from API
  • Understanding the API
  • Getting data from the API
  • Replace dummy data with API data
  • Creating movie-item component
  • Fleshing out movie-item template
  • Enhance genre filter for multi-genre movies