Envíanos tu consulta
Términos y condiciones *
*Si no puedes asistir en directo te facilitaremos un enlace para verlo en diferido
logoImagina
Catálogo 2024-25
Cursos¡Últimas plazas!ServiciosFUNDAETutorialesPlataforma LMS
Solicitar información
Formación
Modalidades
Próximas Convocatorias
Temario
FAQ
Solicitar información
Cursos de Desarrollo/Cursos de Desarrollo Web/Curso VueJS con Vue Storefront
iconoCurso

Curso de VueJS con Vue Storefront

DISPONIBLE EN MODALIDAD:
aMedidaIcon
Aula Virtual Personalizada
arrowRightDark

Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y combínalo con Vue Storefront para crear aplicaciones de eCommerce muy potentes y eficientes.

iconClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClient

Formación en VueJS con Vue Storefront bonificable para empresas

A quién va dirigido nuestro curso de VueJS con Vue Storefront

A todo programador que quiera conocer este framework y aprender a desarrollar aplicaciones de eCommerce con VueJS y Vue Storefront.

Objetivos de nuestro curso de VueJS con Vue Storefront

  • Aprender a desarrollar aplicaciones Vue con Typescript
  • Aprender a gestionar componentes y realizar aplicaciones mantenibles y extensibles
  • Aprender a gestionar builds y configuraciones para entornos de producción
  • Aprovechar todos los recursos que nos ofrece Vue Storefront para crear un sitio de eCommerce optimizado y potente

Qué vas a aprender en nuestro curso de VueJS con Vue Storefront

Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y combínalo con Vue Storefront para crear aplicaciones de eCommerce muy potentes y eficientes.

Requisitos de nuestro curso de VueJS con Vue Storefront

  • Conocimientos previos en JavaScript, HTML y CSS
  • Recomendable conocimientos base en TypeScript
  • Tener instalados previamente en el equipo: Node LTS, NPM, Visual Studio Code, Git y Docker Desktop
  • Son necesarios permisos de instalación y administración en el equipo
  • En necesario disponer de una licencia activa de Vue Storefront

Temario del curso de VueJS con Vue Storefront

tema 1

Introducción a VueJS

  • ¿Qué es VueJS?
  • ¿Qué es Vue CLI?
  • Usando Vue Cli para crear proyectos
  • Creando el primer proyecto Vue con Typescript
  • Plantillas de proyectos con Vue CLI
  • Configuración de Vue localmente
iconArrowDown
tema 2

Interacción con el DOM

  • Las plantillas de VueJS
  • Instancias y sintaxis de las plantillas de VueJS
  • Gestión de datos y binding
  • ¿Qué son las directivas y cómo se usan?
  • El Re-renderizado
  • Eventos: Objetos, datos y modificadores
  • Los eventos de teclado
  • Uso de código en las plantillas
  • El binding doble
  • Las propiedades y la reacción ante los cambios
  • La escucha activa ante cambios
  • Uso de clases CSS para dar estilos de manera dinámica
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
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
iconArrowDown
tema 19

Vue Storefront

  • Introducción
  • Instalación
  • Estructura del proyecto
  • Aplicando configuraciones iniciales
  • Enrutamiento y temas
  • Vue Storefront Logger
iconArrowDown
tema 20

Composables

  • Qué son
  • Extrayendo datos mediante getters
  • Gestión de errores
  • Extendiendo consultas de GraphQL
  • Composables personalizados
iconArrowDown
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
iconArrowDown
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
iconArrowDown
tema 23

Storefront UI

  • Instalación
  • Integración con Tailwind CSS
  • Átomos
  • Moléculas
  • Organismos
  • Plantillas
  • Páginas
  • Transiciones
iconArrowDown

Preguntas Frecuentes de VueJS con Vue Storefront

¿Cuáles son los Beneficios del curso VueJS con Vue Storefront?

accordionIcon
El curso te permitirá adquirir conocimientos avanzados en el desarrollo y gestión de aplicaciones con VueJS y Vue Storefront, mejorando la experiencia de usuario y optimizando el rendimiento de las tiendas online.

¿El curso de VueJS con Vue Storefront se puede bonificar a través de FUNDAE?

accordionIcon
Sí, el curso es bonificable a través de FUNDAE, lo que facilita la formación continua para los empleados de tu empresa, aprovechando las ventajas fiscales disponibles.

¿En qué modalidades se imparte el curso de VueJS con Vue Storefront?

accordionIcon
El curso se imparte en dos modalidades: en línea y en aula virtual personalizada. Esto permite una mayor flexibilidad y adaptación a las necesidades específicas de cada empresa.

¿Qué habilidades desarrollaré con el curso de VueJS con Vue Storefront?

accordionIcon
Con este curso, desarrollarás habilidades en la creación de interfaces de usuario dinámicas y responsivas, gestión del estado de las aplicaciones, integración con plataformas de comercio electrónico y optimización del front-end para una mejor performance.

¿Cómo puedo inscribirme en el curso de VueJS con Vue Storefront?

accordionIcon
Puedes inscribirte en el curso rellenando los formularios que aparecen en la web. Es un proceso sencillo que te permitirá reservar tu plaza y comenzar tu formación de inmediato.