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 | 9h 08m | 2.88 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 Rrst Page
8 Building Your NuxtApp
9 Creating Our Homepage
10 Adding Meta Tags and Other Elements to the EITML 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 – Saipts 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
27 Importing Reviews Into Algolia
28 Reviews Section on the Property Page
29 Reviews Data Formatting 00.16.29
30 Host Section
31 Refactoring For Speed
32 Refadoring 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 Filing The Auth Store
63 Working With Chid Routes
64 Intro to SPA Model
65 Protecting the Admin Section
66 Refactoring Proxy APIs – Helpers
67 Refactoring Proxy APIs – User Router
68 Refectoring Proxy APIs – API Providers
68 Refectoring Proxy APIs – API Providers
69 Body Parser
70 Add a Home (U1)
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 Feing the Users Home List
79 Deleting a Home
80 Using an Image Component
81 Image Uris 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 Instaling The Stripe Node Library
89 Creating Stripe Proxy APIs (Part 1)
90 Creating Stripe Proxy APIs (Part 2)