Formación corporativa en Vuejs

En esta guía, exploraremos en profundidad el uso y creación de componentes en Vue 3.5. Los componentes son una pieza fundamental en Vue para construir interfaces de usuario modulares y reutilizables.

Introducción a componentes en Vue 3.5

Vue 3.5 presenta varias mejoras y nuevas funcionalidades en la creación y gestión de componentes. Un componente en Vue es una instancia de Vue con opciones predefinidas. Los componentes permiten encapsular el HTML, CSS y JavaScript de una parte de la interfaz en un solo lugar.

Creación de un componente básico

Para crear un componente en Vue 3.5, se puede utilizar la sintaxis de componentes de un solo archivo (SFC). A continuación, se muestra un ejemplo básico:

<template>
<div class="hello-world">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data() {
return {
message: 'Hola, mundo!'
};
}
}
</script>

<style scoped>
.hello-world {
font-family: Arial, sans-serif;
}
</style>

Este componente, HelloWorld, incluye una plantilla <template>, una lógica de script <script> y un estilo <style>. La opción scoped en el estilo asegura que los estilos solo se apliquen a este componente.

Comunicación entre componentes

En Vue 3.5, la comunicación entre componentes se realiza mediante props y eventos. Las props permiten pasar datos de un componente padre a un componente hijo, mientras que los eventos permiten que un componente hijo notifique al componente padre sobre cambios o acciones.

Usando props

<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Mensaje desde el componente padre'
};
}
}
</script>

En el componente hijo, las props se definen de la siguiente manera:

<template>
<div>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>

Emisión de eventos

Para que un componente hijo emita un evento, se utiliza $emit:

<template>
<button @click="sendMessage">Enviar mensaje</button>
</template>

<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Este es un mensaje del hijo');
}
}
}
</script>

En el componente padre, se escucha el evento:

<template>
<div>
<child-component @message-sent="handleMessage"></child-component>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
methods: {
handleMessage(message) {
console.log(message);
}
}
}
</script>

Ciclo de vida de los componentes

Vue 3.5 ofrece varios hooks del ciclo de vida que permiten ejecutar código en diferentes etapas de la vida de un componente:

• beforeCreate y created
• beforeMount y mounted
• beforeUpdate y updated
• beforeUnmount y unmounted

Utilizar estos hooks adecuadamente ayuda a gestionar mejor el estado y el comportamiento de los componentes.

Composición de componentes

Vue 3.5 introduce el API de composición, que permite organizar el código de una manera más modular y reutilizable mediante funciones. A continuación, un ejemplo de cómo usar setup para componer un componente:

<template>
<div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const count = ref(0);
return { count };
}
}
</script>

En este ejemplo, ref se utiliza para definir una variable reactiva. setup se ejecuta antes de que el componente sea creado y devuelve un objeto que se puede usar en la plantilla.

Vue 3.5 introduce un sistema de composición y reactividad que permite a los desarrolladores crear aplicaciones más modulares y eficientes. Este módulo se centra en cómo utilizar estas características para mejorar la estructura y el rendimiento de tus aplicaciones.

Composición en Vue 3.5

La API de composición de Vue 3.5 permite organizar el código de una manera más modular. Esta API es una alternativa al sistema basado en opciones y se utiliza principalmente para mejorar la reutilización del código y la legibilidad.

Uso de setup

La función setup es el punto de entrada para la API de composición. Se ejecuta antes de que el componente sea creado y proporciona acceso a las propiedades reactivas y a las funciones del ciclo de vida.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

En este ejemplo, usamos ref para crear una propiedad reactiva count. La función increment permite modificar esta propiedad. Ambas se devuelven desde setup y se pueden utilizar en la plantilla del componente.

Composición reutilizable con composables

Los composables son funciones que encapsulan lógica reutilizable. Permiten compartir funcionalidades entre diferentes componentes.

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment
  };
}

// MyComponent.vue
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
};

Aquí, useCounter es un composable que se puede utilizar en cualquier componente para añadir la funcionalidad de conteo.

Reactividad en Vue 3.5

