SDK de Vue

El SDK de Vue expone el consentimiento del visitante como estado reactivo, así que las plantillas se actualizan en cuanto cambia la elección. Es compatible con Vue 3.3 y posteriores e incluye un módulo para Nuxt.

Instalación

npm install @cookiesh/vue

Carga primero la etiqueta script de Cookiesh en el <head> de tu index.html, como se explica en el inicio rápido. Después, registra el plugin:

// main.ts
import { createApp } from 'vue';
import { createCookiesh } from '@cookiesh/vue';
import App from './App.vue';

createApp(App)
  .use(createCookiesh({ siteId: 'ck_live_8f2a91' }))
  .mount('#app');

createCookiesh() acepta las mismas opciones que el provider de React: siteId, language y onChange.

useConsent

<script setup lang="ts">
import { watch } from 'vue';
import { useConsent } from '@cookiesh/vue';

const consent = useConsent();

watch(
  () => consent.analytics,
  (allowed) => analytics.setEnabled(allowed),
  { immediate: true },
);
</script>

<template>
  <button type="button" @click="consent.openPreferences()">Configuración de privacidad</button>
</template>

useConsent() devuelve un objeto reactivo con los mismos campos que el hook de React: ready, necessary, preferences, analytics, marketing y method, además de los métodos acceptAll(), rejectAll(), setConsent(), showBanner() y openPreferences(). No lo desestructures, o los valores perderán su reactividad. Usa toRefs(consent) si necesitas refs por separado.

ConsentGate

<script setup lang="ts">
import { ConsentGate } from '@cookiesh/vue';
</script>

<template>
  <ConsentGate category="marketing">
    <YouTubeEmbed id="dQw4w9WgXcQ" />
    <template #fallback>
      <VideoPlaceholder />
    </template>
  </ConsentGate>
</template>

El slot por defecto solo se renderiza cuando todas las categorías indicadas están permitidas. Pasa un array a category para exigir varias categorías.

Usuarios con sesión iniciada

Llama a identify() tras iniciar sesión y a reset() tras cerrarla, para que la elección acompañe al usuario en todos sus dispositivos:

import { useCookiesh } from '@cookiesh/vue';

const cookiesh = useCookiesh();

await cookiesh.identify(user.id);
// …
cookiesh.reset();

useCookiesh() devuelve la API de JavaScript completa, incluido on() para los eventos.

Nuxt

Añade el módulo y tu Site ID a nuxt.config.ts. El módulo inserta la etiqueta script en el <head> de cada página y registra el plugin en el cliente:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@cookiesh/nuxt'],
  cookiesh: {
    siteId: process.env.NUXT_PUBLIC_COOKIESH_SITE_ID,
  },
});

Durante el renderizado en servidor, ready es false y todas las categorías salvo necessary son false, así que el contenido que depende del consentimiento solo se renderiza en el cliente. Envuélvelo en <ClientOnly> o en ConsentGate con un contenido alternativo del mismo tamaño para evitar cambios de diseño.