Single-Page Apps w. Vue Router

Learn Vue hands-on by building a modern, component-based web app with SPA architecture.

Enroll in this course or log in

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

	12. Vue essentials - Props (03:49)
	13. Add props to check-filter component (03:17)
	14. Making check-filter toggleable (03:17)
	15. Vue essentials - Custom events (02:37)
	16. Emitting a custom event from check-filter (04:37)
	17. Vue essentials - Vue.js devtools (02:01)
	18. Adding a payload to check-filter event (05:37)
	19. Processing check-filter event in root instace (03:41)
	20. Add filter arrays to movie-list (03:10)
	21. Vue essentials - Computed properties (02:24)
	22. Creating logic for genre filter (05:39)

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

	25. Understanding the API (04:38)
	26. Getting data from the API (03:53)
	27. Replace dummy data with API data (02:21)
	28. Creating movie-item component (03:29)
	29. Fleshing out movie-item template (03:15)
	30. Enhance genre filter for multi-genre movies (05:21)
	31. Adding no results and loading meassages (05:03)

VII. Displaying session times

	32. Adding moment library to project (07:36)
	33. Displaying session times (05:39)
	34. Filtering session times (06:44)
	35. Adding time filters (05:01)
	36. Filter movies based on time filter (09:45)
	37. Filter sessions based on time filter (04:40)
	38. Enhance the no results message with filters (04:09)

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

	41. Vue essentials - Vue router (04:15)
	42. Abstract main page into overview component (04:40)
	43. Setting up Vue router (04:12)
	44. Adding router-view to main template (03:29)
	45. Creating detail page (04:59)
	46. Passing movie ID to detail page (04:44)
	47. Dispalying movie-item in detail page (06:35)
	48. Vue essentials - Slots (02:21)
	49. Incorporating slots in movie-item (04:40)
	50. Fleshing out detail page (04:42)

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

	56. Vue essentials - Custom directives (03:13)
	57. Adding tooltip custom directive (03:44)
	58. Creating tootip in DOM (02:55)
	59. Adding classes and event listeners to tooltip (12:31)
	60. Vue essentials - Plugins (01:25)
	61. Making tooltip a custom plugin (05:39)

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)

Back to courses