Trang chủ

Web Development

Nuxt.js

The Nuxt 3 Bootcamp - The Complete Developer Guide

The Nuxt 3 Bootcamp - The Complete Developer Guide

Loại khoá học: Web Development

Build complex & engaging Vue apps with Nuxt3. Nuxt3 provides universal rendering, file based router, and other features

50.000 VND

60 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

Mô tả

This is the most comprehensive Nuxt 3 course on the market. You will learn many of Nuxt's incredible features all while build six real world projects. With each new project we will dive deep into more and more advanced Nuxt 3 concepts. By the end of the course you can proudly label yourself as a Nuxt expert!

What you'll learn

In the introduction, you will learn exactly what Nuxt is and problems it solves. You will learn about client-side rendering and compare it with universal rendering.

In the first project, we will refresh your Vue 3 knowledge by building an app with the composition API. We will also learn about TypeScript and how Nuxt handles components.

In the second project, we will dive deeper into the Nuxt ecosystem. We will learn about file-based routing, layouts, and defining page metadata.

In the third project, we will learn all about how we can globally manage state with composables.

In project number four, we will learn how to make HTTP requests by using useFetch and useAsyncData.

In the fifth project, we will leverage the powers of Nuxt to build our very own REST API and utilizing it in the client.

Lastly, in the sixth project, we will integrate our app with Supabase to leverage it's authentication and SQL database services.

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

Understanding the additional features that Nuxt provides on top of Vue, like universal rendering, auto importation, and file based routing

Utilizing Nuxt to build production ready application with based development practices

Leveraging the many Nuxt 3 composables like useFetch, useAsyncData, useState or useMeta

Implementing routing with a file based approach

Yêu cầu

Basics of Vue 3
Basics of JavaScript

Nội dung khoá học

23 sections

Building The UI Elements

10 lectures

What We Will Be Building

01:23

Your Two Options

02:15

Creating a Nuxt App

04:06

Adding Tailwind CSS

04:40

Building the NavBar

03:54

Building the Home Hero

06:48

Building the Search Bar

04:34

Building the Side Bar

10:28

Building the Car Card

04:58

Building the Car Details Page

11:57

File Based Routing & Navigation

9 lectures

Intro to File Based Routing

06:59

Auto Importing Components

07:00

Dynamic and Optional Paths

07:15

Filling the Page With Components

03:16

Unique Dynamic Paths

05:44

The NuxtLink Component

02:16

Adding Programmatic Navigation

05:15

Implementing Nested Pages

05:23

Change Titles With useHead

07:12

Defining Page Layouts

3 lectures

Defining a Default Layout

06:15

Defining a Custom Layout

05:20

Storing Common Functionality in Composables

02:43

Handling Client and Server Errors

9 lectures

Adding a Page Not Found Page

05:32

The useError Composable

01:51

Dynamically Rendering the Car Cards

05:55

Dynamically Rendering the Car Details Page

06:50

Throwing a Custom Server Error

03:47

How Nuxt Renders Content

11:59

Updating the Location

07:05

Throwing a Client Side Error

03:11

NuxtErrorBoundary to Handle Client Side Errors

05:52

Improving Functionality With Utilities

4 lectures

Optimizing Images with NuxtImg

04:49

The useState Composable

06:23

Adding the Vueuse Module

10:13

Forcing Client Side Rendering

04:08

Revisiting the Skipped Functionality

2 lectures

Adding the Car Make Filter

09:30

Adding the Car Price Filter

16:10

Authentication and Middleware

11 lectures

Our New Feature

03:31

[OPTIONAL] - Assembling the Pages

47:08

Creating a Supabase Account

02:47

Connecting Supabase to Our Nuxt App

03:59

Enabling Google Authentication

04:21

Implementing Google OAuth

08:08

Conditionally Rendering UI Based on Auth Status

03:26

Implementing the Logout Functionality

06:18

Protecting Routes With Inline Route Middleware

08:22

Named Middleware For DRY Code

02:46

Global Middleware for DRYER Code

03:16

Server Endpoints and HTTP Requests

10 lectures

Intro to Server Endpoints

01:45

Creating a Server Endpoint

03:11

Extracting the Path Parameters

03:59

Extracting the Query Parameters

04:02

Fetching the Data From the Client

09:21

A Hacky Way of Refetching Data

03:11

Adding a Not Found Message for Better UI

01:58

Adding the Fetch Car Endpoint

07:16

Another Fetch Composable

03:45

Fixing an Issue With Error Handling

01:45

Utilizing Postgres for Data Transactions

16 lectures

A Small SQL Crash Course

05:59

