The Delightful World of Vue Video Tutorial Screencast

5:05:52

Buy Access

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
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass": "^1.29.0", // 1.29.0
        "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

Buy Access

01. Encore, Symfony & API Platform

7:15
02. Installing Vue, Webpack & Eslint

8:57
03. Vue Instance & Dynamic Data

6:10
1 challenge
04. Single File Component

4:17
1 challenge
05. CSS: Styling a Component

4:51
06. data() and Vue Dev Tools

4:28
1 challenge
07. Creating a Child Component

5:09
2 challenges
08. Props: Passing Info into a Child Component

4:49
2 challenges
09. v-bind: Dynamic Attributes

6:39
2 challenges
10. Modular CSS

7:06
2 challenges
11. Webpack dev-server: Faster Updating

6:20
12. HMR: See Changes without Reloading

4:36
13. Organizing into more Components

6:08
14. Aliases

5:05
1 challenge
15. Looping with v-for

7:39
1 challenge
16. v-on & methods: User Interaction

8:33
3 challenges
17. Magic "this" & its Properties

7:29
18. Reactivity

7:55
1 challenge
19. v-if, v-show and Conditional Classes

5:12
3 challenges
20. Computed Properties

5:58
1 challenge
21. Where should a Piece of Data Live?

7:06
1 challenge
22. Communication UP with $emit

5:49
1 challenge
23. Using Shared CSS

5:08
24. Ajax with Axios

5:41
1 challenge
25. The await Keyword

7:34
26. Product Listing Components

8:13
27. Product Details & Smart vs Dumb Components

8:51
1 challenge
28. Loading Component

5:35
1 challenge
29. Dynamic Categories via AJAX

5:30
30. Passing data From the Server to Vue

6:46
31. Reading Server Data & :global Classes

7:18
1 challenge
32. Page Context "Service"

8:12
1 challenge
33. Filtering the Products

4:51
34. Smarter Loading: AJAX status as State

8:00
1 challenge
35. AJAX Services

7:54
36. Skipping AJAX: Sending JSON Straight to Vue

6:37
2 challenges
37. Faking AJAX calls: Reading Synchronously

6:06
38. Passing Props vs Fetching Directly

6:36
1 challenge
39. Hoisting Data Up

6:52
40. The Formidable v-model

7:04
1 challenge
41. Pass Data in a Custom Event & Internal Data

6:41
42. Filtering Products

3:47
1 challenge
43. Async Computed Properties

9:00
1 challenge
44. Debouncing: Data can Hold Anything

4:18
45. Business Logic Helpers

5:57
2 challenges
46. Adding an [x] to our Search Bar

4:19
47. Watchers: The Good, The Bad & The Useful!

6:18
48. Adding a Watcher

5:13
2 challenges

The Delightful World of Vue

What you'll be learning

Awesome! Keep up the good work in the
JavaScript Frameworks & Tools: Vue section of the JavaScript Frameworks & Tools Track!

Questions? Conversation?

The Delightful World of Vue

What you'll be learning

Awesome! Keep up the good work in the JavaScript Frameworks & Tools: Vue section of the JavaScript Frameworks & Tools Track!

The Delightful World of Vue

The Delightful World of Vue Part 2

Questions? Conversation?

Awesome! Keep up the good work in the
JavaScript Frameworks & Tools: Vue section of the JavaScript Frameworks & Tools Track!