Guía Práctica para Usar el Composition API en Vue 3

El Composition API de Vue 3 es una nueva forma de estructurar y organizar el código en tus componentes, ofreciendo mayor flexibilidad y capacidad de reutilización que el Options API. Este enfoque es ideal para proyectos complejos donde el manejo del estado y la lógica puede volverse difícil de mantener.

En este blog, exploraremos cómo instalar Vue 3, el uso del setup, y ejemplos prácticos con directivas personalizadas.

Instalación de Vue 3

Para usar el Composition API, necesitas instalar Vue 3. Aquí hay dos métodos comunes:

1. Usar un CDN

Ideal para proyectos simples o prototipos rápidos.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. Instalar con NPM

Si estás desarrollando un proyecto con herramientas modernas, usa el siguiente comando:

npm install vue@next

Crea tu proyecto usando vite o vue-cli:

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

¿Qué es el Composition API?

El Composition API introduce el método setup, que permite declarar toda la lógica de un componente en una sola función. Esto facilita la reutilización de lógica y mejora la legibilidad en componentes grandes.

Uso básico del setup

El setup es una función que se ejecuta antes de que el componente sea creado. Dentro de esta función, puedes usar las herramientas del Composition API, como ref y reactive.

Ejemplo: Contador básico

<template>
  <div>
    <p>El contador está en: {{ contador }}</p>
    <button @click="incrementar">Incrementar</button>
  </div>
</template>

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

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

    const incrementar = () => {
      contador.value++;
    };

    return {
      contador,
      incrementar,
    };
  },
};
</script>

Explicación:

• ref: Crea una referencia reactiva. Puedes acceder al valor usando .value.
• setup devuelve un objeto con las variables y funciones que estarán disponibles en el template.

Usando reactive para objetos complejos

reactive es otra herramienta del Composition API para trabajar con objetos o arreglos reactivos.

Ejemplo: Manejar datos de un formulario

<template>
  <form @submit.prevent="enviarFormulario">
    <label>Nombre:</label>
    <input v-model="formulario.nombre" />

    <label>Correo:</label>
    <input v-model="formulario.correo" />

    <button type="submit">Enviar</button>
  </form>
</template>

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

export default {
  setup() {
    const formulario = reactive({
      nombre: '',
      correo: '',
    });

    const enviarFormulario = () => {
      console.log(formulario);
      alert(`Formulario enviado: ${JSON.stringify(formulario)}`);
    };

    return {
      formulario,
      enviarFormulario,
    };
  },
};
</script>

Creando directivas personalizadas con Composition API

Las directivas personalizadas permiten agregar funcionalidades directamente en los elementos del DOM.

Ejemplo 1: Directiva para enfocar un input al montarse

<template>
  <input v-auto-focus />
</template>

<script>
export default {
  directives: {
    autoFocus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};
</script>

Ejemplo 2: Cambiar el fondo al pasar el mouse

<template>
  <div v-cambiar-fondo="'#ffcc00'" style="height: 100px; width: 100px;">
    Pasa el mouse aquí
  </div>
</template>

<script>
export default {
  directives: {
    cambiarFondo: {
      mounted(el, binding) {
        const colorOriginal = el.style.backgroundColor;

        el.addEventListener('mouseenter', () => {
          el.style.backgroundColor = binding.value;
        });

        el.addEventListener('mouseleave', () => {
          el.style.backgroundColor = colorOriginal;
        });
      },
    },
  },
};
</script>

Combinando Composition API con directivas

Puedes usar el Composition API dentro de las directivas personalizadas para lógica más avanzada.

Ejemplo: Mostrar un tooltip al pasar el mouse

<template>
  <button v-tooltip="'Haz clic aquí para más información'">Hover me</button>
</template>

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

const app = createApp({
  directives: {
    tooltip: {
      mounted(el, binding) {
        const tooltip = document.createElement('div');
        tooltip.textContent = binding.value;
        tooltip.style.position = 'absolute';
        tooltip.style.backgroundColor = '#333';
        tooltip.style.color = '#fff';
        tooltip.style.padding = '5px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.visibility = 'hidden';

        document.body.appendChild(tooltip);

        el.addEventListener('mouseenter', (e) => {
          tooltip.style.top = `${e.clientY + 10}px`;
          tooltip.style.left = `${e.clientX + 10}px`;
          tooltip.style.visibility = 'visible';
        });

        el.addEventListener('mouseleave', () => {
          tooltip.style.visibility = 'hidden';
        });
      },
    },
  },
});

app.mount('#app');
</script>

Conclusión

El Composition API de Vue 3 ofrece una nueva forma de escribir componentes más limpios y reutilizables. Al combinarlo con directivas personalizadas, puedes llevar tus proyectos de diseño web a un nivel completamente nuevo, creando interfaces interactivas y funcionales.

¡Explora estas herramientas y crea proyectos sorprendentes!