Vue.js 3 Masterclass: Build 7 Real-World Apps
Master Vue 3 & the Composition API by building 7 production-ready apps and launching your frontend developer career!
Lo que serás capaz de hacer
Learn Vue.js 3 by building 7 real-world applications — from scratch to production-ready — and gain the skills top companies actively seek. If you want to become a job-ready frontend developer in 2025, you need more than theory — you need projects that prove your skills . This course focuses 100% on Vue 3 with the Composition API , the modern standard companies actually use, so you’ll be prepared for the real job market and advanced technical interviews anywhere in the world. What you’ll learn and build: Vue 3 Fundamentals – templates, directives, loops, and conditional rendering Modern Components – props, events, slots, and reusable architecture Advanced Techniques – custom composables, smooth transitions, Drag & Drop Routing & State – SPAs with Vue Router and clean state management with Pinia TypeScript Integration – safer, more maintainable Vue code UI/UX – Optimistic UI patterns for a better user experience Custom Components – build a fully functional modal from scratch Projects you’ll complete: Can You Drive? Simple Quiz (your exercise project) Image Gallery Task List Event Registration Mini-App User Settings App Recipe Book App Trello Board App (Drag & Drop + Modals) By the end, you’ll have 7 portfolio-ready apps and the confidence to build scalable, high-performance, production-grade applications with Vue 3 in any real-world environment. Enroll today!
- Build modern, type-safe Vue 3 applications using Composition API and TypeScript.
- Create 7 real-world applications to build a strong portfolio.
- Develop scalable and reusable components with props, events, and slots.
- Implement clean and efficient state management using Pinia.
- Structure single-page applications (SPAs) with Vue Router, including dynamic routes.
- Author custom composables to share reactive logic across your application.
Temario
UNIDAD 1 - Vue 3: The Zero-Setup Introduction · 2 leccionesUNIDAD 1 - Vue 3: The Zero-Setup Introduction
UNIDAD 1 - Vue 3: The Zero-Setup Introduction
- Vue 3 With ZERO Installation - Build Your First App
- Course Resources
UNIDAD 2 - 1st Mini Project - Can you Drive? · 8 leccionesUNIDAD 2 - 1st Mini Project - Can you Drive?
UNIDAD 2 - 1st Mini Project - Can you Drive?
- Intro: Project 1
- Making the Vue App Alive!
- Reactivity in Vue - Using ref()
- Computed Properties - Using computed()
- Conditional CSS Classes
- Input Bindings
- Exercise 1 - Build a Simple Quiz Game
- Exercise 1 - Solution
UNIDAD 3 - 2nd Mini Project - Image Gallery with Favorites · 9 leccionesUNIDAD 3 - 2nd Mini Project - Image Gallery with Favorites
UNIDAD 3 - 2nd Mini Project - Image Gallery with Favorites
- Intro: 2nd Mini Project
- Event Handling (v-on)
- Event Handling Modifiers
- Conditional Rendering (v-if)
- Rendering Lists (v-for)
- Attribute Binding
- Exercise 2 - Favorite Toggling/Image Removing
- Exercise 2 - Solution to Task 1
- Exercise 2 - Solution to Task 2
UNIDAD 4 - 3rd Mini Project - Task Manager · 10 leccionesUNIDAD 4 - 3rd Mini Project - Task Manager
UNIDAD 4 - 3rd Mini Project - Task Manager
- Intro: 3rd Mini Project
- Lifecycle Hooks
- Template Refs (Accessing DOM Elements)
- Displaying Task List
- Adding New Tasks
- Watchers and Side Effects
- Comparing watch with watchEffect
- Using Local Storage
- Exercise 3 - Remove Button & Filtering Tasks
- Exercise 3 - Solution
UNIDAD 5 - 4th Medium Project - Event Registration (Components) · 15 leccionesUNIDAD 5 - 4th Medium Project - Event Registration (Components)
UNIDAD 5 - 4th Medium Project - Event Registration (Components)
- Intro: 4th Medium Project
- Creating Vue Project using Vite
- Understanding the Project Structure and Files
- Installing and Using TailwindCSS
- Creating and Using Components
- Rendering a List of Components
- Passing Props
- Component Events
- Fall through Attributes
- Basic Component Slots
- Exercise 4 - Create a Reusable Card Component
- Exercise 4 - Solution
- Named Slots
- Conditional Named Slots
- Component Variants
UNIDAD 6 - 4th Medium Project - Event Registration (Data Fetching) · 8 leccionesUNIDAD 6 - 4th Medium Project - Event Registration (Data Fetching)
UNIDAD 6 - 4th Medium Project - Event Registration (Data Fetching)
- Intro: 4th Medium Project - Checkpoint #1
- Setting Up the Mock API Server
- Fetching Data
- Loading State
- Preventing Layout Shifts (Placeholders)
- Posting Data to the Server
- Exercise 5 - Loading Bookings
- Exercise 5 - Solution
UNIDAD 7 - 4th Medium Project (Optimistic UI, Error Handling) · 10 leccionesUNIDAD 7 - 4th Medium Project (Optimistic UI, Error Handling)
UNIDAD 7 - 4th Medium Project (Optimistic UI, Error Handling)
- Intro: 4th Medium Project - Checkpoint #2
- Optimistic UI Explained with Event Booking Example
- Implementing Event Booking Optimistic UI
- Cancelling Bookings with Optimistic UI
- Extracting EventList: Why?
- Extracting EventList: Let's Go!
- Extracting EventList: Handling Empty States
- Extracting EventList: Error Handling and Error Recovery
- Responsive Design
- Dynamic Components & Icons
UNIDAD 8 - 4th Medium Project (Composables & Sharing State) · 6 leccionesUNIDAD 8 - 4th Medium Project (Composables & Sharing State)
UNIDAD 8 - 4th Medium Project (Composables & Sharing State)
- Intro: Composables and State Sharing
- Creating and Using Composables
- Using Composable and Eliminating Events
- The BookingList Component
- Error Handling Component & Exercise 6
- Exercise 6 Solution
UNIDAD 9 - 5th Medium Project (TypeScript, Transitions, Tabs) · 8 leccionesUNIDAD 9 - 5th Medium Project (TypeScript, Transitions, Tabs)
UNIDAD 9 - 5th Medium Project (TypeScript, Transitions, Tabs)
- Intro: 5th Medium Project Introduction
- Create a Vue TypeScript Project & Add Tailwind
- Define Props and Events with TypeScript Types
- Narrowing Down the Types of refs and Other Data
- Rendering Tabs - How to Display the Tab Active State?
- Rendering Tab Content using Dynamic Components
- Transitions - How to Add CSS Transitions on Tab Content
- Custom Transition Components - How to Reuse Transitions?
UNIDAD 10 - 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State) · 10 leccionesUNIDAD 10 - 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)
UNIDAD 10 - 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)
- Intro: 5th Medium Project Checkpoint #2
- General Form Markup & Transition Gotcha
- How is the reactive Function Different from ref in Vue 3?
- KeepAlive Component - How to Not Lose the State of Dynamic Components?
- Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data
- Syncing Local Storage: How to Store and Retrieve Settings
- TypeScript Safety: Generics and Keyof - Mindblowing Type Safety!
- Building a Notification System using Toast Component
- Creating a useNotifications Composable
- Teleport Component - How to Move Markup to Another Element (e.g. body)
UNIDAD 11 - 6th Medium Project (Vue Router) · 11 leccionesUNIDAD 11 - 6th Medium Project (Vue Router)
UNIDAD 11 - 6th Medium Project (Vue Router)
- Intro: 6th Project
- Creating the Recipe Book Project
- Understanding Vue Router and it's Config
- How Route Views are Rendered and How to Add Links?
- Adding Routes, RouterLink vs A Element and Using Route Name
- Dynamic Routes - How to Define Them and Read Parameters in the Component?
- Linking to Dynamic Routes with Params
- Fallback Route, 404 Page - It's not Easy!
- Programmatic Navigation
- Data Fetching Inside the onMounted Hook Caveat and Solution!
- Redirects and Aliases
UNIDAD 12 - 6th Medium Project (Pinia State Management) · 13 leccionesUNIDAD 12 - 6th Medium Project (Pinia State Management)
UNIDAD 12 - 6th Medium Project (Pinia State Management)
- Understanding Pinia: What It Is, How It Works, and Why You Need It
- Defining and Creating Store
- Adding Actions to Your Pinia Store
- Working with Getters in Pinia
- Listing and Filtering Recipes: Balancing Logic in the Store
- Pinia Plugins
- Pinia Plugin: Syncing with Local Storage
- Pinia and TypeScript: Typing Custom Properties
- Exercise 7 - Edit Form
- Exercise 7 Solution - Edit Form
- Favorites: Pinia Action, Getter and Component Changes
- Favorites: Mixing Pinia State and List of Favorites
- Adding Tailwind CSS and Styling Your App
UNIDAD 13 - 7th Project - Trello Clone (Drag & Drop, Modal) · 14 leccionesUNIDAD 13 - 7th Project - Trello Clone (Drag & Drop, Modal)
UNIDAD 13 - 7th Project - Trello Clone (Drag & Drop, Modal)
- Intro: 7th Medium Project
- Setting Up the Trello Clone Project
- Adding the Lists UI
- Types & Reactive List of Cards
- Adding Drag&Drop
- How Scoped Named Slots Work
- Building a Modal Dialog - It's Simple!
- Building a Modal Dialog - Opening & Closing
- Focusing the Input when Modal Dialog Opens
- Trapping Focus Within the Modal Dialog
- Adding & Editing Cards - App Logic
- Adding & Editing Cards - ModalDialog Logic & Finishing Touches
- Summary: What We've Learned
- What Next? 11 Ideas For Extending the Project
UNIDAD 14 - Bonus · 1 leccionesUNIDAD 14 - Bonus
UNIDAD 14 - Bonus
- Bonus
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
14 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 Piotr Jura | 73,000+ Students.
- 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.
- 14 unidades · 125 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 Piotr Jura | 73,000+ Students; 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.
