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

10h 36m 24s
English
Paid
November 20, 2023

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.

More

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

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

Join premium to watch
Go to premium
# Title Duration
1 Course Introductio 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

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

Test with Jest

Test with Jest

Duration 52 minutes 39 seconds
Master Laravel, Vue 3 & Inertia Full Stack 2023

Master Laravel, Vue 3 & Inertia Full Stack 2023

Duration 35 hours 53 minutes 40 seconds
Using Vue 2 to Create Beautiful SEO-Ready Websites

Using Vue 2 to Create Beautiful SEO-Ready Websites

Duration 1 hour 48 minutes 11 seconds
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Duration 27 hours 56 minutes 34 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4

Duration 1 hour 46 minutes 30 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Duration 6 hours 37 minutes 49 seconds
Build a Server Rendered Vue.js App with Nuxt and Vuex