w3docs logo
Connexion

Nuxt.js - Vue.js on Steroids

Build highly engaging Vue JS apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach.

Start
  1. Courses
  3. Nuxt.js - Vue.js on Steroids

Vue.js is an amazing JavaScript framework which you can use to build highly engaging user interfaces and single page applications.

Nuxt.js takes it to the next level!

It's a library for Vue.js (kind of a "framework for a framework") and it adds two major things to Vue.js:

  • Server-side-rendering of your Vue app out of the box
  • Easy Vue app configuration via folders and files

You'll of course learn all the details in this course but the most important takeaway is that Nuxt.js makes the creation of better, more optimized and more capable Vue apps much easier - and all of that whilst adding pretty much no overhead.

In this course, I'll teach you how to create Nuxt/ Vue apps from scratch! We'll build an entire course project and dive into the core features Nuxt.js offers.

By the end of the course, you'll have a complete Vue app, built with Nuxt.js, which can be rendered on the server (or as a static website!) and which is highly optimized.

The course will teach you ...

  • ... what Nuxt.js exactly is and how it's connected to Vue.js
  • ... how you use Nuxt.js to build better Vue apps
  • ... everything you need to know about the "configure via folders & files" approach taken by Nuxt
  • ... different build possibilities like SSR apps, SPAs or a static webpage
  • ... how you build an entire project, including authentication, via Nuxt.js
  • And way more!

Who this course is for:

  • Anyone who wants to build engaging, (optionally) server-side-rendered Vue JS apps
  • Anyone who wants to work with Vuejs and follow a minimal-configuration approach
  • Anyone who wants to create static websites with

Section: Getting Started

1. Welcome & Introduction (1:54)
2. What is Nuxt.js? (2:59)
3. Understanding Server Side Rendering (4:02)
4. Nuxt vs "Normal" Server Side Rendering (1:33)
5. Join our Online Learning Community (1:00)
6. Creating our First Nuxt App (5:07)
7. Understanding the Folder Structure (5:38)
8. What can we Build with Nuxt? (2:34)
9. What's Inside This Course? (2:06)
10. How To Get The Most Out Of This Course (1:57)
11. Where to Find the Source Code (1:00)

Section: Pages, Routing & Views

12. Module Introduction (0:55)
13. From Folders to Routes (6:32)
14. Creating a Route with a Dynamic Path (5:24)
15. Adding Links & Navigating Around (6:21)
16. Assignment - Pages & Routing (Problem) (1:34)
17. Assignment - Pages & Routing (Solution) (4:32)
18. Validating Parameters (5:57)
19. Creating Nested Routes (3:11)
20. Layouts, Pages & Components - Theory (1:30)
21. Adding a New Layout (3:52)
22. Adding a Default Error Page (1:23)
23. Working with "Normal" Components (7:51)
24. Styling Nuxt Apps (5:35)
25. Wrap Up (1:03)
26. Useful Resources & Links (1:00)

Section: Project - Pages, Routing & Views

27. Module Introduction (1:13)
28. Creating the Main "Sections" (Pages) (7:58)
29. Adding External Fonts (3:49)
30. Creating the Landing Page (5:50)
31. Splitting the Page into Components (8:28)
32. Adding Static Assets - The Background Image (2:33)
33. Adding the Header Component (5:54)
34. Vue Router vs. Nuxt Router (1:29)
35. Working on the Post Page (4:33)
36. Creating an Admin Section (12:36)
37. Preparing the Backend (10:20)
38. Improving the App (2:37)
39. Adding a Separate Layout to the Admin Area (2:50)
40. Useful Resources & Links (1:00)

Section: Handling Data

41. Module Introduction (1:00)
42. Adding Dynamic Data (5:52)
43. Preparing Data on the Server-Side (through Nuxt) (9:08)
44. Assignment - Server-Side Data (Problem) (0:40)
45. Assignment - Server-Side Data (Solution) (2:31)
46. asyncData on Client & Server (3:17)
47. A Closer Look at the Context Object (2:45)
48. Adding Async Data to a Single Post (5:31)
49. Handling Errors with a Callback (1:55)
50. Using Promises in asyncData (3:17)
51. Important: Restart the dev server in next lecture! (1:00)
52. Adding the Vuex Store (7:59)
53. Vuex, fetch() and nuxtServerInit() (9:26)
54. Wrap Up (3:12)
55. Useful Resources & Links (1:00)

Section: Connecting our App to the Backend

56. Module Introduction (0:45)
57. Executing Code on the Server (3:36)
58. Adding Firebase as a Backend (2:06)
59. Using Firebase to Store Data (4:55)
60. Fetching Data from the Backend (4:17)
61. Initializing our Store (2:54)
62. Fetching all Posts (5:09)
63. Assignment - Fetching Data (Problem) (1:24)
64. Assignment - Fetching Data (Solution) (3:42)
65. Editing Posts (4:32)
66. Synchronizing Vuex and the Backend (10:37)
67. Wrap Up (1:59)
68. Useful Resources & Links (1:00)

Section: Nuxt - Config, Plugins & Modules

69. Module Introduction (0:57)
70. The Nuxt Config File (6:28)
71. The Loading Property (3:28)
72. Working with Environment Variables (5:37)
73. Manipulating Routing Settings (4:34)
74. Animating Page Transitions (3:17)
75. Adding Plugins (5:16)
76. Registering a Date Filter (2:10)
77. Understanding Modules (8:08)
78. Wrap Up (0:46)
79. Useful Resources & Links (1:00)

Section: Middleware & Authentication

80. Module Introduction (0:44)
81. What is Middleware? (6:46)
82. Adding User Signup (6:49)
83. Adding User Login (2:53)
84. Storing the Token (5:59)
85. Using the Token for Authentication (3:21)
86. Implementing a Middleware (4:10)
87. Invalidating the Token (2:52)
88. Persisting the Token Across Page Refreshes (9:53)
89. Implementing Cookies (9:33)
90. Fixing the Logout Timer (6:19)
91. Adding the Logout Functionality (5:03)
92. A Quick Bugfix (0:48)
93. Useful Resources & Links (1:00)

Section: The Server Side

94. Module Introduction (1:13)
95. Adding Server Side Middleware (6:18)
96. Testing the Middleware (2:11)
97. Starting a Project with a Server Side Template (3:09)
98. Useful Resources & Links (1:00)

Section: Building a Nuxt App

99. Module Introduction (0:31)
100. Universal vs SPA vs Static (3:01)
101. Building our App as a Universal App (2:02)
102. Building our App as a SPA (5:44)
103. Deploying a Universal App (1:00)
104. Fetching Data in the SPA (1:00)
105. Building our App as a Static Website (3:21)
106. Improving the Generate Process (4:43)
107. Limiting the Amount of http Requests (3:04)
108. Adjusting the Store (2:33)
109. Deploying SPAs and Static Webpages (1:00)
110. Useful Resources & Links (1:00)

Section: Round Up

111. Course Roundup (0:55)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.