logowebsideproject

Introduction

What nuxt-cookie-consent is and the problems it solves.

Introduction

@websideproject/nuxt-cookie-consent is a cookie and cookieless-tracking consent module for Nuxt 4.

This module provides tools to help you comply with privacy regulations like GDPR, but using it does not automatically guarantee compliance. You are responsible for your site's configuration, cookie descriptions, and overall privacy practices. Always consult a legal professional. The author assumes no liability for legal issues arising from its use.

Features

  • GDPR compliant — granular control, stale-cookie detection, and consent-gated cookie writing.
  • Intelligent banner — the initial banner only appears if a configured non-essential cookie actually requires it.
  • Dynamic i18n — fully translatable UI (including cookie categories) with reactive locale switching. Defaults for EN, DE, ES, FR.
  • Fully configurable — define categories, colors, and text in nuxt.config.ts.
  • On-demand consent — useRequestConsent asks for permission just-in-time.
  • Preferences without a banner — a theme or language switch asks for consent the first time it is used; until then no cookie is set and no banner is needed. See Usage.
  • Consent-aware cookies — useConsentCookie for effortless, compliant cookie management.
  • Overridable & themeable UI — components can be styled via config or replaced entirely using Nuxt Layers.
  • Powered by Nuxt Scripts — exposes consent-based triggers for efficient script loading.

How it works

  1. You declare your cookie categories (and optionally the individual cookies inside them) in nuxt.config.ts.
  2. On first visit, the module decides whether to show the banner based on the requiresBanner flags of your non-essential cookies.
  3. The user's choices are stored in a cookie_consent cookie and exposed through $consent and a set of composables.
  4. You gate scripts and cookies behind the relevant category using $consent.triggers, useConsentCookie, and useRequestConsent.

Continue to Installation.

Overview

GDPR cookie and cookieless-tracking consent for Nuxt — banner, floating button and preferences modal, all overridable.

Installation

Add the module to your Nuxt app.

Need a Landing Page?

Modern landing pages with optional modules (blog, docs, forms, i18n). Let's discuss your project.

Build Your MVP

Full-stack SaaS development. Expert in database design, multi-tenancy, and scalable architecture.

Deployment Help

Dockerize your backend, set up CI/CD pipelines, deploy to Cloudflare or Hetzner. Early-stage setup.

Suggest a SaaS Tool

Missing a calculator or tool? Suggest what you'd like to see on our site.