The Delightful World of Vue.js

5:05:52

What you'll be learning

This course is also built to work with Vue 3!
// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.0
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.1.0
        "eslint-plugin-import": "^2.19.1", // 2.20.2
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "node-sass": "^4.13.0", // 4.14.1
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.11
        "vue-loader": "^15.9.1", // 15.9.2
        "vue-template-compiler": "^2.6.11", // 2.6.11
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

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!


Your Guides

Matias Ryan Weaver

Buy Access
Login or register to track your progress!

Questions? Conversation?