The Delightful World of Vue.js Part 2

30:59

What you'll be learning

This course is also built to work with Vue 3!
// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

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!


Your Guides

Matias Ryan Weaver

Buy Access

Questions? Conversation?