English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 108 lectures (15h 16m) | 2.24 GB
Unlock Nuxt 3 & Vue Mastery: Build a Markdown Blog-Portfolio & Supabase Finance Tracker
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.
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
Table of Contents
1 Welcome to the Course!
2 Section Intro: Understanding Vue.js and Nuxt Fundamentals
3 What is Vue.js?
4 What is Nuxt?
5 Client vs Server Side Rendering
6 What You Can Build with Nuxt?
7 Installing VSCode, Node and Vue Dev Tools!
8 Getting the Course Source Code!
9 How to get help?
10 Section Intro: Nuxt 3 Blog & Portfolio Deep Dive
11 Creating the New Nuxt Application
12 Creating Pages and Routing
13 Route Parameters and Links
14 Layouts
15 Setting Different Layouts
16 Nuxt Modules & Installing Tailwind CSS
17 Styling the App with Tailwind CSS
18 Components in Nuxt
19 SEO and Meta (And Custom Fonts)
20 Data Fetching
21 Data Fetching: Project List – Listing Your GitHub Projects
22 Dark Mode in Your Project
23 Dark Mode Selector Button
24 Nuxt Content – Static File Based CMS
25 Starting a Blog with Nuxt Content
26 Markdown and Typography
27 Markdown and Meta Tags (Front-matter)
28 Custom Pages in Markdown and Typography Customization
29 Images and Code Highlighting
30 Blog Post List – Querying Content
31 Vue Components Inside Markdown? MDC Syntax!
32 Vue: Blog Post List Redesign #1 – The Look
33 Vue: Blog Post List Redesign #2 – The Logic
34 Project Page in Markdown
35 Table of Contents: Slots
36 Table of Contents: Links Component
37 Table of Contents: Smooth Scrolling
38 Table of Contents: Active Section
39 Handling 404: Page Not Found
40 Page Transitions
41 Main Page, Props in MDC, Reusing the BlogPosts Component
42 Optional: Problem with Page Transitions & TOC
43 Fixing Dark Mode & Perfecting the UI
44 Adding Responsive Design
45 Generating Sitemap (Server Routes & Nitro)
46 Generating Static Site
47 Section Intro: Git, GitHub & Vercel: From Setup to Deployment in No Time
48 Installing Git and Understanding Git and GitHub
49 Creating Repository, Staging, Committing and Setting Up GitHub
50 Connecting the Local & Remote Repository and Pushing Changes
51 Connecting GitHub to Vercel
52 Deploying the Portfolio Project on Vercel
53 Section Intro: Full-Stack Finance Tracking App With Nuxt and Supabase
54 Creating the Finance Tracking Project!
55 NuxtUI, Layout and Header
56 Summary Section and Period Selection
57 Trend Component (Icons, Spinners)
58 Trend Component (Showing Percentage Difference)
59 Currency Formatting Composable – Wrirting Reusable Code
60 Single Transaction Component
61 Creating Supabase Project
62 Using Supabase in Nuxt
63 Creating Transactions Table
64 Fetching Data – Using Supabase Client
65 Income or Expense Transaction?
66 Grouping Transactions by Date
67 Daily Summary of Transactions
68 Deleting Transactions and Toast Component
69 Refreshing View by Emitting Events
70 Transactions Totals
71 Modal Component
72 Custom Modal Component – Adding Transactions
73 Forms: Inputs
74 Forms: State
75 Forms: Validation
76 Forms: Schema Validation with the Zod Library
77 Forms: Clearing Form Data and Errors
78 Database Seeding – Generating Fake Data
79 Sorting Transactions 2 Ways – on Backend and on Frontend
80 Forms: Saving Data (Adding Transaction)
81 Refactor Time: Composable – Transaction Fetching
82 Working With Dates – Calculate Transaction Time Periods
83 Fetching Only the Selected Transactions
84 Fixing Issues: With Hydration, Reactivity and Data
85 Authentication in Supabase
86 Authentication: Sign-In Form and Flow
87 Authentication: Sign-In Logic and Magic Links
88 Authentication: Magic Link Confirmation Page
89 Authentication: Signed In User Data & Signing Out
90 Authentication: Data Protection Setup
91 Authentication: Writing Insert/Select RLS Policies
92 Authentication: Admin Operations and Service Key (Seeder)
93 Authentication: Not Logged In? Redirect!
94 Refactor Time: Reusable App Toast Notification
95 Fixing Issues: User Menu and RLS For Delete Operation
96 User Profile: Nested Routes, Vertical Navigation and Settings Page
97 User Profile: Form
98 User Profile: Saving User Metadata & Changing Email
99 User Profile: Storing and Using App User Preferences
100 Introduction to Supabase Storage
101 Uploading Files (Avatar Image): Getting the File
102 Uploading Files (Avatar Image): Actual Upload to Storage and Access Policies
103 Uploading Files (Avatar Image): Deleting Files
104 Uploading Files (Avatar Image): Displaying User Avatar (Getting Public URL)
105 Editing Transactions – Making the Form Universal
106 Editing Transactions – Making it Work
107 Fixing Issues with Dates & Modals
108 Configuring the Finance Tracker and Deploying on Vercel
Resolve the captcha to access the links!