Vue.js: De cero a experto

Vue.js - de Cero a Experto: Composition Api

Nueva entrega renovada del curso que se enfoca plenamente en el Composition Api, TypeScript y Vitest para crear aplicaciones modernas.

Adquirir Ahora Vista previa gratis

Contenido del curso

1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - Indecision App
4. Explicación de archivos y directorios
5. Trabajando con SFC - Single File Components
6. Estado y eventos
7. Nuestro primer componente
8. Define Props - Recibir Properties
9. Componente tradicional
10. Separar lógica del SFC
11. Integrar estilos de terceros
12. Crear y desplegar aplicación
13. Composable Functions
14. Reutilizar lógica del contador
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Continuación de la sección
5. Estructura y diseño del chat
6. Diseño de mensajes
7. Comunicación entre componentes
8. Emitir eventos - DefineEmits
9. Pensemos en composables
10. Realizar petición HTTP
11. Referencias a elementos HTML
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción a las pruebas
4. Configuración de Vitest
5. Tarea - Pruebas sobre sumatoria de arreglo
6. Pruebas sobre componentes de Vue
7. Configuraciones de TypeScript
8. Pruebas sobre renderizado del componente
9. Disparar eventos - trigger
10. Probar composables - useCounter
11. Pruebas en el componente ChatBubble
12. Pruebas en el componente MessageBox
13. Probar emisiones
14. Probar modificadores de eventos
15. Pruebas en el componente ChatMessages
16. Probar que el scroll se dispare
17. Pruebas en el componente IndecisionView
18. Pruebas en composable - useChat
19. Mock del Fetch API
20. Cobertura del testing
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Inicio de proyecto - PokemonGame
5. Estructura de la aplicación
6. Enumeraciones y tipado de datos
7. Propiedades computadas y orden aleatorio
8. Determinar el pokemon correcto
9. Componente PokemonPicture
10. Mostrar las posibles opciones
11. Determinar si la persona gana o pierde
12. Bloquear opciones
13. Nuevo juego
14. Alias para paths
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. Empecemos por lo atómico - Axios y Tipos
5. Pruebas en PokemonPicture
6. Pruebas en PokemonOptions
7. Pruebas con disabled y estilos
8. usePokemonGame - Pruebas y problemas
9. Flush Promises
10. Axios Mock Adapter
11. Pruebas en funciones del composable
12. Evaluar la función checkAnswer
13. Mock default export - Canvas Confetti
14. Pruebas en PokemonGame - Mock de código propio
15. Pruebas en PokemonGame - Componentes
16. Pruebas en PokemonGame - Últimas pruebas
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Inicio de proyecto - Vue Router
5. Preparación de la estructura y archivos
6. Instalación de Vue Router
7. Re-utilización de estructura HTML
8. Tailwind Components
9. Rutas hijas y padres
10. Auth Layout
11. Página 404
12. Argumentos por URL
13. Procesar argumentos por URL
14. useRouter - Composable
15. Proteger Rutas
16. Ciclo de vida de los componentes
17. Keep Alive - Activar y Desactivar
18. Router Link Active
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la aplicación
4. Pruebas en App y LandingLayout
5. Pruebas en PokemonPage - Stubs
6. Pruebas con Guards - isAuthenticated
7. Espías en LocalStorage
8. Pruebas en el router - Parte 1
9. Pruebas en el router - Parte 2 - Argumentos
10. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la aplicación
4. Inicio de sección - ProjectsApp
5. Librería de componentes DaisyUI
6. Estructura de los componentes
7. Estructura de projects view
8. Botón Flotante con Slots
9. Modals sin slots
10. Funcionalidad del modal
11. Named Slots - Slots con nombre
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de proyecto - Instalación de Pinia
5. Projects Store
6. Usando el Store
7. Colocar foto en el modal
8. Store to LocalStorage
9. Menú lateral
10. Project View - Pantalla para ver el proyecto
11. Redireccionar si no existe el proyecto
12. Tarea: Agregar tareas al proyecto
13. Resolución de la tarea
14. Completar tareas y progreso
15. Resolución de la tarea
16. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Configuraciones iniciales
4. Pruebas en el Main.ts
5. Pruebas en FabButton - Clases
6. Pruebas en FabButton - Slots
7. Pruebas en CustomModal - Slots y Atributos
8. Pruebas en Store de Pinia
9. Store - Add Project y LocalStorage
10. Agregar Tarea y Cambiar completado
11. Store $Patch
12. SideMenu - Pinia Test Utils
13. Projects View
14. ProjectView - Mock sobre store
15. Código fuente de la sección
1. Inicio de sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Inicio de proyecto - AdminShop
5. ShopLayout - Diseño de la tienda
6. Levantar nuestro backend
7. Variables de entorno - Axios
8. Obtener productos paginados
9. TanStack Query - useQuery
10. Obtener el url de las imágenes
11. Mostrar productos en pantalla
12. Solución de la tarea
13. Componente para la paginación
14. Funcionalidad de la paginación
15. Carga adelantada y Scroll
16. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la aplicación
5. Login Action - Autenticación
6. Pinia - AuthStore
7. Realizar proceso de autenticación
8. Terminar pantalla de login
9. Tarea - Registro de usuarios
10. Registro de usuarios
11. Interceptores de Axios
12. Subscripción de estado y Redirecciones
13. Guard - No Autenticado
14. Cerrar sesión
15. Nota de actualización
16. Resolución de tarea - IsAdminGuard
17. Pantalla de carga
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la aplicación
5. Pantalla de productos
6. usePagination - Composable
7. Pantalla de Producto
8. Cargar información del producto
9. Formularios - Ref y Reactive - El problema
10. Formularios en Vue - VeeValidate
11. Mostrar los errores en pantalla
12. Custom input y v-model
13. Custom TextArea y Posteo del formulario
14. Selectores y Arreglos
15. Inicializar formulario con valores del producto
16. Indicador visual de tallas seleccionadas
17. Metadata del formulario
18. Errores en español
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la sección
5. Acción - UpdateProduct
6. useMutation - Actualizar producto
7. Crear un nuevo producto
8. Evitar duplicidad de código
9. File selector - Mostrar imágenes antes de cargarlas
10. Postman - Carga de imagen
11. Cargar imágenes al guardar producto
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Levantar aplicación - Backend y Frontend
4. Generar aplicación de distribución
5. Subir backend a GitHub
6. Aprovisionar base de datos - NeonTech
7. Desplegar backend a Railway
8. Cambios y actualizaciones en el despliegue
9. Resolución de la tarea
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. Diferentes envs por ambiente
5. Probar que componentes existan - ShopLayout.test
6. Pruebas con interceptores de Axios
7. Configuración global de Yup
8. Prepara información falsa
9. getProductImageAction y getProductsAction
10. getProductById - Obtener un producto
11. Pruebas a la hora de crear un producto
12. Pruebas a la hora de actualizar un producto
13. Pruebas cargando archivos
14. SEED - Asegurar pruebas flexibles
15. Pruebas en ProductsView - TanStack
16. Mock TanStack
17. ProductView - Preparación para pruebas
18. Debe de mostrar un producto en pantalla
19. Debe de postear el formulario
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Enlaces oficiales
4. Instalación y creación de una app con Quasar
5. Explicación de los archivos del proyecto
6. Explicación del directorio SRC
7. Cambiar la iconografía de la aplicación
8. Crear páginas y rutas
9. Navegación dinámica
10. Typography
11. Crear definición de enlaces en archivo independiente
12. Controlar el menú lateral desde Vuex
13. useUI - Composable Function
14. Propiedades computadas - Set y Get
15. Sistema de Filas y Columnas
16. Cambiar tamaño dependiendo de la pantalla
17. Flexbox
18. Dialogs
19. Inputs y Formularios
20. Valor del formulario y validaciones personalizadas
21. Notificaciones
22. Código fuente
1. Introducción a la sección
2. Temas puntuales de la sección
3. Nota Importante
4. Demostración del proyecto
5. Inicio de proyecto - MapasApp
  PRUEBA GRATIS
