The Delightful World of Vue.js
5:05:52
What you'll be learning
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
eslintsetup!) - 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 specialv-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
-
01. Encore, Symfony & API Platform7:15
-
02. Installing Vue, Webpack & Eslint8:57
-
03. Vue Instance & Dynamic Data6:10
- 1 challenge
-
04. Single File Component4:17
- 1 challenge
-
05. CSS: Styling a Component4:51
-
06. data() and Vue Dev Tools4:28
- 1 challenge
-
07. Creating a Child Component5:09
- 2 challenges
-
08. Props: Passing Info into a Child Component4:49
- 2 challenges
-
09. v-bind: Dynamic Attributes6:39
- 2 challenges
-
10. Modular CSS7:06
- 2 challenges
-
11. Webpack dev-server: Faster Updating6:20
-
12. HMR: See Changes without Reloading4:36
-
13. Organizing into more Components6:08
-
14. Aliases5:05
- 1 challenge
-
15. Looping with v-for7:39
- 1 challenge
-
16. v-on & methods: User Interaction8:33
- 3 challenges
-
17. Magic "this" & its Properties7:29
-
18. Reactivity7:55
- 1 challenge
-
19. v-if, v-show and Conditional Classes5:12
- 3 challenges
-
20. Computed Properties5:58
- 1 challenge
-
21. Where should a Piece of Data Live?7:06
- 1 challenge
-
22. Communication UP with $emit5:49
- 1 challenge
-
23. Using Shared CSS5:08
-
24. Ajax with Axios5:41
- 1 challenge
-
25. The await Keyword7:34
-
26. Product Listing Components8:13
-
27. Product Details & Smart vs Dumb Components8:51
- 1 challenge
-
28. Loading Component5:35
- 1 challenge
-
29. Dynamic Categories via AJAX5:30
-
30. Passing data From the Server to Vue6:46
-
31. Reading Server Data & :global Classes7:18
- 1 challenge
-
32. Page Context "Service"8:12
- 1 challenge
-
33. Filtering the Products4:51
-
34. Smarter Loading: AJAX status as State8:00
- 1 challenge
-
35. AJAX Services7:54
-
36. Skipping AJAX: Sending JSON Straight to Vue6:37
- 2 challenges
-
37. Faking AJAX calls: Reading Synchronously6:06
-
38. Passing Props vs Fetching Directly6:36
- 1 challenge
-
39. Hoisting Data Up6:52
-
40. The Formidable v-model7:04
- 1 challenge
-
41. Pass Data in a Custom Event & Internal Data6:41
-
42. Filtering Products3:47
- 1 challenge
-
43. Async Computed Properties9:00
- 1 challenge
-
44. Debouncing: Data can Hold Anything4:18
-
45. Business Logic Helpers5:57
- 2 challenges
-
46. Adding an [x] to our Search Bar4:19
-
47. Watchers: The Good, The Bad & The Useful!6:18
-
48. Adding a Watcher5:13
- 2 challenges
Questions? Conversation?
-
2020-07-30 Nathan De Pachtere -
2020-07-28 Matias Jose -
2020-07-28 Alberto -
2020-07-20 Diego Aguiar -
2020-07-20 Alberto
-
2020-07-02 Diego Aguiar
-
2020-07-02 Gilson DElrei
-
2020-05-29 Matias Jose
-
2020-05-28 Wilco
-
2020-05-20 weaverryan -
2020-05-20 Sergiu Popa -
2020-05-19 Krzysztof Krakowiak -
2020-05-19 weaverryan
-
2020-05-19 Alberto
