SDK Vue

Le SDK Vue expose le consentement du visiteur sous forme d’état réactif : les templates se mettent à jour dès que le choix change. Il prend en charge Vue 3.3 et versions ultérieures, et inclut un module Nuxt.

Installation

npm install @cookiesh/vue

Chargez d’abord la balise script Cookiesh dans le <head> de votre index.html, comme indiqué dans le démarrage rapide. Enregistrez ensuite le 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() accepte les mêmes options que le provider React : siteId, language et 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()">Paramètres de confidentialité</button>
</template>

useConsent() renvoie un objet réactif avec les mêmes champs que le hook React : ready, necessary, preferences, analytics, marketing et method, ainsi que les méthodes acceptAll(), rejectAll(), setConsent(), showBanner() et openPreferences(). Ne le déstructurez pas, sinon les valeurs perdent leur réactivité. Utilisez toRefs(consent) si vous avez besoin de refs séparées.

ConsentGate

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

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

Le slot par défaut ne s’affiche que lorsque toutes les catégories indiquées sont autorisées. Transmettez un tableau à category pour exiger plusieurs catégories.

Utilisateurs connectés

Appelez identify() après la connexion et reset() après la déconnexion, pour que le choix suive l’utilisateur sur tous ses appareils :

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

const cookiesh = useCookiesh();

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

useCookiesh() renvoie l’API JavaScript complète, y compris on() pour les événements.

Nuxt

Ajoutez le module et votre Site ID dans nuxt.config.ts. Le module injecte la balise script dans le <head> de chaque page et enregistre le plugin côté client :

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

Pendant le rendu côté serveur, ready vaut false, comme toutes les catégories sauf necessary : le contenu dépendant du consentement ne s’affiche donc que côté client. Enveloppez-le dans <ClientOnly> ou dans ConsentGate avec un contenu de remplacement de la même taille pour éviter tout décalage de mise en page.