Vue SDK

The Vue SDK exposes the visitor’s consent as reactive state, so templates update the moment the choice changes. It supports Vue 3.3 and later and includes a Nuxt module.

Installation

npm install @cookiesh/vue

Load the Cookiesh script tag first in your index.html <head>, as shown in the quick start. Then register the 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() accepts the same options as the React provider: siteId, language and 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() returns a reactive object with the same fields as the React hook: ready, necessary, preferences, analytics, marketing and method, plus the methods acceptAll(), rejectAll(), setConsent(), showBanner() and openPreferences(). Do not destructure it, or the values lose their reactivity. Use toRefs(consent) if you need separate refs.

ConsentGate

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

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

The default slot renders only when every listed category is allowed. Pass an array to category to require several categories.

Signed-in users

Call identify() after sign-in and reset() after sign-out, so the choice follows the user across devices:

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

const cookiesh = useCookiesh();

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

useCookiesh() returns the full JavaScript API, including on() for events.

Nuxt

Add the module and your site ID to nuxt.config.ts. The module injects the script tag into every page’s <head> and registers the plugin on the client:

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

During server rendering, ready is false and every category except necessary is false, so consent-dependent content renders only on the client. Wrap it in <ClientOnly> or ConsentGate with a fallback of the same size to avoid layout shift.