Envíanos tu consulta

Buscar cursos

Catálogo 2024-25

Cursos ¡Últimas plazas!Servicios FUNDAE Tutoriales Plataforma LMS

Solicitar información

Buscar cursos

Solicitar información

Formación

Modalidades

Próximas Convocatorias

Temario

FAQ

Solicitar información

Cursos de Desarrollo/Cursos de Desarrollo Web/Curso Vue 3 Avanzado y Nuxt

Curso de Vue 3 Avanzado y Nuxt

DISPONIBLE EN MODALIDAD:

Aula Virtual Personalizada

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 nuestro curso de Vue 3 Avanzado y Nuxt

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 de nuestro curso de Vue 3 Avanzado y Nuxt

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 en nuestro curso de Vue 3 Avanzado y Nuxt

Requisitos de nuestro curso de Vue 3 Avanzado y Nuxt

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 de Vue 3 Avanzado y Nuxt

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

Preguntas Frecuentes de Vue 3 Avanzado y Nuxt

¿Cuáles son los beneficios del curso Vue 3 Avanzado y Nuxt?

El curso te ayudará a afianzar y profundizar tus conocimientos en Vue 3 y Nuxt, permitiéndote desarrollar aplicaciones web más eficientes y escalables. Además, aprenderás buenas prácticas y patrones avanzados que mejorarán la calidad de tus proyectos.

¿El curso de Vue 3 Avanzado y Nuxt se puede bonificar a través de FUNDAE?

Sí, este curso es bonificable a través de FUNDAE, la Fundación Estatal para la Formación en el Empleo, lo que permite a las empresas recuperar una parte del coste del curso.

¿En qué modalidades se imparte el curso de Vue 3 Avanzado y Nuxt?

El curso se imparte en modalidad online o en aula virtual personalizada, adaptándose a las necesidades y horarios de los participantes.

¿Qué habilidades desarrollaré con el curso de Vue 3 Avanzado y Nuxt?

Desarrollarás habilidades avanzadas en el uso de Vue 3 y Nuxt, incluyendo la creación de componentes reutilizables, gestión avanzada del estado, optimización del rendimiento y la implementación de técnicas de renderizado dinámico.

¿Cómo puedo inscribirme en el curso de Vue 3 Avanzado y Nuxt?

Puedes inscribirte en el curso rellenando los formularios que aparecen en la web. Es un proceso sencillo que te permitirá reservar tu plaza y recibir toda la información necesaria para comenzar.