Responsive

Detecta si la pantalla cumple con una resolución máxima dada (por defecto, la resolución móvil) y ejecuta una función de callback cuando cambie.

Implementación del Util

import { onMounted, onUnmounted } from "vue"; // Importamos hooks del ciclo de vida de Vue
import { MOBILE_RESOLUTION } from "@/constants/resolutions";
// Resolución por defecto

/**
 * Ejecuta un callback si el viewport es menor o igual al ancho especificado.
 * También escucha cambios en el tamaño de pantalla para ejecutar el callback dinámicamente.
 */
export function isResponsive({
  callback = () => {}, // Función a ejecutar si se cumple la condición
  query = MOBILE_RESOLUTION, // Ancho máximo a comprobar (en píxeles)
}: {
  callback?: () => void;
  query?: number;
}) {
  // Creamos un media query para verificar si el ancho de la pantalla
  // es menor o igual al valor dado
  const mediaQuery = window.matchMedia(`(max-width: ${query}px)`);

  onMounted(() => {
    // Ejecutamos el callback inmediatamente si ya coincide
    mediaQuery.matches && callback();
    // Escuchamos los cambios en la condición del media query
    mediaQuery.addEventListener("change", callback);
  });

  onUnmounted(() => {
    // Limpiamos el listener cuando el componente se desmonta
    mediaQuery.removeEventListener("change", callback);
  });
}

Ejemplo de Uso

// Punto de quiebre personalizado
const breakpoint = 1140;

// Función que ajusta estilos en función del ancho de la pantalla
const adjustStyle = () => {
  if (window.innerWidth <= breakpoint) {
    fontSize.value = smallScreenFontSize;
    width.value = smallScreenWidth;
  } else {
    fontSize.value = largeScreenFontSize;
    width.value = largeScreenWidth;
  }
};

// Usamos el util para ejecutar 'adjustStyle' si la pantalla es menor al breakpoint
isResponsive({ callback: adjustStyle, query: breakpoint });