Articles
Latest
More
Newsletter Sponsorship Discord About
Sign up for our Newsletter
  • All courses
  • Your courses
  • In progress
Articles
Latest
More
Newsletter Sponsorship Discord About
Sign up for our Newsletter

Advanced Vue 2 - Vuex & SSR

Become a Vue.js expert by learning to build a high-performing, server-rendered app with Vuex!

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

Back to courses

Articles
  • Latest
Newsletter
  • Join
  • Sponsorship
More
  • Discord
  • Vue.js jobs
  • About

Vue.js Developers © 2021. View our privacy policy .

  • RSS
  • |
  • Atom