Vue-SDK

Vue-SDK tarjoaa kävijän suostumuksen reaktiivisena tilana, joten mallipohjat päivittyvät heti, kun valinta muuttuu. SDK tukee Vue 3.3:a ja uudempia versioita, ja siihen kuuluu Nuxt-moduuli.

Asennus

npm install @cookiesh/vue

Lataa Cookieshin script-tagi ensimmäisenä index.html-tiedoston <head>-osassa pikaoppaan mukaisesti. Rekisteröi sitten lisäosa:

// 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() hyväksyy samat asetukset kuin 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() palauttaa reaktiivisen olion, jossa on samat kentät kuin React-hookissa: ready, necessary, preferences, analytics, marketing ja method, sekä metodit acceptAll(), rejectAll(), setConsent(), showBanner() ja openPreferences(). Älä pura oliota osiin, sillä arvot menettävät silloin reaktiivisuutensa. Käytä toRefs(consent)-kutsua, jos tarvitset erillisiä refejä.

ConsentGate

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

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

Oletusslotti renderöidään vain, kun jokainen luetelluista kategorioista on sallittu. Jos haluat vaatia useita kategorioita, välitä category-propille taulukko.

Kirjautuneet käyttäjät

Kutsu identify() kirjautumisen jälkeen ja reset() uloskirjautumisen jälkeen, niin valinta seuraa käyttäjää laitteelta toiselle:

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

const cookiesh = useCookiesh();

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

useCookiesh() palauttaa koko JavaScript-API:n, mukaan lukien tapahtumien tilaamiseen käytettävän on()-metodin.

Nuxt

Lisää moduuli ja sivustotunnisteesi nuxt.config.ts-tiedostoon. Moduuli lisää script-tagin jokaisen sivun <head>-osaan ja rekisteröi lisäosan asiakaspuolella:

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

Palvelinrenderöinnin aikana ready on false, ja kaikki kategoriat paitsi necessary ovat false, joten suostumuksesta riippuva sisältö renderöidään vain asiakaspuolella. Vältä asettelun siirtymät käärimällä se <ClientOnly>-komponenttiin tai ConsentGate-komponenttiin, jolla on samankokoinen varasisältö.