Installing an ORM

05:06

Programmatically Creating Our Tables

08:28

A Perfect Endpoint

22:02

HTTP Verbs

03:11

Fetching Data From the Database

05:12

Deleting Data From the Database

02:47

Adding the Other Two Endpoints

11:35

Complex Filters

08:10

Our Last Endpoint

01:26

Making a POST Request From the Client

15:51

Making a GET Request From the Client

01:26

Making a DELETE Request From the Client

08:20

Fixing the GET Endpoints

04:37

A POST Message Endpoint

09:15

A GET Message Endpoint

03:07

Image Storage and Retrieval

2 lectures

Storing Images in a Bucket

08:35

Retrieving the Image URL

05:38

BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE

1 lectures

Please Watch This

02:03

[LEGACY] - Introduction

4 lectures

Introduction to Nuxt and it's Benefits

04:31

Client-Side vs Server-Side vs Universal Rendering

04:34

Pros and Cons of Client-Side and Universal Rendering

04:30

Course Prerequisite

03:07

[LEGACY] - Diving into Nuxt

16 lectures

App Overview

02:52

Creating a Nuxt App

03:16

Exploring the Boilerplate

04:34

Building the Boilerplate HTML

04:48

Styling Our App

09:17

Managing State

07:46

A Little Bit of TypeScript

13:01

Updating Our State After a Click Event

02:49

Adding the Names Array

07:52

Computing Names Based on Options

06:20

Creating the Name Cards

06:13

Working with Components

10:03

Passing Props to the Components

10:12

Computing the Class Names

07:33

Dealing with Nested Components

06:14

Emitting Events to the Parent Component

06:17

[LEGACY] - Pages and File-Based Routing

9 lectures

App Overview

04:42

Adding Bootstrap Globally

06:51

Creating the Landing Page

06:36

Adding Pages into Our App

06:14

Building the Restaurant Page

09:26

Adding the Restaurant Page Logic

10:59

Dynamic and Nest Routes

07:22

Extracting Path Parameters

08:55

Catching the Not Found Error

02:19

[LEGACY] - Formatting Pages with Layouts

3 lectures

Defining the Default Layout

03:39

Creating a Custom Page Layout

08:29

Injecting Custom Elements to Layout Page

10:31

[LEGACY] - Defining Page Meta Data for Better SEO

2 lectures

Option 1: Using Components

06:42

Option 2: Using Composables

03:23

[LEGACY] - Global State and Composables

5 lectures

App Overview

02:24

Approaches to State Management

06:53

Creating Our First Composable

06:08

Using the Compasable State

06:39

Mutating Our Global State

03:16

[LEGACY] - Fetching Data and HTTP Requests

8 lectures

App Overview

04:36

Integrating Tailwind

08:10

Writing the HTML Structure

11:19

The Basics of HTTP Requests

04:06

The useFetch Composable

08:44

Refetching Data with useFetch

05:44

The useAsyncData Composable

08:08

Refetching Data with useAsyncData

02:12

[LEGACY] - Cookies and Runtime Config

4 lectures

Storing Data in the Browser with Cookies

02:18

The useCookie Composable

04:57

Storing Runtime Configs

08:20

Error Handling

06:51

[LEGACY] - Building a REST API

10 lectures

App Overview

03:08

Our Endpoints

02:16

Creating Our Server

07:00

GET Requests

05:50

POST Requests and Body

07:06

PUT & DELETE with Dynamic Endpoints

15:43

Error Handling

06:38

Building the HTML

08:19

Making POST, PUT, DELETE Requests From the Frontend

08:53

Organizing Code in Composable

07:15

[LEGACY] - Integrating with Supabase

5 lectures

App Overview

03:25

Building the Authentication Card

12:40

Conditionally Displaying Signup or Signin Form

05:53

Creating a Supabase Account and Project

04:52

Connect Nuxt to Supabase

05:40

[LEGACY] - Handling Authentication

8 lectures

Implementing Signup Logic

12:23

Implementing Signin/Login Logic

05:49

Implementing Signout/Logout Logic

05:29

Handling Authentication Errors

04:14

Redirecting to Profile Page

07:24

Creating the Nav Component

09:27

Conditionally Render UI Elements Based on Auth Status

02:39

Protecting Routes with Middleware

09:55

[LEGACY] - SQL and Database Transactions

5 lectures

Creating the Note Form

10:42

The Basics of SQL

09:47

Saving Data to the Database

05:58

Accessing Data From the Database

08:05

This is the Updated Course

00:08

Đá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?

Email

Nội dung

Khoá học liên quan

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

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

Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

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

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

Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

Đă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