Vue SDK

Vue SDK teeb külastaja nõusoleku kättesaadavaks reaktiivse olekuna, nii et mallid uuenevad kohe, kui valik muutub. See toetab Vue 3.3 ja uuemaid versioone ning sisaldab Nuxti moodulit.

Paigaldamine

npm install @cookiesh/vue

Laadi Cookiesh skriptimärgend esimesena oma faili index.html elementi <head>, nagu on näidatud kiirjuhendis. Seejärel registreeri 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() võtab vastu samad valikud nagu React provider: siteId, language ja 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() tagastab reaktiivse objekti, millel on samad väljad nagu Reacti hook’il: ready, necessary, preferences, analytics, marketing ja method, lisaks meetodid acceptAll(), rejectAll(), setConsent(), showBanner() ja openPreferences(). Ära seda destruktureeri, muidu kaotavad väärtused oma reaktiivsuse. Kui vajad eraldi ref’e, kasuta toRefs(consent).

ConsentGate

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

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

Vaikimisi slot renderdatakse ainult siis, kui kõik loetletud kategooriad on lubatud. Mitme kategooria nõudmiseks anna atribuudile category massiiv.

Sisselogitud kasutajad

Kutsu pärast sisselogimist välja identify() ja pärast väljalogimist reset(), et valik liiguks kasutajaga seadmete vahel kaasa:

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

const cookiesh = useCookiesh();

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

useCookiesh() tagastab kogu JavaScripti API, sealhulgas meetodi on() sündmuste jaoks.

Nuxt

Lisa moodul ja oma saidi ID faili nuxt.config.ts. Moodul lisab skriptimärgendi iga lehe elementi <head> ja registreerib plugina kliendi poolel:

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

Serveripoolse renderdamise ajal on ready väärtusega false ja iga kategooria peale necessary on false, seega renderdatakse nõusolekust sõltuv sisu ainult kliendi poolel. Paigutuse nihke vältimiseks mähi see elementi <ClientOnly> või komponenti ConsentGate, millel on sama suur asendussisu.