Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 Cookie Consent Banner for Vue 3 — Glassmorphism

A production-ready glassmorphism cookie consent banner: a GDPR-style cookie banner with equally prominent “Accept all” and “Reject all”, granular analytics/marketing toggles (off by default), stored consent and Google Consent Mode v2 signals. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vue 3 code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
<script setup>
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';
import { ref } from 'vue';

const CONSENT_KEY = 'cookie-consent-v1'; // bump the version to re-ask after policy changes

function readConsent() {
  try {
    return JSON.parse(localStorage.getItem(CONSENT_KEY));
  } catch {
    return null; // storage blocked / SSR → treat as "not decided"
  }
}

function saveConsent(choice) {
  const record = { necessary: true, ...choice, timestamp: new Date().toISOString() };
  try {
    localStorage.setItem(CONSENT_KEY, JSON.stringify(record));
  } catch {}
  // Google Consent Mode v2: only grant what the user chose.
  window.gtag?.('consent', 'update', {
    analytics_storage: choice.analytics ? 'granted' : 'denied',
    ad_storage: choice.marketing ? 'granted' : 'denied',
    ad_user_data: choice.marketing ? 'granted' : 'denied',
    ad_personalization: choice.marketing ? 'granted' : 'denied'
  });
  // Load optional scripts by listening for this event.
  document.dispatchEvent(new CustomEvent('cookie-consent', { detail: record }));
}

function acceptAll() {
  saveConsent({ analytics: true, marketing: true });
}

function rejectAll() {
  saveConsent({ analytics: false, marketing: false });
}

function savePreferences() {
  saveConsent({
    analytics: Boolean(document.getElementById('cc-analytics')?.checked),
    marketing: Boolean(document.getElementById('cc-marketing')?.checked)
  });
}

const banner = ref(!readConsent());
const prefs = ref(false);
</script>

<template>
  <div>
    <div v-show="banner">
      <div class="position-fixed start-0 end-0 bottom-0 z-3 p-3" role="region" aria-label="Cookie consent">
        <div class="mw-4xl mx-auto p-4 glass shadow-lg rounded-3">
          <h2 class="fs-5 fw-semibold text-body-emphasis">We value your privacy</h2>
          <p class="mt-2 small text-body-secondary">We use essential cookies to run this site. With your permission we also use analytics and marketing cookies. You can change your choice at any time. <a href="#" class="text-brand fw-medium text-decoration-none">Cookie policy</a></p>
          <div v-show="prefs">
            <div class="mt-3 d-flex flex-column gap-2">
              <label class="d-flex align-items-start gap-2 small text-body">
                <input type="checkbox" class="form-check-input mt-0 mt-1" checked disabled>
                <span><strong>Strictly necessary</strong> — security, load balancing, your consent choice. Always on.</span>
              </label>
              <label class="d-flex align-items-start gap-2 small text-body">
                <input id="cc-analytics" type="checkbox" class="form-check-input mt-0 mt-1">
                <span><strong>Analytics</strong> — anonymous usage statistics that help us improve.</span>
              </label>
              <label class="d-flex align-items-start gap-2 small text-body">
                <input id="cc-marketing" type="checkbox" class="form-check-input mt-0 mt-1">
                <span><strong>Marketing</strong> — personalised ads and campaign measurement.</span>
              </label>
            </div>
          </div>
          <div class="mt-3 d-flex flex-wrap align-items-center gap-2">
            <button type="button" class="btn btn-brand fw-semibold rounded-2" @click="rejectAll($event); banner = false">Reject all</button>
            <button type="button" class="btn btn-brand fw-semibold rounded-2" @click="acceptAll($event); banner = false">Accept all</button>
            <button type="button" class="btn btn-link link-body-emphasis text-decoration-none fw-semibold rounded-2" @click="prefs = !prefs" :aria-expanded="prefs">Customize</button>
            <div v-show="prefs">
              <button type="button" class="btn btn-outline-secondary fw-semibold rounded-2" @click="savePreferences($event); banner = false">Save preferences</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="!banner">
      <button type="button" class="position-fixed bottom-0 start-0 m-3 btn btn-outline-secondary fw-semibold rounded-2" @click="banner = true">Cookie settings</button>
    </div>
  </div>
</template>

More Bootstrap components for Vue 3

All components →

Free Bootstrap 5 Cookie Consent Banner for Vue 3 — Glassmorphism by pGento

Install Bootstrap 5 for Vue 3

Create a Vue 3 project with Vite and install Bootstrap:

npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm install bootstrap

Save the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses ref().

Use the cookie consent banner in Vue 3

<!-- App.vue -->
<script setup>
import CookieConsent from './CookieConsent.vue';
</script>

<template>
  <CookieConsent />
</template>

Making the banner actually compliant

  • Block before consent: load analytics/marketing tags only after the cookie-consent event reports the matching category (or set Google Consent Mode v2 defaults to denied before tags load).
  • Equal choice: keep “Reject all” on the first layer with the same visual weight as “Accept all”.
  • Withdrawal: keep the “Cookie settings” button (or a footer link) available on every page.
  • Record: the stored choice includes a timestamp; bump CONSENT_KEY when your purposes change to re-ask.

This is an implementation pattern, not legal advice — have your privacy counsel review the wording and categories for your jurisdictions.

Accessibility & customization

The banner is a labelled region (role="region" with aria-label) rather than a blocking modal, preference toggles are native checkboxes with labels, and the always-available “Cookie settings” button lets keyboard users reopen it.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryVue 3 (<script setup>)
Interactive statebanner, prefs
Dark modeYes — toggle in the editor
StyleGlassmorphism (backdrop blur)

Frequently asked questions

How do I install this Bootstrap cookie consent banner in Vue 3?
Create a Vue 3 project, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the cookie consent banner?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the cookie consent banner support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the cookie consent banner accessible?
The banner is a labelled region (role="region" with aria-label) rather than a blocking modal, preference toggles are native checkboxes with labels, and the always-available “Cookie settings” button lets keyboard users reopen it.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 Cookie Consent Banner for Vue 3 — Glassmorphism

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.