Learn Nuxt.js by Building a Real World App (Complete Package)

Learn Nuxt.js by Building a Real World App (Complete Package)

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 106 Lessons (10h 36m) | 3.37 GB

The complete guide to developing and deploying fast, production-ready Nuxt apps.

Build awesome websites
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
Table of Contents

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