Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Nuxt.js
Master Nuxt 3 - Full-Stack Complete Guide

Master Nuxt 3 - Full-Stack Complete Guide

Loại khoá học: Web Development

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

image
50.000 VND
90 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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.

Bạn sẽ học được gì

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

Yêu cầu

  • Basic front-end skills
  • Basics of JavaScript
  • Basics of Vue
  • Basic back-end skills

Nội dung khoá học

8 sections

Welcome!

1 lectures
Welcome to the Course!
01:37

Understanding Vue.js and Nuxt Fundamentals

5 lectures
Section Intro: Understanding Vue.js and Nuxt Fundamentals
01:41
What is Vue.js?
05:11
What is Nuxt?
07:53
Client vs Server Side Rendering
07:16
What You Can Build with Nuxt?
05:03

Getting Started!

3 lectures
Installing VSCode, Node and Vue Dev Tools!
03:03
Getting the Course Source Code!
01:37
How to get help?
02:44

Building a Blog & Portfolio with Nuxt 3

37 lectures
Section Intro: Nuxt 3 Blog & Portfolio Deep Dive
06:55
Creating the New Nuxt Application
11:52
Creating Pages and Routing
09:03
Route Parameters and Links
07:24
Layouts
09:26
Setting Different Layouts
07:31
Nuxt Modules & Installing Tailwind CSS
03:44
Styling the App with Tailwind CSS
09:13
Components in Nuxt
05:49
SEO and Meta (And Custom Fonts)
09:52
Data Fetching
11:52
Data Fetching: Project List - Listing Your GitHub Projects
11:55
Dark Mode in Your Project
09:14
Dark Mode Selector Button
16:46
Nuxt Content - Static File Based CMS
06:34
Starting a Blog with Nuxt Content
08:17
Markdown and Typography
06:27
Markdown and Meta Tags (Front-matter)
05:36
Custom Pages in Markdown and Typography Customization
05:48
Images and Code Highlighting
08:10
Blog Post List - Querying Content
11:05
Vue Components Inside Markdown? MDC Syntax!
11:42
Vue: Blog Post List Redesign #1 - The Look
06:38
Vue: Blog Post List Redesign #2 - The Logic
13:12
Project Page in Markdown
04:19
Table of Contents: Slots
10:50
Table of Contents: Links Component
13:04
Table of Contents: Smooth Scrolling
05:56
Table of Contents: Active Section
13:29
Handling 404: Page Not Found
09:11
Page Transitions
09:04
Main Page, Props in MDC, Reusing the BlogPosts Component
13:11
Optional: Problem with Page Transitions & TOC
05:27
Fixing Dark Mode & Perfecting the UI
05:48
Adding Responsive Design
11:05
Generating Sitemap (Server Routes & Nitro)
14:08
Generating Static Site
02:05

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

5 lectures
Section Intro: Git, GitHub & Vercel: From Setup to Deployment in No Time
00:49
Installing Git and Understanding Git and GitHub
09:11
Creating Repository, Staging, Committing and Setting Up GitHub
10:16
Connecting the Local & Remote Repository and Pushing Changes
07:15
Connecting GitHub to Vercel
02:49

Portfolio Deployment: Go Live with Vercel

1 lectures
Deploying the Portfolio Project on Vercel
04:50

Full-Stack Finance Tracking App With Nuxt and Supabase

55 lectures
Section Intro: Full-Stack Finance Tracking App With Nuxt and Supabase
02:13
Creating the Finance Tracking Project!
06:42
NuxtUI, Layout and Header
09:34
Summary Section and Period Selection
07:54
Trend Component (Icons, Spinners)
13:12
Trend Component (Showing Percentage Difference)
09:05
Currency Formatting Composable - Wrirting Reusable Code
06:29
Single Transaction Component
14:59
Creating Supabase Project
04:11
Using Supabase in Nuxt
08:31
Creating Transactions Table
09:06
Fetching Data - Using Supabase Client
10:20
Income or Expense Transaction?
05:21
Grouping Transactions by Date
06:50
Daily Summary of Transactions
11:03
Deleting Transactions and Toast Component
10:43
Refreshing View by Emitting Events
12:24
Transactions Totals
10:50
Modal Component
05:33
Custom Modal Component - Adding Transactions
09:39
Forms: Inputs
12:50
Forms: State
05:41
Forms: Validation
07:53
Forms: Schema Validation with the Zod Library
14:26
Forms: Clearing Form Data and Errors
05:31
Database Seeding - Generating Fake Data
13:57
Sorting Transactions 2 Ways - on Backend and on Frontend
07:31
Forms: Saving Data (Adding Transaction)
13:38
Refactor Time: Composable - Transaction Fetching
12:48
Working With Dates - Calculate Transaction Time Periods
12:42
Fetching Only the Selected Transactions
13:04
Fixing Issues: With Hydration, Reactivity and Data
10:33
Authentication in Supabase
05:40
Authentication: Sign-In Form and Flow
08:57
Authentication: Sign-In Logic and Magic Links
10:57
Authentication: Magic Link Confirmation Page
06:57
Authentication: Signed In User Data & Signing Out
09:35
Authentication: Data Protection Setup
07:54
Authentication: Writing Insert/Select RLS Policies
09:27
Authentication: Admin Operations and Service Key (Seeder)
07:50
Authentication: Not Logged In? Redirect!
00:55
Refactor Time: Reusable App Toast Notification
08:13
Fixing Issues: User Menu and RLS For Delete Operation
04:16
User Profile: Nested Routes, Vertical Navigation and Settings Page
09:05
User Profile: Form
10:22
User Profile: Saving User Metadata & Changing Email
09:47
User Profile: Storing and Using App User Preferences
11:02
Introduction to Supabase Storage
04:48
Uploading Files (Avatar Image): Getting the File
11:11
Uploading Files (Avatar Image): Actual Upload to Storage and Access Policies
10:56
Uploading Files (Avatar Image): Deleting Files
10:11
Uploading Files (Avatar Image): Displaying User Avatar (Getting Public URL)
10:09
Editing Transactions - Making the Form Universal
08:59
Editing Transactions - Making it Work
08:32
Fixing Issues with Dates & Modals
09:15

Deploying the Finance Tracker Project

1 lectures
Configuring the Finance Tracker and Deploying on Vercel
13:32

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

How To Create 2D Defender Game With Unity & C#

How To Create 2D Defender Game With Unity & C#

749.000 VND
50.000 VND
The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi