CF

MASTERING NUXT Learn Nuxt.js by Building a Real World App

10h 36m 24s
English
Paid

Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework. Learn the best practises, common pitfalls to avoid, and tons of tips and tricks. Prior experience with Nuxt is beneficial but not required.

Nuxt.js is a modular framework built on top of the easiest web development framework in 2020 Vue.js. It allows developers of any kind to create elegant websites progressively. We see huge enterprise companies and governments using Nuxt to build websites quickly — very important especially during the pandemic. We also see solo devs building exceptional side projects with Nuxt.

What you will build

Learn the best practises, common pitfalls to avoid, and tons of tips and tricks

Together we will build NuxtBnB! That’s a production ready AirBnB clone. Get to work with bookings, date picking, payments, galleries, users, and many more!

What you will learn

NuxtBnB is not the simplest of apps. Under the hood it relies on many plugins and services. Throughout the course you'll learn how to work with the following:

  • Async data
  • Advanced Search with Algolia
  • Routing
  • State Management with Vuex
  • Organizing large projects
  • Date Picker Component
  • Reusable components
  • Progressive Images
  • Static Site Generation
  • Integrate a Back End
  • Performance Optimization
  • Carousel
  • Nuxt Modules and Plugins
  • User Authentication & Permissions
  • SEO + Meta Tags
  • Server Side Rendering
  • Deployment & Hosting
  • Google Maps API

Additional

The Nuxt 2 to Nuxt 3 Upgrade Guide is available now

About the Author: Mastering Nuxt

Mastering Nuxt thumbnail

Mastering Nuxt is the paid course platform built around the Nuxt.js Vue meta-framework, run by Daniel Kelly (Vue Mastery). The platform also covers Next.js as the parallel React framework. Course material is updated as the underlying frameworks evolve — the original Mastering Nuxt 3 course has been rewritten through multiple Nuxt major versions.

The CourseFlix listing carries four Mastering Nuxt courses including Mastering Nuxt, 2025 Edition, Mastering Nuxt 3, the original MASTERING NUXT — Learn Nuxt.js by Building a Real World App, and Mastering Next.js on the React side. Material is paid and aimed at Vue / React developers building real applications with these meta-frameworks.

