Single-Page Apps w. Vue Router
Learn Vue hands-on by building a modern, component-based web app with SPA architecture.
I. Introduction
| 1. Introduction (00:44) |
II. Overview & setup
| 2. Demo of the finished product (03:45) | |
| 3. Clone repo, NPM install, setup environmet (04:34) | |
| 4. Running local server (02:07) | |
| 5. Tour of the project files (06:19) | |
| 6. Webpack configuration (11:00) | |
| 7. Hello World (03:29) |
III. Setting up components
| 8. Vue essentials - Components (03:04) | |
| 9. Configuring components (05:28) | |
| 10. Setup the movie-list component (06:18) | |
| 11. Setup the check-filter component (05:37) |
IV. Filters
V. Refactoring with single-file components
| 23. Vue essentials - Single file components (03:52) | |
| 24. Refactor project to use single file components (09:23) |
VI. Getting data from API
VII. Displaying session times
VIII. Component communication with an event bus
| 39. Vue essentials - Event bus (03:02) | |
| 40. Using a global bus in the project (08:52) |
IX. Creating the Detail page
X. Adding the day selector
| 51. Creating day-select component (02:29) | |
| 52. Adding days to day-select (06:09) | |
| 53. Day selection logic (02:50) | |
| 54. Application-level day property (04:59) | |
| 55. Mobile day selector (06:24) |
XI. Adding tooltips
XII. Finishing touches
| 62. Adding keep-alive to router to maintain filter state (02:26) | |
| 63. How v-cloak works alongside Webpack (02:49) | |
| 64. Building for production (01:58) |