El sistema de reactividad de Vue 3.5 se basa en proxies y proporciona una manera eficiente de rastrear y reaccionar a los cambios en los datos.

Proyectos reactivos con reactive

La función reactive convierte un objeto en reactivo, lo que significa que Vue rastreará las dependencias y actualizará la interfaz de usuario cuando cambien.

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
};

En este ejemplo, state es un objeto reactivo que contiene la propiedad count. La función increment modifica esta propiedad y Vue se encarga de actualizar la interfaz de usuario.

Computed properties

Las propiedades computadas permiten definir valores derivados de otras propiedades reactivas.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

doubleCount es una propiedad computada que se actualiza automáticamente cuando cambia count.

Watchers

Los watchers permiten ejecutar lógica personalizada en respuesta a los cambios de una propiedad reactiva.

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

En este ejemplo, el watcher se activa cada vez que count cambia, permitiendo ejecutar lógica adicional en respuesta a esos cambios.

Uno de los aspectos fundamentales en la creación de aplicaciones web es la gestión de la navegación y el enrutamiento. En este módulo, exploramos cómo manejar estas tareas usando Vue Router, la solución oficial de enrutamiento para Vue.

Instalación de Vue Router

Para empezar, necesitas instalar Vue Router en tu proyecto Vue. Puedes hacerlo utilizando npm o yarn:

npm install vue-router@4
## o
yarn add vue-router@4

Configuración básica

Después de instalar Vue Router, lo siguiente es configurarlo. Crea un archivo router.js en tu directorio src:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

En tu archivo principal main.js, necesitas importar y usar el router:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Definición de rutas dinámicas

Las rutas dinámicas permiten definir URLs que contienen variables. Esto es útil para páginas de detalles, como perfiles de usuario o artículos de blog. Aquí tienes un ejemplo de cómo definir una ruta dinámica:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
];

En el componente User.vue, puedes acceder al parámetro de la ruta usando el composable useRoute():

<template>
  <div>
    <h1>Usuario {{ route.params.id }}</h1>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

En Vue 3.5, la interacción HTTP con APIs de backend es fundamental para desarrollar aplicaciones web dinámicas y eficientes. En este módulo, aprenderás a utilizar las capacidades de Vue 3.5 para realizar peticiones HTTP y manejar respuestas de APIs de backend.

Instalación de Axios

Para interactuar con APIs de backend, utilizaremos Axios, una biblioteca popular para realizar peticiones HTTP. Primero, instala Axios en tu proyecto Vue 3.5:

npm install axios

Configuración inicial de Axios

Después de instalar Axios, es importante configurarlo correctamente. Puedes hacerlo en un archivo de configuración, por ejemplo, src/axios.js:

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.ejemplo.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

Realizar una petición GET

Para realizar una petición GET, puedes utilizar el método get de Axios dentro de un componente Vue. Aquí tienes un ejemplo sencillo:

<template>
  <div>
    <h1>Datos del usuario</h1>
    <p v-if="error">{{ error }}</p>
    <p v-else>{{ userData }}</p>
  </div>
</template>

<script>
import axios from '../axios';

export default {
  data() {
    return {
      userData: null,
      error: null
    };
  },
  async created() {
    try {
      const response = await axios.get('/usuario/1');
      this.userData = response.data;
    } catch (error) {
      this.error = 'Error al obtener los datos del usuario';
    }
  }
};
</script>

En esta lección, exploraremos cómo trabajar con formularios y validación en Vue 3.5. La gestión adecuada de formularios y su validación son aspectos esenciales en el desarrollo de aplicaciones web. Vue 3.5 ofrece una serie de herramientas y técnicas para facilitar estas tareas.

Creación de formularios en Vue 3.5

Para empezar, vamos a crear un formulario básico en Vue 3.5. Utilizaremos v-model para enlazar datos y @submit.prevent para manejar la presentación del formulario:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Nombre:</label>
      <input type="text" id="name" v-model="name" />
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />
    </div>
    <button type="submit">Enviar</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      console.log('Nombre:', this.name);
      console.log('Email:', this.email);
    }
  }
};
</script>