Watch Online 106 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 106 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introductio
All Course Lessons (106)
#Lesson TitleDurationAccess
1
Course Introductio Demo
04:25
2
Drawback of single page applications
03:07
3
Nuxt To The Rescue
02:42
4
What Do I Need?
03:18
5
How to Create a New Nuxt Project From Scratch
02:04
6
Starting It Up
01:20
7
Creating Your First Page
01:23
8
Building Your Nuxt App
02:28
9
Creating Our Homepage
08:33
10
Adding Meta Tags and Other Elements to the HTML Head Tag
04:50
11
How Does Routing in Nuxt Work?
06:09
12
Creating the Property Page
04:16
13
Nuxt Link
04:20
14
Disabling Prefetch Globally
01:06
15
Creating Page Layouts
02:58
16
Creating a Google Account
02:12
17
Creating a Google Cloud Platform Account
03:43
18
Adding a Map To The Property Page
08:00
19
Problem 1 - Scripts and Single Page Apps
10:21
20
Problem 2 - Network Latency
07:59
21
Solution - Plugins To The Rescue
13:10
22
Creating an Algolia Account
04:52
23
Using APIs on the Property Page
10:41
24
Fetch & Polyfills
02:09
25
Handling Errors
10:08
26
Customizing The Error Page
03:37
27
Importing Reviews Into Algolia
02:30
28
Reviews Section on the Property Page
06:28
29
Reviews Data Formatting
16:29
30
Host Section
04:42
31
Refactoring For Speed
05:10
32
Refactoring for Google Places
05:16
33
Google Places Autocomplete
12:31
34
Importing New Properties
01:56
35
Creating the Geo Search Page
07:45
36
The Dev Bug
04:17
37
Adding Additional Property Details in the Search Results
06:54
38
Adding a Map to the Search Results Page
01:56
39
Adding Property Markers on the Map
05:44
40
Marker Styling
03:26
41
Map Styles and Marker Effects
06:31
42
Intro to Nuxt Modules
05:00
43
The Module Environment
07:33
44
Module Hooks
04:43
45
Install the Tailwind CSS Module
04:50
46
Setting up the Design
08:18
47
Styling the Header
04:57
48
Styling the Property Page (Part 1)
07:41
49
Styling The Property Page (Part 2)
10:42
50
Styling the Search Page
05:17
51
Creating a Google oAuth2 Client ID
03:56
52
Using Runtime Configs in Nuxt
06:16
53
Setting Up The Vuex Store
09:13
54
Google Sign-In and Auth Plugin
08:21
55
Storing Credentials
08:05
56
Setting Up The Auth Store
04:49
57
Working With Server Middleware
08:03
58
Building an API Firewall (Part 1)
09:19
59
Building an API Firewall (Part 2)
05:27
60
Creating an Algolia Proxy
11:11
61
Extending the Algolia Proxy
04:19
62
Filling The Auth Store
02:39
63
Working With Child Routes
03:43
64
Intro to SPA Mode
04:41
65
Protecting the Admin Section
03:01
66
Refactoring Proxy APIs - Helpers
03:11
67
Refactoring Proxy APIs - User Router
03:34
68
Refectoring Proxy APIs - API Providers
06:39
69
Body Parser
04:54
70
Add a Home (UI)
13:49
71
Add a Home (API)
11:22
72
Add a Home - Google Places
09:51
73
Creating a Cloudinary Account
02:22
74
Creating Cloudinary Signatures
06:29
75
Uploading Images to Cloudinary with Nuxt
14:48
76
Using the ImageUploader in the Home Editor
04:46
77
Assigning Homes to Users
05:14
78
Filling the User's Home List
09:44
79
Deleting a Home
09:56
80
Using an Image Component
07:49
81
Image Urls With Cloudinary and Nuxt Image
06:44
82
Updating The Homepage Carousel
04:52
83
Creating a Date Selector Component
10:58
84
Updating the Add a Home API
04:32
85
Updating Header Controls
08:55
86
Updating Home Search to Use the Availability Range
03:32
87
Creating a Stripe Account
02:18
88
Installing The Stripe Node Library
04:10
89
Creating Stripe Proxy APIs (Part 1)
08:46
90
Creating Stripe Proxy APIs (Part 2)
05:44
91
Creating a Checkout Page
12:03
92
Creating a Vercel Account
02:38
93
Deploying to Vercel
04:49
94
Dev vs Prod Project Updates
07:15
95
Stripe Webhooks
08:33
96
Social Cards
08:04
97
Working With Schema.org & Microdata
06:28
98
Closing Comments
03:25
99
While You Were Out
02:48
100
Setting Expectations
01:46
101
Installing Nuxt Bridge
03:20
102
Updating Runtime Configs
04:03
103
Updates to the Cloudinary Image Uploader
07:32
104
Auth and Helpers Migration
05:34
105
Stripe Migration
05:28
106
Final Updates
04:09
Unlock unlimited learning

Get instant access to all 105 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
While prior experience with Nuxt is beneficial, it is not required to enroll in the course. The lessons are designed to cater to beginners as well as those looking to improve their existing skills with Nuxt.js. Basic knowledge of JavaScript and web development would be helpful to get the most out of the content provided.
What kind of project will I build during the course?
Students will build a real-world application focusing on a property listing website. Key features include creating pages, adding maps using Google Cloud Platform, implementing search functionality with Algolia, and handling user authentication with Google oAuth2. The project covers both front-end and back-end aspects, making it a comprehensive learning experience.
Who is the target audience for this course?
The course is ideal for web developers looking to enhance their skills in building modern websites using Nuxt.js. It is also suitable for those new to Nuxt.js who want to learn how to leverage the framework to improve website performance and code quality.
What specific tools or platforms are covered in the course?
The course covers a range of tools and platforms, including Google Cloud Platform for integrating maps, Algolia for implementing search functionality, and Tailwind CSS for styling. It also explores the use of Vuex for state management and Google oAuth2 for user authentication.
How does the depth and scope of this course compare to similar offerings?
This course provides a practical, project-based approach to learning Nuxt.js, with 106 lessons covering a wide range of topics. It focuses on real-world application development, teaching best practices, and exploring common pitfalls. Compared to other courses, it offers a deep dive into specific tools and integrations such as Google Cloud and Algolia.
What topics are not covered in this course?
The course does not cover advanced server-side rendering techniques or deep dives into JavaScript frameworks other than Nuxt.js. It focuses primarily on building a property listing application and the tools necessary for that specific project. Those seeking to learn about other frameworks or more advanced server-side concepts may need additional resources.
What is the time commitment required to complete the course?
The course consists of 106 lessons, providing a thorough exploration of Nuxt.js and its applications. The total runtime is not specified, but prospective students should be prepared to dedicate a significant amount of time to complete the lessons, participate in exercises, and build the project. The course is self-paced, allowing students to progress according to their own schedules.