useCountDown

• Este composable te permite establecer un contador pasando un string con el tiempo.

Implementación del Composable:

import { reactive, ref, computed, onBeforeUnmount } from "vue";

/**
 * Composable que realiza una cuenta regresiva hasta una fecha/hora específica.
 * @param time - Fecha objetivo en formato ISO, por ejemplo: '2025-06-01T12:00:00'
 */
export function useCountdown(time: string) {
  // Objeto reactivo que almacena los valores de días, horas, minutos y segundos
  const timer = reactive({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  // Referencia para almacenar el ID del intervalo
  const intervalId = ref<number | null>(null);

  /**
   * Calcula la diferencia de tiempo entre la fecha actual y la fecha objetivo.
   * Actualiza el estado del temporizador.
   */
  function useCalculateTimeLeft() {
    const startDate = new Date(time); // Fecha objetivo
    const now = new Date(); // Fecha actual
    const difference = startDate.getTime() - now.getTime();

    // Si ya ha pasado la fecha objetivo, se detiene el temporizador
    if (difference <= 0) {
      clearInterval(intervalId.value as number);
      return;
    }

    // Cálculo de días, horas, minutos y segundos restantes
    timer.days = Math.floor(difference / (1000 * 60 * 60 * 24));
    timer.hours = Math.floor(
      (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    timer.minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    timer.seconds = Math.floor((difference % (1000 * 60)) / 1000);
  }

  // Inicia el intervalo para actualizar el temporizador cada segundo
  intervalId.value = window.setInterval(useCalculateTimeLeft, 1000);

  // Ejecuta la función inmediatamente al crear el composable
  useCalculateTimeLeft();

  // Limpia el intervalo cuando se destruye el componente
  onBeforeUnmount(() => {
    if (intervalId.value !== null) {
      clearInterval(intervalId.value);
    }
  });

  // Computed que indica si el temporizador sigue en marcha (aún queda tiempo)
  const endTimer = computed(
    () => !Object.values(timer).every((value) => value <= 0)
  );

  return {
    timer, // Objeto reactivo con tiempo restante
    endTimer, // Booleano que indica si la cuenta regresiva ha terminado
  };
}

Ejemplo de uso:

<script setup lang="ts">
import { useCountdown } from "@/composables/useCountdown";

// Inicia cuenta regresiva hasta el 1 de junio de 2025 a las 12:00
const { timer, endTimer } = useCountdown("2025-06-01T12:00:00");
</script>

<template>
  <div class="text-center p-4">
    <h2 class="text-2xl font-bold">Cuenta regresiva</h2>
    <p v-if="endTimer" class="text-xl mt-2">
      {{ timer.days }}d {{ timer.hours }}h {{ timer.minutes }}m
      {{ timer.seconds }}s
    </p>
    <p v-else class="text-green-500 font-semibold mt-2">
      ¡El evento ha comenzado!
    </p>
  </div>
</template>