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
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
