Vue 3 Integration

npm install @breakpilot/consent-sdk

import { createApp } from 'vue';
import App from './App.vue';
import { ConsentPlugin } from '@breakpilot/consent-sdk/vue';

const app = createApp(App);

app.use(ConsentPlugin, {
  apiEndpoint: import.meta.env.VITE_CONSENT_API,
  siteId: 'my-site',
  debug: import.meta.env.DEV,
});

app.mount('#app');

<script setup lang="ts">
import { useConsent } from '@breakpilot/consent-sdk/vue';

const { hasConsent, acceptAll, rejectAll } = useConsent();
</script>

<template>
  <div v-if="hasConsent('analytics')">
    <!-- Analytics Code hier -->
  </div>
</template>

<script setup lang="ts">
import { useConsent } from '@breakpilot/consent-sdk/vue';

const {
  isBannerVisible,
  acceptAll,
  rejectAll,
  showSettings,
} = useConsent();
</script>

<template>
  <Transition name="slide">
    <div
      v-if="isBannerVisible"
      class="fixed bottom-0 inset-x-0 bg-white border-t shadow-lg p-4 z-50"
    >
      <div class="max-w-4xl mx-auto flex items-center justify-between">
        <p class="text-sm text-gray-600">
          Wir verwenden Cookies um Ihr Erlebnis zu verbessern.
        </p>
        <div class="flex gap-2">
          <button
            @click="rejectAll"
            class="px-4 py-2 text-sm border rounded hover:bg-gray-50"
          >
            Ablehnen
          </button>
          <button
            @click="showSettings"
            class="px-4 py-2 text-sm border rounded hover:bg-gray-50"
          >
            Einstellungen
          </button>
          <button
            @click="acceptAll"
            class="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Alle akzeptieren
          </button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from,
.slide-leave-to {
  transform: translateY(100%);
}
</style>

<script setup lang="ts">
import { ConsentGate } from '@breakpilot/consent-sdk/vue';

defineProps<{
  videoId: string;
}>();
</script>

<template>
  <ConsentGate category="social">
    <template #default>
      <iframe
        :src="`https://www.youtube.com/embed/${videoId}`"
        width="560"
        height="315"
        allowfullscreen
      />
    </template>
    <template #fallback>
      <div class="bg-gray-100 p-4 rounded-lg text-center">
        <p>Video erfordert Ihre Zustimmung.</p>
        <button class="mt-2 px-4 py-2 bg-blue-600 text-white rounded">
          Zustimmen
        </button>
      </div>
    </template>
  </ConsentGate>
</template>

import { ConsentPlugin } from '@breakpilot/consent-sdk/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ConsentPlugin, {
    apiEndpoint: useRuntimeConfig().public.consentApi,
    siteId: 'my-site',
  });
});