SDK Vue

L’SDK Vue espone il consenso del visitatore come stato reattivo, così i template si aggiornano nel momento in cui la scelta cambia. Supporta Vue 3.3 e versioni successive e include un modulo per Nuxt.

Installazione

npm install @cookiesh/vue

Carica per primo il tag script di Cookiesh nel <head> del tuo index.html, come mostrato nella guida rapida. Poi registra il 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() accetta le stesse opzioni del provider React: siteId, language e 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()">Impostazioni privacy</button>
</template>

useConsent() restituisce un oggetto reattivo con gli stessi campi dell’hook React: ready, necessary, preferences, analytics, marketing e method, più i metodi acceptAll(), rejectAll(), setConsent(), showBanner() e openPreferences(). Non destrutturarlo, altrimenti i valori perdono la reattività. Usa toRefs(consent) se ti servono ref separati.

ConsentGate

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

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

Lo slot predefinito viene visualizzato solo quando tutte le categorie indicate sono autorizzate. Passa un array a category per richiedere più categorie.

Utenti con login

Chiama identify() dopo l’accesso e reset() dopo la disconnessione, così la scelta segue l’utente su tutti i suoi dispositivi:

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

const cookiesh = useCookiesh();

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

useCookiesh() restituisce l’intera API JavaScript, compreso on() per gli eventi.

Nuxt

Aggiungi il modulo e il tuo Site ID a nuxt.config.ts. Il modulo inserisce il tag script nel <head> di ogni pagina e registra il plugin sul client:

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

Durante il rendering lato server, ready è false e tutte le categorie tranne necessary sono false, quindi i contenuti che dipendono dal consenso vengono visualizzati solo sul client. Racchiudili in <ClientOnly> o in ConsentGate con un fallback delle stesse dimensioni per evitare spostamenti del layout.