Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[MB] Advanced Vue 2 - Vuex & SSR
A. Introduction
Introduction (0:57)
B. Overview & setup
1. Demo of the finished product (4:07)
2. Clone repo, NPM install, setup environment (3:54)
3. Tour of the files (4:42)
4. Webpack configuration and extract text demo (10:36)
C. Setting up the calendar
5. Setup the app component (2:57)
6. Add moment to root, set timezone (4:16)
7. Generate list of days in current month (8:11)
8. Padding days to startend of month for complete weeks (10:46)
9. Grouping days into blocks of weeks (4:38)
D. Calendar day functionality
10. Vue essentials - Shorthands (1:15)
11. Adding calender-day component (4:46)
12. Adding days of week above calender grid (1:31)
13. Highlighting current day on calender (2:57)
14. Ul effects for past and days outside of month (3:07)
15. Vue essentials - Vuex (4:39)
16. Add Vuex to project and creat basic state properties (4:37)
E. Adding the month selector
17. Adding and creating current-month component (2:19)
18. Displaying date in current-month component (2:36)
19. Adding buttons to current-month component (1:40)
20. Moving Vuex into own file (2:33)
21. Changing month and year with Vuex mutation (3:17)
22. Enhancing current-month logic (3:32)
23. Vue.js Dev Tools - Vuex (1:49)
F. Creating the event form
24. Creating event-form component (4:50)
25. Capture click in calender-day (4:36)
26. Positioning Event Form (2:35)
27. Opening and closing Event Form (6:03)
28. Displaying events in calender-day (5:59)
29. Creating event state in store (1:55)
30. Adding input to event-form (1:59)
31. Submit new event to store (4:04)
32. Get event date in store (3:51)
33. Improving form (3:07)
34. Focus directive, Enter keyup is create (4:21)
35. Displaying date in Event Form (4:15)
36. Highlight Event Form active day (3:40)
G. Loading stored events
37. Setup for sending events to server (5:21)
38. Receiving event on server (2:57)
39. Vue essentials - Vuex actions (4:02)
40. Creating addEvent action in store (5:56)
41. Returning a promise from addEvent action (6:59)
H. Writing events to template
42. Replace Vuex state in main file (5:08)
43. Move mock data to HTML template (5:19)
44. Splicing mock data into HTML file (8:07)
I. Server-side rendering
45. Vue essentials - Render functions (4:19)
46. Introduction to server-side rendering (9:48)
47. Creating root instance template with a render function (6:37)
48. Server-side rendering webpack flow (5:43)
49. Creating common entry file (6:58)
50. Creating server entry file (6:47)
51. Setting up bundle renderer (6:09)
52. Splicing rendered bundle into HTML template (4:43)
53. Vuex state hydration (6:40)
J. Finishing touches
54. Adding image to header and reloading page on initial render (5:46)
55. Bundling for production (3:57)
K. Wrap up
56. Wrap up (1:44)
1. Demo of the finished product
Complete and Continue