Build Your First Vue.js App
Get started with Vue 3 by learning the basic features and building a real Vue app!
I. Introduction
| 1. Course introduction (01:31) |
II. Setting up the project
| 2. Starter code installation (03:11) | |
| 3. Running the server and viewing the project (01:44) | |
| 4. Tour of the project files (02:52) | |
| 5. Including Vue in the project (03:45) | |
| 6. Creating an instance of Vue (01:14) | |
| 7. Rendering data on the page (02:54) | |
| 8. Understanding directives (02:36) | |
| 9. Adding a method (04:38) | |
| 10. Rendering the list of products (04:34) | |
| 11. Tracking iterated elements (02:39) |
III. Building the shopping cart
| 12. Creating the shopping cart (01:31) | |
| 13. Understanding reactivity (02:17) | |
| 14. Installing Vue Devtools (02:05) | |
| 15. Adding products to the cart (03:01) | |
| 16. Displaying cart items (03:04) | |
| 17. Conditionally hiding elements (03:03) | |
| 18. Adding quantity to cart items (02:41) | |
| 19. Cart items quantity logic (02:56) | |
| 20. Formatting price (02:50) | |
| 21. Adding quantity controls to template (02:28) | |
| 22. Implementing inc and dec logic (04:19) | |
| 23. Adding search button (04:18) |
IV. Adding product search
| 24. Adding search input (03:37) | |
| 25. Using Fetch API and Polyfill.io (03:47) | |
| 26. Overview of backend API (02:30) | |
| 27. Using AJAX in Vue (03:09) | |
| 28. Replacing dummy items (02:50) | |
| 29. Adding product image & price (03:20) |
V. Building the product list
| 30. Adding search result indicator (03:56) | |
| 31. Adding the loading message (05:43) | |
| 32. Understanding lifecycle hooks (02:26) | |
| 33. Triggering search on page load (02:16) | |
| 34. Understanding transitions (03:41) | |
| 35. Animating cart total (04:29) | |
| 36. Animating cart items (03:32) | |
| 37. How scroll load works (04:00) | |
| 38. Adding a sensor element (03:00) |
VI. Scroll loading products
VII. Adding finishing touches
| 45. Next steps (02:08) |