Envíanos tu consulta
![iconoCurso](data:image/svg+xml;utf8, <svg width="920" height="920" viewBox="0 0 920 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M539.443 162L460 299.637L380.557 162H116L460 758L804 162H539.443Z" fill="%234DB983"/>
<path d="M539.293 162.009L460 299.418L380.707 162.009H254L460 519L666 162L539.293 162.009Z" fill="%23435467"/>
</svg>)
Curso completo de Vue 3 Avanzado y Nuxt
DISPONIBLE EN MODALIDAD:
Desarrolla aplicaciones Vue con NuxtJS, gestiona el estado con Pinia y realiza pruebas con Jest y Cypress. Aprende a crear aplicaciones web completas.
Aprende a desarrollar aplicaciones Vue aprovechando los beneficios de NuxtJS, además de aprender a gestionar el estado de la aplicación con Pinia y redactar tests con Jest y Cypress.
El curso de Vue 3 Avanzado y Nuxt es una oportunidad única para expandir tus conocimientos sobre el desarrollo web utilizando el framework Vue.js y la poderosa herramienta Nuxt.js. En este curso, explorarás los conceptos más avanzados de Vue 3 y aprenderás a utilizar las características más sofisticadas de Nuxt para crear aplicaciones web escalables y de alto rendimiento.
Formación en Vue 3 Avanzado y Nuxt bonificable para empresas
¿A quién va dirigido?
Desarrolladores web con experiencia en Vue 3 que quieran facilitar el proceso de desarrollo de Vue aprovechando los beneficios de NuxtJS, además de aprender a gestionar el estado de la aplicación con Pinia y redactar tests con Jest y Cypress.
Objetivos
- Aprender a crear aplicaciones Vue con Vite, además de introducirse en Nuxt para sistemas SSG/SSR
- Aprender a desarrollar y validar formularios con Vee-Validate en proyectos Vue 3, además de configurar e implementar Pinia como solución para gestión de estado
- Aprender a desarrollar baterías de tests unitarios y de integración completos con Jest en proyectos Vue 3
- Aprender a configurar e implementar tests e2e con Cypress y automatizar su ejecución y análisis con el Cypress Dashboard
- Aprender técnicas de inyección, patrones, comunicación asíncrona entre componentes, mejora de la performance y resolver los problemas más comunes en proyectos Vue 3
¿Qué vas a aprender?
Aprende a desarrollar aplicaciones Vue aprovechando los beneficios de NuxtJS, además de aprender a gestionar el estado de la aplicación con Pinia y redactar tests con Jest y Cypress. El curso de Vue 3 Avanzado y Nuxt es una oportunidad única para expandir tus conocimientos sobre el desarrollo web utilizando el framework Vue.js y la poderosa herramienta Nuxt.js. En este curso, explorarás los conceptos más avanzados de Vue 3 y aprenderás a utilizar las características más sofisticadas de Nuxt para crear aplicaciones web escalables y de alto rendimiento.
Requisitos
- Conocimientos previos en JavaScript (ES6 o superior), Typescript, HTML y CSS, además de experiencia desarrollando y desplegando aplicaciones Vue 3
- Se recomienda haber realizado previamente proyectos Vue con Pinia y Vuex, además de tests unitarios en Typesript con Jest
- Tener instalados previamente en el equipo: Node LTS, NPM, Visual Studio Code, Git y Docker Desktop
- Disponer de un equipo con acceso a un usuario con permisos suficientes de instalación de software
Temario del curso
tema 1
Performance de aplicaciones Vue
- ¿Qué es la velocidad y por qué es importante el rendimiento de nuestras aplicaciones web?
- ¿Cuál es la velocidad de builds de Vue 3 comparado con otras soluciones del mercado?
- ¿Cuál es el tamaño medio de las builds de Vue 3 comparado con otras soluciones del mercado?
- ¿Cuál es la velocidad media de scripting, renderizado y pintado de aplicaciones Vue 3?
- El valor de la velocidad en las métricas de negocio y sus implicaciones
- ¿Cómo el rendimiento afecta en la conversión?
- Problemas de rendimiento más comunes en proyectos Vue 3
- ¿Cómo medir el rendimiento y saber si existen problemas en nuesros proyectos Vue 3?
- ¿Qué soluciones podemos llevar a cabo para garantziar velocidad?
- Introducción a PageSpeed Insights
- Introducción a WebPageTest
- Configuración de Chrome Devtools para obtener un panel de performance
- Análisis de rendimiento a través de la extensión de Vue DevTools
- Introducción a LightHouse CI
- Introducción al uso de Web Vitals
- Introducción al concepto de LCP (Largest Contentful Paint) y cómo optimizar
- Introducción al conpecto de CLS (Cumulative Layout Shift) y cómo optimizar
- Introducción al concepto de FID (First Input Delay) y cómo optimizar
- Introducción al concepto de carga perezosa
- La implicación del ciclo de vida de los componentes de Vue 3 en el rendimiento de la aplicación
- Carga perezosa de componentes y rutas en Vue 3
- Trabajando con la caché
- Evitando Deep Object Watchers en Vue 3
- Haciendo uso restringido de Object.Freeze en Vue 3
- IntersectionObserver
- Evitendo getters funcionales en Vue 3
- Introducción a la optimización de imágenes y vídeo en proyectos Vue 3
- Carga perezosa de imágenes y vídeo
- ¿Cómo escoger la compresión adecuada de imágenes?
- Herramientas para compresión de imágenes
- Uso de imágenes WebP
- Principales problemas de rendimiento en el uso de GIFs
- ¿Cómo servir imágenes responsive y con dimensiones correctas?
- Optimización de tareas de alta duración
- Optimización a la hora de priorizar recursos y precarga de éstos
- Precarga de assets críticos de nuestro proyecto
- Optimización según calidad de red del usuario
- Precarga de recursos para navegaciones futuras del usuario
- Introducción a la optimización de CSS
- Minificación de CSS y extracción de CSS críticos
- Optimización de recursos de terceros en proyectos Vue 3
- Introducción a la optimización de fuentes
- Optimización de fuentes durante la carga y renderizado
- ¿Cómo informar acerca de las métricas y evangelizar una cultura de rendimiento?
tema 2
PWAs
- ¿Qué es una PWA?
- Instalaciones y configuraciones de proyecto Vue 3 como PWA con Vue Cli
- Instalaciones y configuraciones de proyecto Vue 3 como PWA con Vite
- Analizando el archivo Manifest de un proyecto PWA
- Personalizando el aspecto e iconos de nuestro PWA
- Introducción a los Web Workers
- Introducción a los Service Workes
- Introducción a los Worklets
- Web Workers vs Service Workers vs Worklets
- Profundizando en el ServiceWorker y su configuración en proyectos Vue 3 PWA
- Parando y reiniciando un serviceworker
- Realizando tareas en segundo plano a través de Service Workes
- Trabajando la caché de peticiones http y recursos con Service Workers
- Instalación de una PWA en equipo de escritorio y en móvil
- Recibiendo y mostrando notificaciones push
- Trabajos en segundo plano
- Limitaciones de las PWA
tema 3
Testing unitario y de integración con Jest en proyectos Vue 3
- Introducción a los tests unitarios y de integración
- ¿Qué es el coverage de un proyecto y por qué es importante?
- Introducción a Jest
- Instalación de Jest en un proyecto Vue y configuración esencial con Vue Cli
- Instalación de Jest en un proyecto Vue y configuración esencial con Vite
- Estableciendo nuestros primeros archivos de tests en el proyecto Vue
- Configurando Jest para que obvie carpetas y archivos
- Escribiendo tu primer test de Jest en un proyecto Vue
- Modificando el script de ejecución de Jest para obtener el coverage del proyecto
- Habilitando Jest en modo Watch
- Habilitando Jest en Modo No Cache
- Otras flags y opciones de configuración en la ejecución de jest
- Escribiendo tests para componentes de Vue 3
- Entendiendo la API de librería de tests de Vue 3
- Creación de pruebas para componentes con la librería de tests de Vue 3
- Trabajando con la instancia de Vue 3
- Montando un componente, plantillas y funciones render
- ¿Qué debemos probar en un componente?
- Redactando pruebas para props de componentes
- Redactando pruebas para renderizados condicionales
- Búsqueda de elementos en un componente
- Redactando pruebas para acciones de usuario
- Redactando pruebas para acceder a atributos del DOM en un componente
- Encontrando todos los elementos de un componente
- Redactando pruebas para componentes anidados
- Redactando pruebas de estilos en componentes accediendo al atributo style
- Redactando pruebas para probar funciones públicas y privadas de un componente
- Usando fake timers para probar funciones que usen intervalos o timeouts
- Haciendo uso de Spies y Mocks de Jest para pruebas de integración
- Mocking de la instancia de Vue y propiedades de componentes
- Mocking para peticiones http de Axios
- Redactando pruebas para el ciclo de vida de un componente
- Redactando pruebas para mocking de dependencias de módulo
- Redactando pruebas para eventos nativos del DOM y de Vue
- Redactando pruebas para emisión de eventos por parte de un componente
- Redactando pruebas para el estado de la aplicación con Pinia
- Redactando pruebas para el sistema de enrutado de Vue 3
- Redactando pruebas para mixins y filters de Vue 3
- Añadiendo Snapshot tests para componentes estaticos y dinámicos
- Aprendiendo a saber qué no probar
tema 4
Testing e2e con Cypress en proyectos Vue 3
- Introducción a Cypress
- Ventajas en el uso de Cypress
- Creación de cuenta, equipo y proyectos en Cypress Dashboard
- Instalación y configuración de Cypress en un proyecto Vue 3
- Vinculando proyecto Cypress Dashboard
- Creación de un primer test con Cypress
- Sintaxis y métodos predeterminados de Cypress
- Creación de scripts para iniciar Cypress
- Ejecutando Cypress por primera vez
- Analizando la salida de ejecución e informes localmente
- Analizando la salida de ejecución e informes en Cypress Dashboard
- Grabación de vídeos y capturas de pantalla durante los tests
- Declaración y creación de comandos personalizados en Cypress
- Haciendo uso de comandos personalizados
- Introducción a Gherkin y a la redacción de escenarios
- Fundamentos de la sintaxis Gherkin
- Instalación y configuración para vincular Cypress con CucumberJS
- Redacción y ejecución de archivos de features
- Buenas prácticas y consejos para trabajar con Cypress y Vue
tema 5
Introducción a NuxtJS
- ¿Qué es NuxtJS?
- ¿Qué es el Renderizado desde Servidor?
- NuxtJS vs otros Renderizados desde Servidor (SSR)
- ¿Qué se puede crear con NuxtJS?
- ¿Es posible crear proyectos SSR con Vite?
- Creando tu primera aplicación con NuxtJS, Vue 3 y Typescript
- Análisis de la estructura de carpetas y ficheros
- Ejecutando el proyecto localmente y comprobando el resultado
tema 6
Páginas y el sistema de enrutado de Nuxt
- Introducción a las páginas
- El sistema de enrutado en NuxtJS
- Ceración de páginas y rutas
- Creando rutas con direcciones dinámicas
- Añadiendo links y analizando la navegación
- Validación de parámetros
- Creación de rutas enlazadas
- Páginas de error 500 y 404
tema 7
Layouts y componentes
- Creando un layout para nuestro NavBar
- Creación de menús para la navegación
- Usando y reutilizando componentes con NuxtJS
tema 8
Protección de rutas mediante Middlewares
- Introducción a los Middlewares en Nuxt
- Protegiendo rutas
- Creando y añadiendo un Middleware de autenticación a nuestras rutas
- Creación de una ruta de Login
- Probando el funcionamiento del Middleware de autenticación
tema 9
El estado de la aplicación
- Instalación y cnfiguración de Pinia en Nuxt
- Probando el estado de la aplicación
- Haciendo uso del estado de la aplicación para mantener la sesión de usuario
tema 10
Configuraciones Nuxt
- El fichero de configuración de NuxtJS
- Configuraciones de CORS y otras opciones recomendables
- Trabajando con variables de entorno
- Configuración del enrutado de NuxtJS
- Añadiendo plugins
- Registrando un filtro de datos
- Comprendiendo los módulos
- Mejorando el proceso de generación
- Limitando la cantidad de requests
tema 11
Recomendaciones y buenas prácticas
- Inyección de dependencias en Vue 3 (provider/inyect)
- Comparando provider/inject vs store de aplicación vs bus asícrono de datos ¿Qué es mejor para la comunicación entre componentes?
- Comentario acerca de los patrones recomendables cuando trabajamos con Vue 3 y Nuxt
- Recomendaciones de performance en Nuxt y Vue 3
tema 12
Proyecto Final
- Descripción del proyecto
- Creación de proyecto Nuxt
- Creación de rutas y sistema de autenticación
- Creación de formularios con VeeValidate
- Creación de middlewares y configuraciones esenciales
- Creación de scripts para builds y despliegues
- Despliegue del proyecto Nuxt en Vercel
- Creación de tests unitarios y de integración para el proyecto
Testimonios de nuestros clientes
Curso de Vue 3 Avanzado y Nuxt bonificado para Empresas a través de FUNDAE
Somos entidad organizadora de FUNDAE, todas nuestras formaciones se pueden bonificar hasta el 100%, sujeto a vuestro crédito disponible y a cumplir con todos los requisitos de realización establecidos por la Fundación Estatal para el Empleo.
Si desconoces el funcionamiento de las bonificaciones, ofrecemos el servicio de gestión en FUNDAE, consúltanos cualquier duda que te surja.
Descargar Guía FUNDAE
Aulas Virtuales Personalizadas
¿Quieres formar a un grupo de trabajadores con temario a medida? ¡Esta es tu modalidad!
¡Me interesa!
Catálogo de cursosLos mejores cursos de Big DataLos mejores cursos de Desarrollo WebLos mejores cursos de Desarrollo MóvilLos mejores cursos de Bases de DatosLos mejores cursos de Machine LearningLos mejores cursos de ERP y CMSLos mejores cursos de LenguajesLos mejores cursos de Google WorkspaceLos mejores cursos de Clean codeLos mejores cursos de Productividad
© 2024 Imagina, Imagina Group. Todos los derechos reservados