React, Vue, Svelte and Laravel

React#

import { useCookieConsent } from '@devix-labs/cookie-consent/react';
import '@devix-labs/cookie-consent/styles.css';

const CATEGORIES = [
  { id: 'necessary', label: 'Strictly necessary', required: true },
  { id: 'analytics', label: 'Analytics' },
  { id: 'marketing', label: 'Marketing' },
];

function App() {
  const { accepted, record } = useCookieConsent({ categories: CATEGORIES, consentMode: true, policyUrl: '/privacy' });

  return (
    <>
      {accepted('marketing')
        ? <iframe src="https://www.youtube.com/embed/xyz" title="A video" />
        : <p>Allow marketing cookies to watch this. <a href="#" data-cc-open>Cookie settings</a></p>}
      <footer>{record ? `Decided ${new Date(record.updatedAt).toLocaleDateString()}` : null}</footer>
    </>
  );
}

The hook re-renders when the decision changes, so an embed appears the moment it is allowed — no reload.

Mount it once, at the root. The categories array must be stable (module scope, or a useMemo).

Vue#

<script setup>
import { onUnmounted, ref } from 'vue';
import { useCookieConsent } from '@devix-labs/cookie-consent/vue';

const consent = useCookieConsent({ categories, consentMode: true });
const marketing = ref(consent.accepted('marketing'));
consent.on('change', () => (marketing.value = consent.accepted('marketing')));
onUnmounted(() => consent.destroy());
</script>

Svelte#

<script>
  import { onDestroy } from 'svelte';
  import { createCookieConsent } from '@devix-labs/cookie-consent/svelte';

  let allowed = false;
  const consent = createCookieConsent({ categories });
  consent.on('change', () => (allowed = consent.accepted('marketing')));
  onDestroy(() => consent.destroy());
</script>

Web component#

<script type="module" src="https://devix.pk/cdn/oss/cookie-consent@1.0.0/element.js"></script>

<dx-cookie-consent policy-url="/privacy" consent-mode layout="bar" position="bottom-center">
  <script type="application/json">
    {
      "categories": [
        { "id": "necessary", "label": "Strictly necessary", "required": true },
        { "id": "analytics", "label": "Analytics", "autoClear": [{ "name": "_ga_.*", "pattern": true }] }
      ]
    }
  </script>
</dx-cookie-consent>

The instance is on window.dxConsent, and on the element's consent property.

Laravel#

Blade, with the categories from config and the proof-of-consent log:

{{-- layouts/app.blade.php, in <head> --}}
<script type="module">
  import { consentModeDefaults } from '{{ asset('build/cookie-consent.js') }}';
  consentModeDefaults();
</script>

{{-- before </body> --}}
<script type="module">
  import { createCookieConsent } from '{{ asset('build/cookie-consent.js') }}';

  createCookieConsent({
    policyUrl: '{{ route('privacy') }}',
    version: {{ config('consent.version') }},
    consentMode: true,
    regime: 'auto',
    country: () => '{{ $country }}',
    language: '{{ app()->getLocale() }}',
    categories: @json(config('consent.categories')),
    report: (record) => navigator.sendBeacon('{{ route('consent.store') }}', new Blob([JSON.stringify(record)], { type: 'application/json' })),
  });
</script>

Reading the decision on the server is just the cookie:

$consent = json_decode($request->cookie('dx_consent') ?? '[]', true);

if (in_array('analytics', $consent['categories'] ?? [], true)) {
    // render the analytics tag server-side
}

devix-labs/laravel-cookie-consent gives you the migration, the endpoint, a HasConsent middleware and a Blade component that does all of the above — see that package's docs.