6. Preparación inicial del proyecto
7. Configurar Vuex con TypeScript
8. Primer módulo de Vuex - Places
9. Action - getInitialLocation
10. Composable - usePlacesStore
11. Preparar el espacio para colocar el mapa
12. Loading y referencia al contenedor del mapa
13. Mostrar mapa de Mapbox
14. Mostrar mapa tan pronto tenemos la ubicación del usuario
15. Popups y Markers
16. Segundo módulo de Vuex - Map
17. Establecer mapa en el Store
18. Botón para mover a la ubicación central
19. SearchResults - Diseño de componente
20. Implementar un debounce manualmente
21. Mapbox SearchAPI e interfaces
22. Realizar petición Http para obtener los lugares
23. Almacenar los lugares en el Store
24. Mostrar los lugares en el componente de resultados
25. Activar lugar y mover la cámara
26. Colocar marcadores en todos los lugares encontrados
27. Obtener ruta entre dos puntos
28. Obtener información de la ruta
29. Mostrar la ruta en el mapa
30. Borrar la polyline
31. Almacenar la distancia y duración
32. Mostrar la distancia y duración en pantalla
33. Desplegar la aplicación en la web
34. Código fuente de la sección
1. Más información sobre nuestros otros cursos
2. Fin del curso

Acerca de este curso

339 lecciones
37.5 horas de contenido en video
USD 50.00

Cursos que podrían interesarte

+DevTalles

Este segmento es exclusivo para sesiones en vivo con Fernando Herrera. Durante estas podrás realizar preguntas relacionadas al contenido de sus cursos y participar de forma interactiva con los panelistas. Se incluyen grabaciones de sesiones pasadas.

Pago único

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos pueden aplicar.

Comprar ahora

Suscripción
Devtalles PRO Mensual

^USD16

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante el mes de vigencia.

Suscripción
DevTalles PRO Trimestral

^USD48

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante 3 meses de vigencia.

Suscripción
DevTalles PRO Semestral

^USD96

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante los 6 meses de vigencia.

Suscripción
DevTalles PRO Anual

^USD176

El mejor precio disponible

Suscribirme ahora

Adquiere 1 año entero de suscripción al precio de 11 meses. Obtienes acceso ilimitado a toda la plataforma, comunidades, cursos, clases en vivo, acceso anticipado a una comunidad exclusiva y cursos en construcción.

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en Vue, te invitamos a seguir el Programa Vue Expert diseñado para que sigas aprendiendo.

Ver programas