En este ejemplo, el formulario está compuesto por dos campos: nombre y email. Utilizamos v-model para enlazar cada campo a una propiedad del objeto data de Vue. La directiva @submit.prevent evita el comportamiento por defecto del formulario y llama al método submitForm cuando se envía el formulario.

Validación de formularios

Vue 3.5 no incluye un sistema de validación integrado, pero podemos utilizar bibliotecas externas como Vuelidate o vuelidate-next para añadir validaciones. A continuación, mostraremos un ejemplo utilizando Vuelidate:

Instalación de Vuelidate

Primero, instalamos Vuelidate:

npm install @vuelidate/core @vuelidate/validators

Integración de Vuelidate en el formulario

Ahora, integremos Vuelidate en nuestro formulario:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Nombre:</label>
      <input type="text" id="name" v-model="name" />
      <span v-if="!$v.name.required">El nombre es requerido</span>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />
      <span v-if="!$v.email.required">El email es requerido</span>
      <span v-if="!$v.email.email">El email no es válido</span>
    </div>
    <button type="submit">Enviar</button>
  </form>
</template>

<script>
import { required, email } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'

export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  validations() {
    return {
      name: { required },
      email: { required, email }
    };
  },
  setup() {
    return { v$: useVuelidate() };
  },
  methods: {
    submitForm() {
      this.v$.$touch();
      if (this.v$.$invalid) {
        console.log('Formulario inválido');
        return;
      }
      console.log('Nombre:', this.name);
      console.log('Email:', this.email);
    }
  }
};
</script>

En este ejemplo, hemos añadido validación para los campos de nombre y email. La validación se realiza utilizando las reglas required y email de Vuelidate. La directiva v-if se usa para mostrar mensajes de error cuando los campos no cumplen con las reglas de validación.

Vue 3.5 y Vuelidate juntos proporcionan una manera efectiva de gestionar formularios y validación en aplicaciones web, asegurando que los datos ingresados por los usuarios sean correctos y completos.

La gestión del estado en una aplicación Vue 3.5 puede ser compleja, especialmente en aplicaciones de gran tamaño. Pinia es una herramienta diseñada para simplificar este proceso, proporcionando una API intuitiva y eficiente. En esta guía, exploraremos cómo utilizar Pinia para gestionar el estado en una aplicación Vue 3.5.

Instalación de Pinia

Para comenzar a utilizar Pinia en tu proyecto Vue 3.5, primero debes instalarlo. Utiliza el siguiente comando:

npm install pinia

Una vez instalado, configura Pinia en tu aplicación Vue 3.5. Abre el archivo principal de tu proyecto (generalmente main.js o main.ts) y añade la configuración de Pinia:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Creación de un store

Un store en Pinia es una entidad que contiene el estado, las acciones y los getters. Para crear un store, sigue estos pasos:

1. Crea un archivo para tu store, por ejemplo, src/stores/counter.js.
2. Define el store utilizando la función defineStore.

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

Uso del store en componentes

Para utilizar el store en un componente Vue 3.5, importa el store y accede a sus propiedades y métodos. Aquí tienes un ejemplo de cómo hacerlo:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
const { count, doubleCount, increment, decrement } = counterStore;
</script>

En este ejemplo, hemos importado el store useCounterStore, y luego hemos accedido a sus propiedades y métodos dentro del componente.

Vue proporciona varios componentes built-in que resuelven necesidades comunes en aplicaciones modernas: renderizar contenido fuera de la jerarquía del DOM, gestionar estados de carga asíncronos, animar transiciones de elementos y cachear componentes dinámicos. Este módulo cubre en profundidad Teleport, Suspense, Transition, TransitionGroup y KeepAlive.

Teleport

Teleport permite renderizar contenido en un nodo del DOM diferente al del componente padre, manteniendo la jerarquía lógica de Vue intacta:

<script setup lang="ts">
import { ref } from 'vue'

const showModal = ref(false)
</script>

