Implementing Termly Cookie Consent in Nuxt 3

Cookie consent management is crucial for GDPR compliance. This article explains how we implemented Termly's cookie consent solution in our Nuxt 3 application.

Overview

Our implementation consists of four main components:

Termly script initialization
Cookie consent banner
Cookie policy page
Cookie settings button in the footer

Step 1: Create a Client-Side Plugin

First, we created a client-side plugin to load the Termly script: typescript

plugins/termly.client.ts

export default defineNuxtPlugin(() => {
  const script = document.createElement("script");
  script.setAttribute("type", "text/javascript");
  script.setAttribute("src", "https://app.termly.io/embed.min.js");
  script.setAttribute("data-auto-block", "on");
  script.setAttribute("data-website-uuid", "YOUR-WEBSITE-UUID");
  script.async = true;
  document.head.appendChild(script);
});

Step 2: Configure Nuxt

We added necessary meta tags and scripts in the Nuxt configuration:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          children: `(function(d, s, id) {
            var js, tjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "https://app.termly.io/embed-policy.min.js";
            tjs.parentNode.insertBefore(js, tjs);
          }(document, 'script', 'termly-jssdk'));`,
          type: 'text/javascript'
        }
      ],
      meta: [
        {
          name: 'termly-consent',
          content: 'true'
        }
      ]
    }
  }
})

Step 3: Create a Cookie Policy Page

We created a dedicated page for the cookie policy:

pages/cookie-policy.vue

<template>
  <div class="container mx-auto px-4 py-12">
    <h1 class="text-4xl font-bold mb-8 text-center">Cookie Policy</h1>
    <div
      name="termly-embed"
      data-id="YOUR-POLICY-ID"
      ref="termlyContainer"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
const termlyContainer = ref(null);
onMounted(() => {
  const script = document.createElement("script");
  script.id = "termly-jssdk";
  script.src = "https://app.termly.io/embed-policy.min.js";
  script.async = true;
  document.body.appendChild(script);
});
</script>

Step 4: Add Cookie Settings Button

We added a button in the footer to allow users to manage their cookie preferences:

components/Footer.vue

<template>
  <button @click="openConsentManager" class="hover:underline cursor-pointer">
    Cookie Settings
  </button>
</template>
<script lang="ts" setup>
const openConsentManager = () => {
  if (window.displayPreferenceModal) {
    window.displayPreferenceModal();
  }
};
</script>

Step 5: Add TypeScript Support

To ensure TypeScript support for the Termly window method: typescript

types/global.d.ts

interface Window {
  displayPreferenceModal: () => void;
}

Testing the Implementation

To verify everything is working correctly:

Clear your browser cookies
Reload your website
You should see the cookie consent banner at the bottom
Try clicking the "Cookie Settings" button in the footer
Visit the cookie policy page to ensure it loads correctly

Key Features

Our implementation provides:

✅ Automatic script blocking until consent is given
✅ GDPR compliant cookie consent banner
✅ Easily accessible cookie preferences
✅ Embedded cookie policy page
✅ TypeScript support

Conclusion

This implementation provides a complete cookie consent solution that complies with GDPR requirements while maintaining a good user experience. The integration with Nuxt 3 is smooth and the codebase remains maintainable.

Remember to replace YOUR-WEBSITE-UUID and YOUR-POLICY-ID with your actual Termly credentials.

Resources

Last updated: January 20, 2025