Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[MB] Single-Page Apps w. Vue Router
A. Introduction
0. Introduction (0:44)
B. Overview & setup
1. Demo of the finished product (3:44)
2. Clone repo, NPM install, setup environmet (4:34)
3. Running local server (2:06)
4. Tour of the project files (6:18)
5. Webpack configuration (10:59)
6. Hello World (3:29)
C. Setting up components
7. Vue essentials - Components (3:04)
8. Configuring components (5:28)
9. Setup the movie-list component (6:17)
10. Setup the check-filter component (5:37)
D. Filters
11. Vue essentials - Props (3:48)
12. Add props to check-filter component (3:45)
13. Making check-filter toggleable (3:16)
14. Vue essentials - Custom events (2:36)
15. Emitting a custom event from check-filter (4:37)
16. Vue essentials - Vue.js devtools (2:00)
17. Adding a payload to check-filter event (5:37)
18. Processing check-filter event in root instace (3:41)
19. Add filter arrays to movie-list (3:09)
20. Vue essentials - Computed properties (2:24)
21. Creating logic for genre filter (5:39)
E. Refactoring with single-file components
22. Vue essentials - Single file components (3:52)
23. Refactor project to use single file components (9:23)
F. Getting data from API
24. Understanding the API (4:37)
25. Getting data from the API (3:53)
26. Replace dummy data with API data (2:20)
27. Creating movie-item component (3:28)
28. Fleshing out movie-item template (3:15)
29. Enhance genre filter for multi-genre movies (5:21)
30. Adding no results and loading meassages (5:03)
G. Displaying session times
31. Adding moment library to project (7:35)
32. Displaying session times (5:39)
33. Filtering session times (6:43)
34. Adding time filters (5:01)
35. Filter movies based on time filter (9:45)
36. Filter sessions based on time filter (4:39)
37. Enhance the no results message with filters (4:09)
H. Component communication with an event bus
38. Vue essentials - Event bus (3:02)
39. Using a global bus in the project (8:51)
I. Creating the Detail page
40. Vue essentials - Vue router (4:14)
41. Abstract main page into overview component (4:40)
42. Setting up Vue router (4:11)
43. Adding router-view to main template (3:28)
44. Creating detail page (4:59)
45. Passing movie ID to detail page (4:04)
46. Dispalying movie-item in detail page (6:34)
47. Vue essentials - Slots (2:21)
48. Incorporating slots in movie-item (4:40)
49. Fleshing out detail page (4:42)
J. Adding the day selector
50. Creating day-select component (2:29)
51. Adding days to day-select (6:08)
52. Day selection logic (2:49)
53. Application-level day property (4:59)
54. Mobile day selector (6:23)
K. Adding tooltips
55. Vue essentials - Custom directives (3:12)
56. Adding tooltip custom directive (3:43)
57. Creating tootip in DOM (2:54)
58. Adding classes and event listeners to tooltip (12:30)
59. Vue essentials - Plugins (1:25)
60. Making tooltip a custom plugin (5:38)
L. Finishing touches
61. Adding keep-alive to router to maintain filter state (2:26)
62. How v-cloak works alongside Webpack (2:49)
63. Building for production (1:57)
4. Tour of the project files
Complete and Continue