<template>
  <button @click="showModal = true">Abrir modal</button>

  <Teleport to="#modals" defer>
    <div v-if="showModal" class="modal-overlay">
      <div class="modal-content">
        <p>Contenido del modal</p>
        <button @click="showModal = false">Cerrar</button>
      </div>
    </div>
  </Teleport>
</template>

Con el prop defer, el Teleport espera a que el destino exista en el DOM antes de montar el contenido, lo que es útil cuando el contenedor se renderiza en el mismo ciclo.

Suspense

Suspense gestiona estados de carga para componentes con setup asíncrono, mostrando un fallback mientras se resuelven:

<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile />
    </template>
    <template #fallback>
      <div class="skeleton">Cargando perfil...</div>
    </template>
  </Suspense>
</template>

Transition y TransitionGroup

Transition aplica animaciones CSS al entrar y salir un elemento del DOM. TransitionGroup hace lo mismo para listas, añadiendo además animaciones de movimiento con la técnica FLIP:

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-move {
  transition: transform 0.3s ease;
}
</style>

TypeScript se ha convertido en el estándar para desarrollar aplicaciones Vue robustas y mantenibles. Vue ofrece soporte de primera clase para TypeScript, con tipos integrados en toda su API pública y herramientas como vue-tsc para verificación de tipos en archivos .vue.

Integración de TypeScript en Vue

Vue está escrito en TypeScript y proporciona definiciones de tipos completas. Esto permite una experiencia de desarrollo superior con autocompletado, detección de errores en tiempo de desarrollo y refactorización segura.

Configuración del proyecto

Un proyecto Vue con TypeScript utiliza múltiples archivos de configuración:

• tsconfig.json: Configuración raíz que referencia las configuraciones específicas
• tsconfig.app.json: Configuración para el código de la aplicación
• tsconfig.node.json: Configuración para herramientas de build (Vite)

Componentes tipados con <script setup lang="ts">

La forma recomendada de escribir componentes Vue con TypeScript es mediante <script setup lang="ts">:

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Product {
  id: number
  name: string
  price: number
}

const products = ref<Product[]>([])

const total = computed<number>(() =>
  products.value.reduce((sum, p) => sum + p.price, 0)
)
</script>

Props y Emits tipados

Vue permite definir props y emits con genéricos de TypeScript directamente:

<script setup lang="ts">
const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  (e: 'update', value: string): void
  (e: 'delete', id: number): void
}>()
</script>

Composables tipados

Los composables pueden aprovechar genéricos y tipos avanzados como MaybeRefOrGetter<T> para crear APIs flexibles:

import { ref, toValue, type MaybeRefOrGetter } from 'vue'

function useLocalStorage<T>(key: string, defaultValue: T): Ref<T> {
  const stored = localStorage.getItem(key)
  const data = ref<T>(stored ? JSON.parse(stored) : defaultValue) as Ref<T>

  watch(data, (val) => {
    localStorage.setItem(key, JSON.stringify(val))
  }, { deep: true })

  return data
}

Herramienta vue-tsc

vue-tsc es el compilador de TypeScript adaptado para archivos .vue. Se ejecuta con vue-tsc --noEmit para verificar tipos en todo el proyecto, incluyendo templates y archivos SFC.

Este módulo cubre desde la configuración inicial del proyecto hasta patrones avanzados como componentes genéricos, composables tipados y el uso de InjectionKey<T> para provide/inject con seguridad de tipos.

En el desarrollo de aplicaciones web, la seguridad y autenticación son elementos fundamentales. Con Vue 3.5, disponemos de herramientas y técnicas avanzadas para implementar estas funcionalidades de manera eficiente. En este módulo, abordaremos aspectos clave para asegurar nuestras aplicaciones y gestionar la autenticación de usuarios.

Configuración inicial

Para empezar, debemos asegurarnos de tener un proyecto Vue 3.5 configurado. Si aún no lo tienes, puedes crear uno utilizando Vue CLI:

npm install -g @vue/cli
vue create mi-proyecto
cd mi-proyecto

Instalación de bibliotecas necesarias

