The Delightful World of Vue Part 2

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!

• 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