Vue-SDK

Das Vue-SDK stellt die Einwilligung des Besuchers als reaktiven Status bereit, sodass sich Templates in dem Moment aktualisieren, in dem sich die Entscheidung ändert. Es unterstützt Vue 3.3 und neuer und enthält ein Nuxt-Modul.

Installation

npm install @cookiesh/vue

Laden Sie zuerst das Cookiesh-Script-Tag im <head> Ihrer index.html, wie im Schnellstart gezeigt. Registrieren Sie dann das 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() akzeptiert dieselben Optionen wie der React-Provider: siteId, language und 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()">Privacy settings</button>
</template>

useConsent() gibt ein reaktives Objekt mit denselben Feldern wie der React-Hook zurück: ready, necessary, preferences, analytics, marketing und method, dazu die Methoden acceptAll(), rejectAll(), setConsent(), showBanner() und openPreferences(). Destrukturieren Sie es nicht, sonst verlieren die Werte ihre Reaktivität. Verwenden Sie toRefs(consent), wenn Sie einzelne Refs brauchen.

ConsentGate

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

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

Der Default-Slot wird nur gerendert, wenn jede angegebene Kategorie erlaubt ist. Übergeben Sie ein Array an category, um mehrere Kategorien vorauszusetzen.

Angemeldete Nutzer

Rufen Sie identify() nach der Anmeldung und reset() nach der Abmeldung auf, damit die Entscheidung dem Nutzer geräteübergreifend folgt:

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

const cookiesh = useCookiesh();

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

useCookiesh() gibt die vollständige JavaScript-API zurück, einschließlich on() für Ereignisse.

Nuxt

Ergänzen Sie das Modul und Ihre Site ID in nuxt.config.ts. Das Modul fügt das Script-Tag in den <head> jeder Seite ein und registriert das Plugin im Client:

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

Beim Server-Rendering ist ready false, und jede Kategorie außer necessary ist false. Einwilligungsabhängige Inhalte werden daher nur im Client gerendert. Umschließen Sie sie mit <ClientOnly> oder mit ConsentGate und einem gleich großen Fallback, um Layout-Shifts zu vermeiden.