Para manejar la autenticación y la seguridad, utilizaremos vue-router para la gestión de rutas y axios para las peticiones HTTP. Instala estas dependencias con:

npm install vue-router axios

Configuración de vue-router

El siguiente paso es configurar vue-router para manejar rutas protegidas. Crea un archivo router.js en la raíz del proyecto:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/dashboard', 
    component: Dashboard, 
    meta: { requiresAuth: true } 
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const loggedIn = !!localStorage.getItem('user');
  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login');
  } else {
    next();
  }
});

export default router;

El testing es una parte esencial del desarrollo de aplicaciones Vue robustas y mantenibles. El ecosistema de Vue ofrece herramientas especializadas que se integran de forma nativa con Vite y la Composition API, permitiendo verificar el comportamiento de funciones, componentes, stores y composables de manera eficiente.

Herramientas del ecosistema

Vitest es el test runner recomendado para proyectos Vue basados en Vite. Comparte la misma configuración y pipeline de transformación que Vite, lo que elimina la necesidad de configuraciones duplicadas y ofrece tiempos de ejecución significativamente más rápidos que alternativas como Jest. Su API es compatible con Jest, facilitando la migración.

Vue Test Utils es la libreria oficial para testing de componentes Vue. Proporciona utilidades para montar componentes en un entorno aislado, simular interacciones del usuario, verificar el contenido renderizado y comprobar los eventos emitidos.

Para testing de stores Pinia, el paquete @pinia/testing proporciona createTestingPinia, que permite crear instancias de Pinia con estado inicial controlado y acciones mockeadas automáticamente.

Ejemplo básico de test

Un test básico con Vitest para una función pura sigue esta estructura:

import { describe, it, expect } from 'vitest'

function suma(a: number, b: number): number {
  return a + b
}

describe('suma', () => {
  it('debe sumar dos numeros positivos', () => {
    expect(suma(2, 3)).toBe(5)
  })

  it('debe manejar numeros negativos', () => {
    expect(suma(-1, -2)).toBe(-3)
  })
})

Este módulo cubre testing con Vitest para funciones y servicios, testing de componentes con Vue Test Utils incluyendo props, eventos y slots, y testing de stores Pinia y composables con sus patrones específicos.

Optimizar el rendimiento de una aplicación Vue y desplegarla correctamente son habilidades fundamentales para llevar un proyecto a producción. Este módulo cubre técnicas de optimización como defineAsyncComponent, v-memo y v-once, la creación de directivas y plugins personalizados, y las estrategias de build y despliegue con Vite.

Directivas personalizadas

Vue permite crear directivas personalizadas para acceder directamente al DOM cuando las abstracciones de templates no son suficientes. Una directiva se define con hooks que se ejecutan en distintas fases del ciclo de vida del elemento:

// directives/vFocus.ts
import type { Directive } from 'vue'

const vFocus: Directive = {
  mounted(el: HTMLElement) {
    el.focus()
  },
}

export default vFocus

Uso en un componente:

<script setup lang="ts">
import vFocus from '@/directives/vFocus'
</script>

<template>
  <input v-focus placeholder="Este input recibe el foco automáticamente" />
</template>

Optimización de rendimiento

Vue proporciona varias herramientas para optimizar el rendimiento en diferentes escenarios:

• defineAsyncComponent: carga componentes de forma lazy, reduciendo el bundle inicial
• v-memo: memoriza subárboles del template para evitar re-renderizados innecesarios en listas grandes
• v-once: renderiza contenido estático una sola vez, sin rastrear cambios reactivos
• shallowRef: crea referencias reactivas sin reactividad profunda, útil para objetos grandes que se reemplazan completos

Despliegue a producción

Vite genera un build optimizado para producción con tree-shaking, minificación y code splitting automático. La configuración de variables de entorno con el prefijo VITE_, las estrategias de división de chunks y el despliegue en plataformas como Netlify, Vercel o contenedores Docker permiten llevar la aplicación a producción de forma eficiente.

Este módulo cubre desde la creación de directivas y plugins personalizados hasta la configuración completa del build y las opciones de despliegue.