Master Nuxt 3 - Full-Stack Complete Guide

Unlock Nuxt 3 & Vue Mastery: Build a Markdown Blog-Portfolio & Supabase Finance Tracker

What you'll learn

Mastering Nuxt 3 fundamentals and advanced features

Creating a full-fledged blog and portfolio using Markdown

Styling applications effectively with Tailwind CSS

Implementing file-based routing in Nuxt for content management

Utilizing layouts for reusable page structures

Adding a dark/light mode selector to enhance user experience

Building a finance tracker app with Nuxt and Supabase

Leveraging composables for reusable logic

CRUD operations with Supabase

Implementing Row Level Security (RLS) for data permissions in Supabase

User authentication with Supabase Auth

Handling file uploads in a full-stack application

Integrating the NuxtUI component library for a polished UI

Applying best practices in full-stack development with Nuxt and Vue

Access to full source code for hands-on learning and troubleshooting

Requirements

Basic front-end skills

Basics of JavaScript

Basics of Vue

Basic back-end skills

Description

Dive deep into the world of Nuxt 3 with this all-encompassing guide. Geared for developers eager to unlock the full power of the Nuxt 3 framework, this course offers you an intensive, project-based learning experience that will make you a full-stack Nuxt maestro.Kick off your journey with the construction of a markdown-powered blog and portfolio. Learn how to effortlessly style it with Tailwind CSS, and get to grips with Nuxt's file-based routing to manage your content like a pro. Utilize built-in layouts to create reusable structure across different pages. Plus, level up the user experience by implementing a dark/light mode selector.Then, escalate your skill set by developing a robust finance tracker application using Nuxt and Supabase. Master the art of creating composables and discover how to execute operations like getting, inserting, and updating data efficiently with Supabase. Explore Row Level Security (RLS) to manage data permissions and tap into Supabase Auth for seamless user authentication. Get hands-on with file uploads and make your app more interactive and functional. Integrate the NuxtUI component library to give your app a polished look and feel.Through these projects, you'll explore best practices for Nuxt and Vue development that can be universally applied to any full-stack project. Plus, you won't have to worry about getting stuck; the course comes complete with full source code for each project. Don't miss the chance to unlock your full-stack potential. Dive in now.

Overview

Section 1: Welcome!

Lecture 1 Welcome to the Course!

Section 2: Understanding Vue.js and Nuxt Fundamentals

Lecture 2 Section Intro: Understanding Vue.js and Nuxt Fundamentals

Lecture 3 What is Vue.js?

Lecture 4 What is Nuxt?

Lecture 5 Client vs Server Side Rendering

Lecture 6 What You Can Build with Nuxt?

Section 3: Getting Started!

Lecture 7 Installing VSCode, Node and Vue Dev Tools!

Lecture 8 Getting the Course Source Code!

Lecture 9 How to get help?

Section 4: Building a Blog & Portfolio with Nuxt 3

Lecture 10 Section Intro: Nuxt 3 Blog & Portfolio Deep Dive

Lecture 11 Creating the New Nuxt Application

Lecture 12 Creating Pages and Routing

Lecture 13 Route Parameters and Links

Lecture 14 Layouts

Lecture 15 Setting Different Layouts

Lecture 16 Nuxt Modules & Installing Tailwind CSS

Lecture 17 Styling the App with Tailwind CSS

Lecture 18 Components in Nuxt

Lecture 19 SEO and Meta (And Custom Fonts)

Lecture 20 Data Fetching

Lecture 21 Data Fetching: Project List - Listing Your GitHub Projects

Lecture 22 Dark Mode in Your Project

Lecture 23 Dark Mode Selector Button

Lecture 24 Nuxt Content - Static File Based CMS

Lecture 25 Starting a Blog with Nuxt Content

Lecture 26 Markdown and Typography

Lecture 27 Markdown and Meta Tags (Front-matter)

Lecture 28 Custom Pages in Markdown and Typography Customization

Lecture 29 Images and Code Highlighting

Lecture 30 Blog Post List - Querying Content

Lecture 31 Vue Components Inside Markdown? MDC Syntax!

Lecture 32 Vue: Blog Post List Redesign #1 - The Look

Lecture 33 Vue: Blog Post List Redesign #2 - The Logic

Lecture 34 Project Page in Markdown

Lecture 35 Table of Contents: Slots

Lecture 36 Table of Contents: Links Component

Lecture 37 Table of Contents: Smooth Scrolling

Lecture 38 Table of Contents: Active Section

Lecture 39 Handling 404: Page Not Found

Lecture 40 Page Transitions

Lecture 41 Main Page, Props in MDC, Reusing the BlogPosts Component

