Master Nuxt 3 – Full-Stack Complete Guide

Course Curriculum

Chapter 1: Nuxt Setup and Basics: Getting Started Guide

Lecture 1: Welcome! The Course Plan and Projects

Lecture 2: Let's Understand: Why Vue and why Nuxt?

Lecture 3: Let's Understand: Client vs Server vs Hybrid Rendering

Lecture 4: What Can You Build With Nuxt? Real Examples!

Lecture 5: Setting Up, Solving Issues, Q&A and Udemy UI

Lecture 6: Current and Future Nuxt Version – Future-Proofing Projects

Lecture 7: Getting Node.js

Chapter 2: Build a Nuxt Blog & Portfolio: Essentials

Lecture 1: Intro: Project #1 – What Are You Going to Learn?

Lecture 2: Getting Nuxt 4 Ready

Lecture 3: Create a Nuxt App & Understand Directory Structure

Lecture 4: Enable Nuxt 4 Compatibility Mode – Essential for Nuxt 4 Users

Lecture 5: Pages & Routing in Nuxt

Lecture 6: Route Params & Links in Nuxt

Lecture 7: Layouts

Lecture 8: Setting Different Layouts

Chapter 3: Build a Nuxt Blog & Portfolio: Modules, Tailwind, Components, SEO & Meta

Lecture 1: Nuxt Modules & Installing Tailwind CSS

Lecture 2: Styling the App with Tailwind CSS

Lecture 3: Working with Components

Lecture 4: SEO and Meta (And Custom Fonts)

Chapter 4: Build a Nuxt Blog & Portfolio: Data Fetching Guide

Lecture 1: Data Fetching

Lecture 2: Data Fetching: Project List – Listing Your GitHub Projects

Chapter 5: Build a Nuxt Blog & Portfolio: Dark Mode

Lecture 1: Dark Mode in Your Project

Lecture 2: Dark Mode Selector Button

Chapter 6: Build a Nuxt Blog & Portfolio: Nuxt Content

Lecture 1: Nuxt Content: Static File-Based CMS

Lecture 2: Starting a Blog with Nuxt Content

Lecture 3: Markdown and Typography

Lecture 4: Markdown & Meta Tags (Front-Matter)

Lecture 5: Custom Pages in Markdown & Typography Customization

Chapter 7: Build a Nuxt Blog & Portfolio: Advanced Nuxt Content Examples

Lecture 1: Nuxt Content: Images and Code Highlighting

Lecture 2: Querying in Nuxt Content to Display Blog Post List

Lecture 3: Vue Components in Markdown: Using MDC Syntax

Lecture 4: Blog Post List Redesign #1: Building the UI

Lecture 5: Blog Post List Redesign #2: Adding Logic for New UI

Lecture 6: Moving Projects Page to Markdown

Chapter 8: Build a Nuxt Blog & Portfolio: Adding a Table of Contents

Lecture 1: Table of Contents: Using Slots

Lecture 2: Table of Contents: Creating a Links Component

Lecture 3: Table of Contents: Implementing Smooth Scrolling

Lecture 4: Table of Contents: Highlighting Active Section

Chapter 9: Build a Nuxt Blog & Portfolio: Errors, Page Transitions, Reusability

Lecture 1: Handling 404 Errors: Page Not Found

Lecture 2: Seamless Page Transitions

Lecture 3: Designing Main Page: Reusing Components & Props in MDC

Chapter 10: Build a Nuxt Blog & Portfolio: Fixes & Gotchas

Lecture 1: Resolving Page Transitions & TOC Issues

Lecture 2: Fixing Dark Mode & Perfecting the UI

Chapter 11: Build a Nuxt Blog & Portfolio: Responsive UI & Sitemap with Server Routes

Lecture 1: Adding Responsive Design

Lecture 2: Generating Sitemap (Server Routes & Nitro)

Lecture 3: Generating Static Site

Chapter 12: Git, GitHub & Vercel: From Setup to Deployment in No Time

Lecture 1: Intro: Git, GitHub & Vercel: From Setup to Deployment

Lecture 2: Installing Git and Understanding Git and GitHub

Lecture 3: Creating Repository, Staging, Committing and Setting Up GitHub

Lecture 4: Connecting the Local & Remote Repository and Pushing Changes

Lecture 5: Connecting GitHub to Vercel

Chapter 13: Portfolio Deployment: Go Live with Vercel

Lecture 1: Deploying the Portfolio Project on Vercel

Chapter 14: Full-Stack Finance Tracking App With Nuxt and Supabase

Lecture 1: Intro: Full-Stack Finance Tracking App with Nuxt & Supabase

Lecture 2: IMPORTANT: Overview of Nuxt, NuxtUI Changes and Fixes

Lecture 3: IMPORTANT: Nuxt 4 Compatibility

Lecture 4: Creating the Finance Tracking Project!

Lecture 5: Installing the NuxtUI Module

Lecture 6: Adding Layout Support and Building the Header of the App

Lecture 7: Summary Section and Period Selection

Lecture 8: Trend Component (Icons, Spinners)

Lecture 9: Trend Component (Showing Percentage Difference)

Lecture 10: Currency Formatting Composable – Wrirting Reusable Code

Lecture 11: Single Transaction Component

Lecture 12: Creating Supabase Project

Lecture 13: Using Supabase in Nuxt

Lecture 14: Creating Transactions Table

Lecture 15: Fetching Data – Using Supabase Client

Lecture 16: Income or Expense Transaction?

Lecture 17: Grouping Transactions by Date

Lecture 18: Daily Summary of Transactions

Lecture 19: Deleting Transactions and Toast Component

Lecture 20: Refreshing View by Emitting Events

Lecture 21: Transactions Totals

Lecture 22: Modal Component

Lecture 23: Custom Modal Component – Adding Transactions

Lecture 24: IMPORTANT: Changes in NuxtUI Form Components

Lecture 25: Forms: Inputs

Lecture 26: Forms: State

Lecture 27: Forms: Validation

Lecture 28: Forms: Schema Validation with the Zod Library

Lecture 29: Forms: Clearing Form Data and Errors

Lecture 30: Database Seeding – Generating Fake Data

Lecture 31: Sorting Transactions 2 Ways – on Backend and on Frontend

Lecture 32: Forms: Saving Data (Adding Transaction)

Lecture 33: Refactor Time: Composable – Transaction Fetching

Lecture 34: Working With Dates – Calculate Transaction Time Periods