useCookies

• Este composable se encarga de proveer de diferentes funciones para manejar las cookies.

Implementación del Composable:

// Variable reactiva que indica si las cookies han sido aceptadas o no.
// Puede ser true (aceptadas), false/null (no aceptadas o sin comprobar).
const cookiesAccepted = (ref < boolean) | (null > null);

// Composable que encapsula la lógica relacionada con el consentimiento de cookies
export function useCookies() {
  /**
   * Marca las cookies como aceptadas:
   * - Actualiza la variable reactiva a `true`.
   * - Guarda una cookie persistente llamada `cookies-accepted=true` válida por 1 año.
   */
  const setCookiesAccepted = () => {
    cookiesAccepted.value = true;
    document.cookie =
      "cookies-accepted=true; max-age=31536000; SameSite=Strict; Secure";
  };

  /**
   * Verifica si el usuario ya aceptó las cookies previamente:
   * - Lee `document.cookie`, la divide por `;` en cookies individuales.
   * - Si encuentra una cookie que contiene `cookies-accepted`, marca como aceptadas.
   * - Si no se encuentra, mantiene el valor como `null`.
   */
  const checkCookiesAccepted = () => {
    const cookies = document.cookie.split(";");

    for (const cookie of cookies) {
      if (cookie.includes("cookies-accepted")) {
        cookiesAccepted.value = true;
        return;
      }
      cookiesAccepted.value = null;
    }
  };

  /**
   * Elimina el consentimiento de cookies:
   * - Borra la cookie `cookies-accepted` configurando `max-age=0`.
   * - Reinicia el estado reactivo a `null`.
   */
  const deleteCookiesAccepted = () => {
    document.cookie = "cookies-accepted=; max-age=0; SameSite=Strict; Secure";
    cookiesAccepted.value = null;
  };

  // Devuelve el estado y las funciones para usarlas en componentes
  return {
    cookiesAccepted,
    setCookiesAccepted,
    checkCookiesAccepted,
    deleteCookiesAccepted,
  };
}

Ejemplo de composable con creacion de un banner de cookies

Componente de ejemplo CookieBanner

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

const { cookiesAccepted, setCookiesAccepted, checkCookiesAccepted } =
  useCookies();

// Al montar el componente, revisa si ya se aceptaron las cookies
onMounted(() => {
  checkCookiesAccepted();
});

// Función que el usuario llama al hacer clic en "Aceptar"
const acceptCookies = () => {
  setCookiesAccepted();
};
</script>

<template>
  <!-- Solo muestra el banner si cookiesAccepted es null -->
  <div
    v-if="cookiesAccepted === null"
    class="fixed bottom-0 left-0 w-full bg-gray-900 text-white p-4 shadow-lg z-50 flex justify-between items-center"
  >
    <p class="mr-4">
      Usamos cookies para mejorar tu experiencia. Al continuar, aceptas el uso
      de cookies.
    </p>
    <button
      @click="acceptCookies"
      class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded text-white"
    >
      Aceptar
    </button>
  </div>
</template>

<style scoped></style>

Página donde se ponga el banner

<template>
  ...
  <CookieBanner />
</template>

<script setup lang="ts">
import CookieBanner from "@/components/CookieBanner.vue";
// poner nombre con la ruta de tu componente para auto import
</script>