The Complete Developer Guide
Build complex & engaging Vue apps with Nuxt3. Nuxt3 provides universal rendering, file based router, and other features
Lo que serás capaz de hacer
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 useFetc h 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.
- 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
Temario
UNIDAD 1 - Building The UI Elements · 10 leccionesUNIDAD 1 - Building The UI Elements
UNIDAD 1 - Building The UI Elements
- What We Will Be Building
- Your Two Options
- Creating a Nuxt App
- Adding Tailwind CSS
- Building the NavBar
- Building the Home Hero
- Building the Search Bar
- Building the Side Bar
- Building the Car Card
- Building the Car Details Page
UNIDAD 2 - File Based Routing & Navigation · 9 leccionesUNIDAD 2 - File Based Routing & Navigation
UNIDAD 2 - File Based Routing & Navigation
- Intro to File Based Routing
- Auto Importing Components
- Dynamic and Optional Paths
- Filling the Page With Components
- Unique Dynamic Paths
- The NuxtLink Component
- Adding Programmatic Navigation
- Implementing Nested Pages
- Change Titles With useHead
UNIDAD 3 - Defining Page Layouts · 3 leccionesUNIDAD 3 - Defining Page Layouts
UNIDAD 3 - Defining Page Layouts
- Defining a Default Layout
- Defining a Custom Layout
- Storing Common Functionality in Composables
UNIDAD 4 - Handling Client and Server Errors · 9 leccionesUNIDAD 4 - Handling Client and Server Errors
UNIDAD 4 - Handling Client and Server Errors
- Adding a Page Not Found Page
- The useError Composable
- Dynamically Rendering the Car Cards
- Dynamically Rendering the Car Details Page
- Throwing a Custom Server Error
- How Nuxt Renders Content
- Updating the Location
- Throwing a Client Side Error
- NuxtErrorBoundary to Handle Client Side Errors
UNIDAD 5 - Improving Functionality With Utilities · 4 leccionesUNIDAD 5 - Improving Functionality With Utilities
UNIDAD 5 - Improving Functionality With Utilities
- Optimizing Images with NuxtImg
- The useState Composable
- Adding the Vueuse Module
- Forcing Client Side Rendering
UNIDAD 6 - Revisiting the Skipped Functionality · 2 leccionesUNIDAD 6 - Revisiting the Skipped Functionality
UNIDAD 6 - Revisiting the Skipped Functionality
- Adding the Car Make Filter
- Adding the Car Price Filter
UNIDAD 7 - Authentication and Middleware · 11 leccionesUNIDAD 7 - Authentication and Middleware
UNIDAD 7 - Authentication and Middleware
- Our New Feature
- [OPTIONAL] - Assembling the Pages
- Creating a Supabase Account
- Connecting Supabase to Our Nuxt App
- Enabling Google Authentication
- Implementing Google OAuth
- Conditionally Rendering UI Based on Auth Status
- Implementing the Logout Functionality
- Protecting Routes With Inline Route Middleware
- Named Middleware For DRY Code
- Global Middleware for DRYER Code
UNIDAD 8 - Server Endpoints and HTTP Requests · 10 leccionesUNIDAD 8 - Server Endpoints and HTTP Requests
UNIDAD 8 - Server Endpoints and HTTP Requests
- Intro to Server Endpoints
- Creating a Server Endpoint
- Extracting the Path Parameters
- Extracting the Query Parameters
- Fetching the Data From the Client
- A Hacky Way of Refetching Data
- Adding a Not Found Message for Better UI
- Adding the Fetch Car Endpoint
- Another Fetch Composable
- Fixing an Issue With Error Handling
UNIDAD 9 - Utilizing Postgres for Data Transactions · 16 leccionesUNIDAD 9 - Utilizing Postgres for Data Transactions
UNIDAD 9 - Utilizing Postgres for Data Transactions
- A Small SQL Crash Course
- Installing an ORM
- Programmatically Creating Our Tables
- A Perfect Endpoint
- HTTP Verbs
- Fetching Data From the Database
- Deleting Data From the Database
- Adding the Other Two Endpoints
- Complex Filters
- Our Last Endpoint
- Making a POST Request From the Client
- Making a GET Request From the Client
- Making a DELETE Request From the Client
- Fixing the GET Endpoints
- A POST Message Endpoint
- A GET Message Endpoint
UNIDAD 10 - Image Storage and Retrieval · 2 leccionesUNIDAD 10 - Image Storage and Retrieval
UNIDAD 10 - Image Storage and Retrieval
- Storing Images in a Bucket
- Retrieving the Image URL
UNIDAD 11 - BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE · 1 leccionesUNIDAD 11 - BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE
UNIDAD 11 - BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE
- Please Watch This
UNIDAD 12 - [LEGACY] - Introduction · 4 leccionesUNIDAD 12 - [LEGACY] - Introduction
UNIDAD 12 - [LEGACY] - Introduction
- Introduction to Nuxt and it's Benefits
- Client-Side vs Server-Side vs Universal Rendering
- Pros and Cons of Client-Side and Universal Rendering
- Course Prerequisite
UNIDAD 13 - [LEGACY] - Diving into Nuxt · 16 leccionesUNIDAD 13 - [LEGACY] - Diving into Nuxt
UNIDAD 13 - [LEGACY] - Diving into Nuxt
- App Overview
- Creating a Nuxt App
- Exploring the Boilerplate
- Building the Boilerplate HTML
- Styling Our App
- Managing State
- A Little Bit of TypeScript
- Updating Our State After a Click Event
- Adding the Names Array
- Computing Names Based on Options
- Creating the Name Cards
- Working with Components
- Passing Props to the Components
- Computing the Class Names
- Dealing with Nested Components
- Emitting Events to the Parent Component
UNIDAD 14 - [LEGACY] - Pages and File-Based Routing · 9 leccionesUNIDAD 14 - [LEGACY] - Pages and File-Based Routing
UNIDAD 14 - [LEGACY] - Pages and File-Based Routing
- App Overview
- Adding Bootstrap Globally
- Creating the Landing Page
- Adding Pages into Our App
- Building the Restaurant Page
- Adding the Restaurant Page Logic
- Dynamic and Nest Routes
- Extracting Path Parameters
- Catching the Not Found Error
UNIDAD 15 - [LEGACY] - Formatting Pages with Layouts · 3 leccionesUNIDAD 15 - [LEGACY] - Formatting Pages with Layouts
UNIDAD 15 - [LEGACY] - Formatting Pages with Layouts
- Defining the Default Layout
- Creating a Custom Page Layout
- Injecting Custom Elements to Layout Page
UNIDAD 16 - [LEGACY] - Defining Page Meta Data for Better SEO · 2 leccionesUNIDAD 16 - [LEGACY] - Defining Page Meta Data for Better SEO
UNIDAD 16 - [LEGACY] - Defining Page Meta Data for Better SEO
- Option 1: Using Components
- Option 2: Using Composables
UNIDAD 17 - [LEGACY] - Global State and Composables · 5 leccionesUNIDAD 17 - [LEGACY] - Global State and Composables
UNIDAD 17 - [LEGACY] - Global State and Composables
- App Overview
- Approaches to State Management
- Creating Our First Composable
- Using the Compasable State
- Mutating Our Global State
UNIDAD 18 - [LEGACY] - Fetching Data and HTTP Requests · 8 leccionesUNIDAD 18 - [LEGACY] - Fetching Data and HTTP Requests
UNIDAD 18 - [LEGACY] - Fetching Data and HTTP Requests
- App Overview
- Integrating Tailwind
- Writing the HTML Structure
- The Basics of HTTP Requests
- The useFetch Composable
- Refetching Data with useFetch
- The useAsyncData Composable
- Refetching Data with useAsyncData
UNIDAD 19 - [LEGACY] - Cookies and Runtime Config · 4 leccionesUNIDAD 19 - [LEGACY] - Cookies and Runtime Config
UNIDAD 19 - [LEGACY] - Cookies and Runtime Config
- Storing Data in the Browser with Cookies
- The useCookie Composable
- Storing Runtime Configs
- Error Handling
UNIDAD 20 - [LEGACY] - Building a REST API · 10 leccionesUNIDAD 20 - [LEGACY] - Building a REST API
UNIDAD 20 - [LEGACY] - Building a REST API
- App Overview
- Our Endpoints
- Creating Our Server
- GET Requests
- POST Requests and Body
- PUT & DELETE with Dynamic Endpoints
- Error Handling
- Building the HTML
- Making POST, PUT, DELETE Requests From the Frontend
- Organizing Code in Composable
UNIDAD 21 - [LEGACY] - Integrating with Supabase · 5 leccionesUNIDAD 21 - [LEGACY] - Integrating with Supabase
UNIDAD 21 - [LEGACY] - Integrating with Supabase
- App Overview
- Building the Authentication Card
- Conditionally Displaying Signup or Signin Form
- Creating a Supabase Account and Project
- Connect Nuxt to Supabase
UNIDAD 22 - [LEGACY] - Handling Authentication · 8 leccionesUNIDAD 22 - [LEGACY] - Handling Authentication
UNIDAD 22 - [LEGACY] - Handling Authentication
- Implementing Signup Logic
- Implementing Signin/Login Logic
- Implementing Signout/Logout Logic
- Handling Authentication Errors
- Redirecting to Profile Page
- Creating the Nav Component
- Conditionally Render UI Elements Based on Auth Status
- Protecting Routes with Middleware
UNIDAD 23 - [LEGACY] - SQL and Database Transactions · 5 leccionesUNIDAD 23 - [LEGACY] - SQL and Database Transactions
UNIDAD 23 - [LEGACY] - SQL and Database Transactions
- Creating the Note Form
- The Basics of SQL
- Saving Data to the Database
- Accessing Data From the Database
- This is the Updated Course
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
23 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Laith Harb.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 23 unidades · 156 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Laith Harb; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
