Más del 60% de los eCommerce de éxito confían en VueJS y Vue Storefront
Aprende a desarrollar aplicaciones de eCommerce poderosas y eficientes con un curso centrado en la utilización de VueJS y Vue Storefront, dos herramientas que están revolucionando el sector.
1
Aprovecha plantillas y buenas prácticas de estructuración para ahorrar tiempo en el desarrollo, mejorando así la productividad y calidad de tus proyectos empresariales.
Personaliza el temario al 100% para tu equipo
Diseñamos una formación a medida utilizando los documentos y flujos de trabajo reales de tu empresa.
Nueva Plataforma de E-learningFormación en directo con plataforma de apoyo para reforzar el aprendizaje
Acceso a las grabaciones
Los alumnos podrán revisar las sesiones grabadas para repasar conceptos clave, recuperar explicaciones concretas o reforzar aquellos contenidos que necesiten después de la clase en directo.
Recursos formativos
Materiales, sesiones grabadas y documentación de apoyo quedan centralizados en la plataforma para que el equipo pueda consultarlos durante y después de la formación.
Confirmación de asistencia
La plataforma permite registrar y confirmar la asistencia de los participantes, facilitando el seguimiento de la formación y la gestión documental necesaria para la bonificación FUNDAE.
Uso de clases CSS para dar estilos de manera dinámica
Tema 3: Componentes
¿Qué es un componente?
Almacenando datos en componentes
Registrando componentes
El componente raíz (root)
Ciclo de vida de un componente
Creando componentes
Usando componentes
Buenas prácticas de estructuración del proyecto
Estructuras de carpetas alternativas
¿Cómo se nombran los componentes?
Dando estilos a los componentes
Depuración de un proyecto VueJS
Tema 4: Renderizado condicional y bucles
El renderizado condicional con v-if
Alternativas a v-if
Renderizado con bucles v-for
Alternativas a v-for
Bucles sobre objetos literales
Bucles sobre listas
Tema 5: La comunicación entre componentes
El problema de la comunicación entre componentes
Las Props como método de comunicación vertical descendente
Nombrado de Props
Uso de Props en componentes hijo
Validando las Props de un componente
Los eventos como método de comunicación vertical ascendente
Comprendiendo el flujo unidireccional del flujo de datos
Funciones Callback como método de comunicación
Bus de eventos
Tema 6: Uso avanzado de componentes
El paso de contenido
Paso de contenido a través las funciones de composición
¿Qué son las funciones de composición?
La importancia de reutilizar código
Tema 7: Instancias de VueJS
Conceptos básicos de la instancia de VueJS
Uso de múltiples instancias
Accediendo a la instancia de VueJS
Uso de datos y métodos con VueJS
$el
$data
$refs
Uso de $refs en las plantillas
La API de VueJS
Montando una plantilla
Uso de componentes
Limitaciones de determinadas plantillas
Actualización del DOM por parte de VueJS
El ciclo de vida de VueJS
Tema 8: Manejo de Formularios
Binding en campos de tipo input
Agrupando datos
Pre-Poblando los inputs de un formulario
Modificadores de inputs
Binding de un textarea y guardado de saltos de línea
Uso de checkboxes y almacenamiento de datos en arrays
Uso de radio buttons
Uso de desplegables
¿Qué es el v-model y para qué sirve?
Creando un Custom Control
Enviando un formulario
Tema 9: Directivas
¿Qué son las directivas?
¿Cómo funcionan las directivas?
Introducción a funciones Hook
Creando una directiva
Pasando valores a directivas personalizadas
Pasando argumentos a directivas personalizadas
Modificando directivas personalizadas
Registrando directivas
Usando múltiples modificadores
Pasando valores complejos a directivas
Tema 10: Filtros y Mixins
¿Qué es un filtro?
Creando un filtro
Filtros globales
Encadenado de múltiples filtros
Filtros vs Propiedades
¿Qué son los mixins?
Creando un mixin
Usando un mixin
Creando mixin globales
Los mixins y el ámbito
Tema 11: Animaciones y Transiciones
¿Qué es una transición?
Preparando el código para usar transiciones
Montando una transición
Accediendo a clases CSS para transiciones
Creando una transición “fade”
Creando una transición “slide”
Propiedades para transiciones y animaciones con mixins
Animaciones v-if y v-show
Usando una animación inicial
Uso de clases CSS diversas
Uso de nombres y atributos dinámicos
Transiciones entre múltiples elementos
Escucha activa ante eventos de transición con Hooks
Entendiendo las animaciones en TypeScript
Exclusión de CSS de una animación
Creando una animación en TypeScript
Animando componentes dinámicos
Uso de “transition-group” para animación de listas
Añadiendo animaciones
Tema 12: Peticiones HTTP
Configuración de “vue-resource”
Peticiones HTTP
Interceptando Peticiones
Interceptando Respuestas
¿Qué es un “resource”?
Creación de recursos personalizados
Recursos vs Peticiones HTTP tradicionales
Comprendiendo plantillas URL
Introducción a Axios
Configuración del proyecto
Configuración de Axios a nivel del proyecto
Envío de peticiones HTTP con Axios
Accediendo a las respuestas y su contenido
Configuración global para las peticiones de Axios
Uso de interceptores en Axios
Instancias personalizadas de Axios
Tema 13: Routing en VueJS
¿Qué es “vue-router” y por qué es necesario?
Configuración de “vue-router”
Configurando y cargando rutas
Modos de enrutado: Hash vs Historial
Router Links
Active Links y estilo
Navegación imperativa
Configurando parámetros para las rutas
Obteniendo parámetros de las rutas
Usando parámetros de las rutas
Reaccionando ante cambios en los parámetros de las rutas
Nested Routing – Child Routes
Navegando a las rutas “child”
Dinamizando los Router Links
Named Routes
Usando parámetros Query
Named Router Views
Redireccionamiento
Transiciones entre rutas
Pasando fragmentos Hash
Controlando el comportamiento de Scroll
Router Guards
“beforeEnter” Guards
“beforeLeave” Guards
Carga “lazy” de las rutas
Tema 14: Autenticación
La autenticación en SPAs
Configuración del proyecto
Añadiendo un registro
Añadiendo un login
Uso de “Vuex” para el envío de peticiones de autenticación
Almacenando datos de autenticación en Vuex
Autenticación con JWT
Accediendo a otros recursos de Vuex
Enviando el Token al Backend
Auth Guards
Actualizando el estado de la aplicación
Añadiendo un logout
Auto login y Auto logout
Tema 15: Responsive Frameworks
Introducción a Responsive Frameworks
Viewport
Densidades de pantalla
Diseños líquidos
Ritmo Vertical
Media Queries
Introducción a Bootstrap
Características de Bootstrap
Paso a Paso para empezar con Bootstrap
Añadiendo Bootstrap a un proyecto VueJS
El Container de Bootstrap
Responsive Breakpoints de Bootstrap
Z-Index en Bootstrap
El sistema de Grid de Bootstrap
La tipografía en Bootstrap
Las listas en Bootstrap
Las tablas en Bootstrap
Las imágenes en Bootstrap
Las figuras en Bootstrap
Otras utilidades de Bootstrap
Los componentes de Bootstrap
¿Qué es el Material Design?
Vuetify como Responsive Framework alternativo a Bootstrap
¿Por qué Vuetify es una buena opción?
El Generador de Temas de Vuetify
Instalación
El Grid de Vuetify
Los Layouts de Vuetify
Elevation en Vuetify
Tema 16: Estado de la aplicación
El problema del manejo del estado de la aplicación
El concepto de estado centralizado
Comprendiendo los getters
Mapeo de getters y propiedades
Las mutaciones y el asincronismo
Comprendiendo las Acciones
Mapeo de acciones y funciones
El binding doble (v-model) y Vuex
Más buenas prácticas de estructuración de proyectos
Uso de namespaces
Tema 17: Webpack
Entendiendo Webpack y la estructura de carpetas
El entorno de producción y cómo realizar una build
Configuraciones en Webpack y buenas prácticas
Tema 18: Builds y despliegue
Gestión de builds con scripts de npm
Gestión y uso de variables de entorno en archivos .env
Analizando y desplegando la build de producción localmente
Despliegue en Netlify
Tema 19: Vue Storefront
Introducción
Instalación
Estructura del proyecto
Aplicando configuraciones iniciales
Enrutamiento y temas
Vue Storefront Logger
Tema 20: Composables
Qué son
Extrayendo datos mediante getters
Gestión de errores
Extendiendo consultas de GraphQL
Composables personalizados
Tema 21: Arquitectura
Navegación
Contexto de la aplicación
Repasando la configuración del Middleware
Creando y extendiendo una integración
Separando el servidor del middleware de Nuxt.js
Tema 22: Optimizando Vue Storefront
Web Vitals
Mejorando de cara a Web Vitals
Optimizando el HTML y CSS
Optimización en las imágenes con @nuxt/image
Optimizando el JavaScript
Server Side Rendering Cache
Seguridad en las cabeceras HTTP
Buenas prácticas
Tema 23: Storefront UI
Instalación
Integración con Tailwind CSS
Átomos
Moléculas
Organismos
Plantillas
Páginas
Transiciones
Perfiles profesionales
Pensado para quienes deben dominar VueJS con Vue Storefront en su día a día
Desarrolladores Frontend
Buscan perfeccionar sus habilidades en VueJS para crear interfaces de usuario efectivas y fluidas en entornos empresariales.
Ingenieros de Software
Requieren optimizar el flujo de trabajo y la estructura de proyectos con VueJS para soluciones robustas.
Equipos de Desarrollo TI
Buscan formación en VueJS y Vue Storefront para crear soluciones eCommerce innovadoras y competitivas.
Programadores Fullstack
Preguntas frecuentes
Resolvemos todas tus dudas sobre nuestra formación en VueJS con Vue Storefront
Explora las respuestas a las preguntas que guian a nuestra comunidad. Aqui encontraras claridad sobre como funciona todo, desde el acceso hasta los detalles de los cursos. Si buscas respuestas, este es el lugar para comenzar.
El curso de VueJS con Vue Storefront te enseña a desarrollar potentes aplicaciones de eCommerce utilizando uno de los frameworks más populares del mercado. Aprenderás desde la introducción a VueJS hasta el manejo avanzado de Vue Storefront, lo que te permitirá crear aplicaciones eficientes y escalables. Este conocimiento es altamente valorado en el sector tecnológico, mejorando tus oportunidades laborales.
Sí, el curso se puede bonificar a través de FUNDAE. Esto significa que las empresas pueden aplicar descuentos significativos en el coste de la formación, utilizando los créditos disponibles para mejorar las habilidades de sus empleados sin incurrir en un alto costo.
El curso de VueJS con Vue Storefront se imparte en modalidad de Aula Virtual Personalizada a través de videoconferencias con Zoom. Esta modalidad permite a los participantes asistir a las clases desde cualquier lugar, ofreciendo flexibilidad y acceso a las grabaciones para un aprendizaje continuo.
Desarrollarás habilidades en el desarrollo de aplicaciones dinámicas con VueJS, gestión del estado y enrutamiento avanzados. También aprenderás a integrar Vue Storefront para crear soluciones de eCommerce, dominio de herramientas como Vue CLI, composables y optimización de aplicación, lo que te preparará para enfrentar proyectos reales.
Puedes inscribirte en el curso rellenando el formulario disponible en nuestra página web. Asegúrate de proporcionar toda la información requerida para que podamos procesar tu solicitud de forma rápida y eficiente. Además, si deseas que gestionemos la bonificación de FUNDAE, indícalo en el formulario.
El curso de VueJS con Vue Storefront te enseña a desarrollar potentes aplicaciones de eCommerce utilizando uno de los frameworks más populares del mercado. Aprenderás desde la introducción a VueJS hasta el manejo avanzado de Vue Storefront, lo que te permitirá crear aplicaciones eficientes y escalables. Este conocimiento es altamente valorado en el sector tecnológico, mejorando tus oportunidades laborales.
Sí, el curso se puede bonificar a través de FUNDAE. Esto significa que las empresas pueden aplicar descuentos significativos en el coste de la formación, utilizando los créditos disponibles para mejorar las habilidades de sus empleados sin incurrir en un alto costo.
El curso de VueJS con Vue Storefront se imparte en modalidad de Aula Virtual Personalizada a través de videoconferencias con Zoom. Esta modalidad permite a los participantes asistir a las clases desde cualquier lugar, ofreciendo flexibilidad y acceso a las grabaciones para un aprendizaje continuo.
Desarrollarás habilidades en el desarrollo de aplicaciones dinámicas con VueJS, gestión del estado y enrutamiento avanzados. También aprenderás a integrar Vue Storefront para crear soluciones de eCommerce, dominio de herramientas como Vue CLI, composables y optimización de aplicación, lo que te preparará para enfrentar proyectos reales.
Puedes inscribirte en el curso rellenando el formulario disponible en nuestra página web. Asegúrate de proporcionar toda la información requerida para que podamos procesar tu solicitud de forma rápida y eficiente. Además, si deseas que gestionemos la bonificación de FUNDAE, indícalo en el formulario.
Diseñemos hoy el curso que tu empresa necesita
Cuéntanos tus objetivos de negocio y prepararemos una propuesta formativa bonificable totalmente ad hoc
Adquiere conocimientos avanzados en componentes, gestión de estado y optimización de rendimiento que diferencian a los mejores desarrolladores en el mercado laboral.
3
Aplicación inmediata de lo aprendido con proyectos reales y ejemplos prácticos de integración y optimización para eCommerce desde el primer día.
Después de la formación en directo, los alumnos podrán acceder a ejercicios prácticos para aplicar lo trabajado en clase y consolidar el aprendizaje con actividades guiadas.
Acceso a las grabaciones
Los alumnos podrán revisar las sesiones grabadas para repasar conceptos clave, recuperar explicaciones concretas o reforzar aquellos contenidos que necesiten después de la clase en directo.
Recursos formativos
Materiales, sesiones grabadas y documentación de apoyo quedan centralizados en la plataforma para que el equipo pueda consultarlos durante y después de la formación.
Confirmación de asistencia
La plataforma permite registrar y confirmar la asistencia de los participantes, facilitando el seguimiento de la formación y la gestión documental necesaria para la bonificación FUNDAE.
Ejercicios prácticos
Después de la formación en directo, los alumnos podrán acceder a ejercicios prácticos para aplicar lo trabajado en clase y consolidar el aprendizaje con actividades guiadas.
Practica y mejora con nuestra plataforma
Una plataforma practica, con IA integrada y pensada para que mejores desarrollando. Se adapta a tu ritmo, te corrige al instante y te muestra tu progreso real.
Correccion magica
Feedback inteligente
Aprende de cada acierto y fallo con explicaciones claras