How to add a cookie banner on a Vue.js website

Last updated 30 September 2026

This guide shows you how to add the Kukie.io cookie consent banner to your Vue.js application. The banner is a standalone script that works independently of Vue's reactivity system.

Prerequisite: You need a Kukie.io account and at least one site added. If you haven't done this yet, follow Create Your Account & Add Your First Site first.

Step 1: Get Your Embed Code

Log in to your Kukie.io dashboard, navigate to your site, and copy the embed code from the Setup tab. It looks like this:

<script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>

Replace YOUR-SITE-KEY with the actual site key shown in your dashboard.

Step 2: Add the Script to Vue.js

Like React, the Kukie.io banner is a standalone script that works outside Vue's reactivity system. Add it to your HTML entry point.

Vite (Default for Vue 3)

Open index.html in your project root:

<head>
    <script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>
    <!-- other head elements -->
</head>

Vue CLI (Webpack)

Open public/index.html and add the script inside <head>:

<script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>

No npm package needed: The banner script is framework-agnostic. It injects its own DOM elements and does not interfere with Vue's virtual DOM.

Use a composable to react to consent changes:

// composables/useConsent.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useConsent() {
    const consent = ref(null)

    function handler(event) {
        consent.value = event.detail
    }

    onMounted(() => window.addEventListener('kukie:consent', handler))
    onUnmounted(() => window.removeEventListener('kukie:consent', handler))

    return { consent }
}

Step 3: Verify the Installation

Visit your website in a new browser window (or incognito/private mode). You should see the Kukie.io consent banner appear. If it does not show, check the following:

Open your browser's Developer Tools (F12) and look for the script in the Network tab - it should load with a 200 status
Check the Console tab for any JavaScript errors
Make sure you published/saved your changes in your Vue.js app
Clear any platform-level cache if applicable

For a detailed verification walkthrough, see How to Verify Your Banner Installation.