Nuxt 2 Nuxt 3 NEW BLOG

Join our community

Get access to the complete guide to developing and deploying fast, production-ready Nuxt apps.

2 - Organizing Our Code

In this chapter, we’ll take a step back and look deeper into Nuxt 3 architecture.

We’ll see how we can use Pages, Layouts, and Components to organize our code better, and increase the maintainability of our code over time.

Chapter 1 - Building Our MVP

18 lessons

0-1 Course Introduction

FREE

02m 05s

1. Building Our MVP

35s

1-0 Getting Set Up

07m 40s

1-1 File based routing

06m 10s

1-2 Displaying Course Lessons

03m 56s

1-3 Nested Routes

05m 51s

1-4 Dynamic Routes

09m 05s

1-5 Loading in Course Data

06m 11s

1-6 Update Lesson Styling

01m 02s

1-7 Add VideoPlayer Component

02m 54s

1-8 What is Universal Rendering?

05m 17s

1-9 Navigating with NuxtLink

04m 15s

1-10 More with NuxtLink

04m 54s

1-11 The useHead composable

03m 11s

1-12 Tracking progress with useState

09m 25s

1-13 Save Course Progress with VueUse and the ClientOnly Component

FREE

10m 37s

1-14 Deploying our MVP to Netlify

10m 51s

Chapter 1 - Summary

46s

Chapter 2 - Architecture and Organizing Our Code

7 lessons

2 - Organizing Our Code

01m 01s

2-1 Smaller is better

03m 44s

2-2 Understanding App.vue

01m 55s

2-3 Understanding Layouts

08m 21s

2-4 Pages vs. Layouts vs. Components

11m 31s

2-5 Understanding Composables in Nuxt

03m 23s

Chapter 2 - Summary

31s

Chapter 3 - Making Our App Robust

7 lessons

3-0 Making Our App Robust

36s

3-1 Adding in TypeScript

05m 55s

3-2 Handling Client-Side Errors with NuxtErrorBoundary

08m 38s

3-3 Advanced Error Handling

06m 26s

3-4 Handling Server Errors and 404s

09m 35s

3-5 Route Validation

03m 19s

Chapter 3 - Summary

38s

Chapter 4 - Route Middleware and Authentication

11 lessons

01m 33s

4-1 Route Middleware Basics

05m 54s

4-2 Creating a Login Page

06m 04s

4-3 Inline, Named, and Global Route Middleware

11m 24s

4-4 Setting Up Supabase

08m 30s

4-5 Adding Environment Variables

08m 12s

4-6 Logging in with Github

07m 57s

4-7 Logging Out

06m 42s

4-8 Protecting Routes with Auth

07m 03s

4-9 Understanding OAuth Basics

17m 46s

44s

Chapter 5 - Server Routes

18 lessons

01m 02s

5-1 Server Route Basics

10m 56s

5-2 Lesson Endpoint

10m 21s

5-3 Fully Typing Our Endpoint

10m 17s

5-4 Course Metadata Endpoint

11m 32s

5-5 Basic Data Fetching

12m 53s

5-6 Advanced Data Fetching

14m 48s

5-7 Creating the useFetchWithCache Composable

07m 49s

5-8 Fetch Course Metadata

09m 55s

5-9 Setting up Prisma

14m 42s

5-10 Creating the Prisma Schema

10m 53s

5-11 Initialize Prisma and Seed Database

15m 46s

5-12 Getting data from Prisma

07m 21s

5-13 Update Lesson Endpoint

05m 24s

5-14 Update Course Meta Endpoint

12m 25s

5-15 Auth and Server Routes

15m 52s

5-16 Understanding Nitro and h3

14m 22s

34s

Chapter 6 - State Management with Pinia

8 lessons

37s

6-1 Setting up Pinia

12m 02s

6-2 Fixing the Meta Endpoint

05m 56s

6-3 Add LessonProgress Model to Our Schema

05m 09s

6-4 Add Endpoint to Update Progress

12m 19s

6-5 Add User Progress Endpoint

11m 04s

6-6 Show Course Completion Percentage

10m 16s

43s

Chapter 7 - Building a Sales Page

17 lessons

40s

7-1 Adding the Landing Page

07m 17s

7-2 Static Generation and Pre-Rendering

10m 33s

7-3 Route Rules

04m 18s

7-4 Managing Static Assets

12m 34s

7-5 Lazy Loading Checkout Components

04m 13s

7-6 Runtime Config and App Config

04m 34s

7-7 Setting up Stripe

06m 05s

7-8 Handle Payments with Stripe

08m 26s

7-9 Add the PaymentIntent Endpoint

08m 22s

7-10 Overview of Granting Access

05m 15s

7-11 Create CoursePurchase in the Database

04m 24s

7-12 Verify Purchase with Stripe Webhooks

06m 57s

7-13 Testing our Webhook Handler

09m 18s

7-14 Link Purchase with Github

08m 38s

7-15 Grant Access to the Course

07m 29s

38s