Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

SymfonyCasts

The Delightful World of Vue Part 2

via SymfonyCasts

Overview

Back for more after the Vue Part 1 Tutorial? You're in luck!

In this tutorial, we're going to dive deeper into Vue by adding increasingly complex - and real-world! - features to our store, including a cart and (simplified) checkout process! We'll learn about:

  • Generic components with dynamic v-bind
  • Updating the DOM outside of your Vue component
  • Multiple Webpack entries for different Vue apps
  • Mixins! (The Vue 2 version of Vue 3 composition)
  • Complex data loading: when you need multiple AJAX calls to get everything you need
  • "Deep" watch and watching the length of an array
  • Vue transitions
  • Forms! Including a custom Input component
  • Client-side and server-side validation
  • Edge-cases in reactivity: avoiding adding/removing object keys

Let's go!

Syllabus

  • Project Setup
  • Page 2: Product Show Page
  • Current Product Id
  • The Dynamic Component
  • AJAX & Delayed Rendering
  • Making the Title Component Less Smart
  • Product Template & Color Selector
  • Cart API & Data
  • Add To Cart
  • Loading Animations & Quantity Input
  • External DOM Updates
  • New Page, New Webpack Entry
  • Sharing Vue-ish Logic: Mixin Basics
  • More Mixin Magic
  • The Cart Page
  • Loading the "Complete" Cart
  • No Data Duplication! Fancy Computed Prop
  • Parallel AJAX with Promises
  • Cart Structure
  • Inventing a Proper v-for :key
  • Accidentally Modifying Prop Objects
  • Emitting up the Component Tree
  • Quantity: Updating Data & Saving to the Server
  • More Mixin Logic: Updating Quantity in Header
  • Remove From Cart
  • "Add to Cart Controls" Component
  • Finishing the Cart Controls Component
  • Featured Sidebar
  • Add to Cart Controls on the Sidebar
  • Deep and Smart Watchers
  • Advancing Between Cart & Checkout
  • Intro to CSS Transitions
  • Vue Transitions
  • Transition Name & Mode
  • Transitioning a Prop Change
  • Checkout Form
  • Reusable "Form Input" Component
  • v-model on a Custom Component
  • v-bind Many Props
  • Checkout Submit
  • Unexpected Server Errors
  • Form Validation
  • Client-Side Validation
  • Losing Reactivity

Taught by

Matias and Ryan Weaver

Reviews

Start your review of The Delightful World of Vue Part 2

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.