Lecture 42 Optional: Problem with Page Transitions & TOC

Lecture 43 Fixing Dark Mode & Perfecting the UI

Lecture 44 Adding Responsive Design

Lecture 45 Generating Sitemap (Server Routes & Nitro)

Lecture 46 Generating Static Site

Section 5: Git, GitHub & Vercel: From Setup to Deployment in No Time

Lecture 47 Section Intro: Git, GitHub & Vercel: From Setup to Deployment in No Time

Lecture 48 Installing Git and Understanding Git and GitHub

Lecture 49 Creating Repository, Staging, Committing and Setting Up GitHub

Lecture 50 Connecting the Local & Remote Repository and Pushing Changes

Lecture 51 Connecting GitHub to Vercel

Section 6: Portfolio Deployment: Go Live with Vercel

Lecture 52 Deploying the Portfolio Project on Vercel

Section 7: Full-Stack Finance Tracking App With Nuxt and Supabase

Lecture 53 Section Intro: Full-Stack Finance Tracking App With Nuxt and Supabase

Lecture 54 Creating the Finance Tracking Project!

Lecture 55 NuxtUI, Layout and Header

Lecture 56 Summary Section and Period Selection

Lecture 57 Trend Component (Icons, Spinners)

Lecture 58 Trend Component (Showing Percentage Difference)

Lecture 59 Currency Formatting Composable - Wrirting Reusable Code

Lecture 60 Single Transaction Component

Lecture 61 Creating Supabase Project

Lecture 62 Using Supabase in Nuxt

Lecture 63 Creating Transactions Table

Lecture 64 Fetching Data - Using Supabase Client

Lecture 65 Income or Expense Transaction?

Lecture 66 Grouping Transactions by Date

Lecture 67 Daily Summary of Transactions

Lecture 68 Deleting Transactions and Toast Component

Lecture 69 Refreshing View by Emitting Events

Lecture 70 Transactions Totals

Lecture 71 Modal Component

Lecture 72 Custom Modal Component - Adding Transactions

Lecture 73 Forms: Inputs

Lecture 74 Forms: State

Lecture 75 Forms: Validation

Lecture 76 Forms: Schema Validation with the Zod Library

Lecture 77 Forms: Clearing Form Data and Errors

Lecture 78 Database Seeding - Generating Fake Data

Lecture 79 Sorting Transactions 2 Ways - on Backend and on Frontend

Lecture 80 Forms: Saving Data (Adding Transaction)

Lecture 81 Refactor Time: Composable - Transaction Fetching

Lecture 82 Working With Dates - Calculate Transaction Time Periods

Lecture 83 Fetching Only the Selected Transactions

Lecture 84 Fixing Issues: With Hydration, Reactivity and Data

Lecture 85 Authentication in Supabase

Lecture 86 Authentication: Sign-In Form and Flow

Lecture 87 Authentication: Sign-In Logic and Magic Links

Lecture 88 Authentication: Magic Link Confirmation Page

Lecture 89 Authentication: Signed In User Data & Signing Out

Lecture 90 Authentication: Data Protection Setup

Lecture 91 Authentication: Writing Insert/Select RLS Policies

Lecture 92 Authentication: Admin Operations and Service Key (Seeder)

Lecture 93 Authentication: Not Logged In? Redirect!

Lecture 94 Refactor Time: Reusable App Toast Notification

Lecture 95 Fixing Issues: User Menu and RLS For Delete Operation

Lecture 96 User Profile: Nested Routes, Vertical Navigation and Settings Page

Lecture 97 User Profile: Form

Lecture 98 User Profile: Saving User Metadata & Changing Email

Lecture 99 User Profile: Storing and Using App User Preferences

Lecture 100 Introduction to Supabase Storage

Lecture 101 Uploading Files (Avatar Image): Getting the File

Lecture 102 Uploading Files (Avatar Image): Actual Upload to Storage and Access Policies

Lecture 103 Uploading Files (Avatar Image): Deleting Files

Lecture 104 Uploading Files (Avatar Image): Displaying User Avatar (Getting Public URL)

Lecture 105 Editing Transactions - Making the Form Universal

Lecture 106 Editing Transactions - Making it Work

Lecture 107 Fixing Issues with Dates & Modals

Section 8: Deploying the Finance Tracker Project

Lecture 108 Configuring the Finance Tracker and Deploying on Vercel

Developers looking to transition from frontend to full-stack using Nuxt 3 and Vue,Experienced Vue developers aiming to specialize in Nuxt 3 for more robust projects,Backend developers interested in mastering modern full-stack frameworks and libraries,Professionals in need of building real-world projects,Teams seeking to upskill their developers in best practices for Nuxt, Vue, and Supabase development