Vue SDK

Vue SDK предоставляет согласие посетителя в виде реактивного состояния, поэтому шаблоны обновляются в тот же момент, когда меняется выбор. SDK поддерживает Vue 3.3 и новее и включает модуль для Nuxt.

Установка

npm install @cookiesh/vue

Сначала загрузите тег script Cookiesh в <head> вашего index.html, как показано в разделе Быстрый старт. Затем зарегистрируйте плагин:

// 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() принимает те же параметры, что и провайдер для React: siteId, language и 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() возвращает реактивный объект с теми же полями, что и хук для React: ready, necessary, preferences, analytics, marketing и method, а также методы acceptAll(), rejectAll(), setConsent(), showBanner() и openPreferences(). Не деструктурируйте его, иначе значения потеряют реактивность. Если нужны отдельные ref, используйте 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>

Слот по умолчанию отображается, только когда разрешены все перечисленные категории. Чтобы потребовать несколько категорий, передайте в category массив.

Вошедшие пользователи

Вызывайте identify() после входа и reset() после выхода, чтобы выбор следовал за пользователем на всех устройствах:

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

const cookiesh = useCookiesh();

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

useCookiesh() возвращает полный JavaScript API, включая on() для событий.

Nuxt

Добавьте модуль и ID сайта в nuxt.config.ts. Модуль вставляет тег script в <head> каждой страницы и регистрирует плагин на клиенте:

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

Во время серверного рендеринга ready равно false, как и все категории, кроме necessary, поэтому контент, зависящий от согласия, отображается только на клиенте. Оберните его в <ClientOnly> или в ConsentGate с запасным вариантом того же размера, чтобы избежать смещения макета.