The Delightful World of Vue

Ready to build an interactive frontend that you'll love! Look no further than Vue.js: a leader on the frontend world and one that you can sink your teeth into, even if JavaScript isn't your main gig. In this tutorial, we'll build a real-world "Products" area for our site using an API-Platform-powered API. Will it be a single-page application (SPA)? Nope! Not in this tutorial - because it turns out, integrating Vue into a "traditional" web app is actually a bit trickier:

Tip

Bonus! Along the way, we'll highlight the few differences needed to make this tutorial work with Vue 3.

• Installing & Setting up Vue with Encore (including a nice eslint setup!)
• All about the Vue object: let's make it feel boring!
• Single file Components (SFCs)
• Modular styles
• Props, data & state! Ya know, the key to everything
• v-bind, v-text, v-on, v-for, v-show: basically all the special v-STUFF!
• Communication up the tree with $emit
• Making (and organizing) AJAX calls
• Organizing your files & adding Webpack "alias" shortcuts
• methods, computed properties
• v-model (what it really does)
• Server-side searching and filtering
• Passing data directly from your server to Vue via Twig
• Watchers: what, when and when not

By the end of this tutorial, you'll feel comfortable - dare I say confident - in all the Vue basics!

• Encore, Symfony & API Platform
• Installing Vue, Webpack & Eslint
• Vue Instance & Dynamic Data
• Single File Component
• CSS: Styling a Component
• data() and Vue Dev Tools
• Creating a Child Component
• Props: Passing Info into a Child Component
• v-bind: Dynamic Attributes
• Modular CSS
• Webpack dev-server: Faster Updating
• HMR: See Changes without Reloading
• Organizing into more Components
• Aliases
• Looping with v-for
• v-on & methods: User Interaction
• Magic "this" & its Properties
• Reactivity
• v-if, v-show and Conditional Classes
• Computed Properties
• Where should a Piece of Data Live?
• Communication UP with $emit
• Using Shared CSS
• Ajax with Axios
• The await Keyword
• Product Listing Components
• Product Details & Smart vs Dumb Components
• Loading Component
• Dynamic Categories via Ajax
• Passing data From the Server to Vue
• Reading Server Data & :global Classes
• Page Context "Service"
• Filtering the Products
• Smarter Loading: Ajax status as State
• Ajax Services
• Skipping Ajax: Sending JSON Straight to Vue
• Faking Ajax calls: Reading Synchronously
• Passing Props vs Fetching Directly
• Hoisting Data Up
• The Formidable v-model
• Pass Data in a Custom Event & Internal Data
• Filtering Products
• Async Computed Properties
• Debouncing: Data can Hold Anything
• Business Logic Helpers
• Adding an [x] to our Search Bar
• Watchers: The Good, The Bad & The Useful!
• Adding a Watcher