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

10h 36m 24s
English
Paid

Course description

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.

Read more about the course

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Full-Stack Vue with GraphQL - The Ultimate Guide

Full-Stack Vue with GraphQL - The Ultimate Guide

Sources: udemy
This entire course within the context of a practical application that we will build literally from the first line of code to live deployment on the web. We'll be building an ima...
9 hours 52 minutes 3 seconds
Nuxt.js - Vue.js on Steroids

Nuxt.js - Vue.js on Steroids

Sources: udemy
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 capa
6 hours 27 minutes 50 seconds
Rapid Development with Vite

Rapid Development with Vite

Sources: vueschool.io
Vite is a first-in-class build tool that aims to provide a faster and leaner development experience for modern web projects. In this course, we cover everything you need to kno...
1 hour 40 minutes 49 seconds