Search “cookie consent implementation” and you’ll find dozens of React tutorials. But what if you’re building with Vue.js, Angular, or Svelte? These frameworks power millions of production applications, yet developers struggle to find framework-specific guidance for implementing vue angular svelte cookie consent solutions that actually work with SSR, state management, and modern build tools.
This guide provides production-ready implementations for all three frameworks, complete with TypeScript support, SSR/SSG handling, and integration patterns that respect each framework’s architecture. Whether you’re using Nuxt.js, Angular Universal, or SvelteKit, you’ll have working code by the end of this tutorial.
Why Framework-Specific Cookie Consent Matters
Copying a vanilla JavaScript cookie consent solution into your Vue, Angular, or Svelte application creates more problems than it solves. Each framework has unique characteristics that require tailored approaches.
Lifecycle and Reactivity Differences
Vue’s reactivity system uses Proxy-based tracking, Angular relies on Zone.js for change detection, and Svelte compiles reactivity at build time. A cookie consent implementation must integrate with these systems to ensure your UI updates correctly when users accept or reject cookies.
For example, if you store consent state in a plain JavaScript object, Vue components won’t re-render when consent changes. Angular components might trigger unnecessary change detection cycles. Svelte components won’t react at all unless you use stores or reactive declarations.
SSR/SSG Rendering Challenges
Server-side rendering introduces a critical problem: cookies don’t exist on the server. When Nuxt.js, Angular Universal, or SvelteKit pre-renders your pages, any code that checks document.cookie will crash. Even if you guard against this with typeof window !== 'undefined', you’ll face hydration mismatches when the server renders one thing and the client renders another.
Your vue cookie consent implementation needs to handle this gracefully, rendering a neutral state on the server and checking actual consent only after hydration completes.
State Management Integration
Modern applications use centralized state management—Pinia or Vuex for Vue, services with RxJS for Angular, and stores for Svelte. Cookie consent state belongs in these systems because multiple components need to read it: analytics scripts, marketing pixels, embedded videos, and cookie banners themselves.
A proper angular gdpr compliance implementation exposes consent state through Angular’s dependency injection system, making it available wherever you need it without prop drilling or global variables.
Cookie Consent Implementation in Vue.js
Whether you’re using Vue 3 with the Composition API, Nuxt.js for SSR, or Vue 2 with the Options API, adding cookie consent is the same simple process.
Adding CookieTrust to Vue
Add these two lines to your index.html (or app.vue for Nuxt):
<!-- In your index.html or nuxt.config head -->
<script src="https://cmp.cookietrust.io/gdpr/autoblocker.umd.js"></script>
<script id="cookietrust-cmp" src="https://cmp.cookietrust.io/gdpr/[YOUR-SITE-ID]/latest/v2consent.js" async></script>That’s it. The SDK automatically:
- Displays a GDPR-compliant consent banner
- Blocks analytics and marketing scripts until consent is given
- Persists user preferences across sessions
- Works with SSR/SSG without hydration issues
Nuxt.js Configuration
For Nuxt.js, add the scripts to your nuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{ src: 'https://cmp.cookietrust.io/gdpr/autoblocker.umd.js' },
{
id: 'cookietrust-cmp',
src: 'https://cmp.cookietrust.io/gdpr/[YOUR-SITE-ID]/latest/v2consent.js',
async: true
}
]
}
}
})Cookie Consent Implementation in Angular
Angular applications—whether using standalone components, modules, or Angular Universal for SSR—integrate with CookieTrust the same way.
Adding CookieTrust to Angular
Add the scripts to your index.html:
<!-- In src/index.html, before closing </head> -->
<script src="https://cmp.cookietrust.io/gdpr/autoblocker.umd.js"></script>
<script id="cookietrust-cmp" src="https://cmp.cookietrust.io/gdpr/[YOUR-SITE-ID]/latest/v2consent.js" async></script>No Angular services, no RxJS observables, no Zone.js considerations. The SDK handles everything at the DOM level, which means:
- Zero impact on change detection performance
- Works identically with Angular Universal SSR
- No dependency injection setup required
- Compatible with any Angular version (2+)
Angular Universal Compatibility
Unlike custom Angular services that need isPlatformBrowser guards, CookieTrust’s SDK automatically detects the environment. The banner only renders client-side, preventing any SSR hydration mismatches.
Cookie Consent Implementation in Svelte
Svelte and SvelteKit applications integrate with CookieTrust without needing custom stores or reactive declarations.
Adding CookieTrust to Svelte
For vanilla Svelte, add to your index.html. For SvelteKit, add to app.html:
<!-- In app.html (SvelteKit) or index.html (Svelte) -->
<script src="https://cmp.cookietrust.io/gdpr/autoblocker.umd.js"></script>
<script id="cookietrust-cmp" src="https://cmp.cookietrust.io/gdpr/[YOUR-SITE-ID]/latest/v2consent.js" async></script>The SDK integrates seamlessly with Svelte’s compile-time reactivity:
- No stores to create or subscribe to
- Works with SvelteKit’s SSR and prerendering
- Zero bundle size impact (scripts load externally)
- Compatible with Svelte 3, 4, and 5
SvelteKit Hooks (Optional)
If you need to conditionally load scripts based on consent in your server hooks, CookieTrust’s consent cookie is standard and readable:
// src/hooks.server.ts
export async function handle({ event, resolve }) {
const consent = event.cookies.get('cookie_consent')
// consent contains user preferences if set
return resolve(event)
}Handling SSR and SSG Across Frameworks
All three frameworks require careful handling of server-side rendering to avoid crashes and hydration mismatches.
Client-Only Rendering Strategies
The safest approach is to render the cookie banner only after the client hydrates. All three implementations above use this strategy:
- Vue/Nuxt:
onMountedhook ensures client-only execution - Angular:
typeof windowchecks andisPlatformBrowserguard - Svelte/SvelteKit:
browsercheck from$app/environmentandonMount
Cookie Detection on Server
If you need to read consent on the server (for example, to conditionally render analytics scripts), access cookies through framework-specific APIs:
| Framework | Server Cookie Access |
|---|---|
| Nuxt.js | useCookie() composable or event.node.req.headers.cookie |
| Angular Universal | REQUEST token with cookie-parser middleware |
| SvelteKit | event.cookies.get() in load functions |
Hydration Mismatch Prevention
Never render different content on server vs. client based on consent state. Instead:
- Render a neutral state on the server (no banner, no analytics)
- After hydration, check consent and update the DOM
- Use CSS to hide elements until JavaScript loads:
<div class="hide-until-hydrated">
Framework Comparison
| Aspect | Vue/Nuxt | Angular | Svelte/SvelteKit |
|---|---|---|---|
| State Management | Composables/Pinia | Services + RxJS | Stores |
| SSR Guard | onMounted |
isPlatformBrowser |
browser + onMount |
| Reactivity | Proxy-based | Zone.js | Compile-time |
| TypeScript | Optional | Required | Optional |
| Bundle Impact | ~3KB | ~5KB | ~2KB |
The CookieTrust Approach: Skip the Framework Code
The implementations above work well—if you have time to build, test, and maintain framework-specific consent logic. But there’s a simpler path.
Framework-Agnostic Integration
CookieTrust works with Vue, Angular, Svelte, and every other JavaScript framework with the same two lines of code:
<!-- CookieTrust with Auto-Blocking -->
<script src="https://cmp.cookietrust.io/gdpr/autoblocker.umd.js"></script>
<script id="cookietrust-cmp" src="https://cmp.cookietrust.io/gdpr/[SITE_ID]/latest/v2consent.js" async></script>That’s it. No composables, no services, no stores. The SDK handles:
- Consent collection with a customizable, GDPR-compliant banner
- Script blocking for Google Analytics, Meta Pixel, TikTok, and other tracking tools
- State management across page navigations and browser sessions
- SSR compatibility without hydration mismatch issues
Comparing the Approaches
| Aspect | DIY Implementation | CookieTrust |
|---|---|---|
| Lines of code | 80-150 per framework | 2 (universal) |
| SSR handling | Manual guards needed | Built-in |
| Script blocking | Write yourself | Auto-blocker included |
| Cookie scanning | Manual tracking | AI-powered detection |
| Compliance updates | You maintain | Automatic |
| Setup time | Hours | Minutes |
When DIY Makes Sense
Build your own solution if you:
- Need deep integration with existing state management (e.g., consent affects non-analytics features)
- Have strict requirements the CookieTrust SDK doesn’t cover
- Want to learn framework internals through a practical project
When CookieTrust Makes Sense
Use CookieTrust if you:
- Want compliance without framework-specific code
- Need automatic script blocking for ad-tech and analytics
- Prefer spending development time on product features, not consent banners
- Manage multiple sites and want a unified solution
The code examples in this article give you full understanding of what’s happening under the hood. But for most production applications, a managed CMP eliminates the ongoing maintenance burden.
Performance Optimization and Best Practices
Cookie consent implementations should have minimal impact on your application’s performance.
Lazy Loading Consent Components
Load the banner component only when needed:
// Vue
const CookieBanner = defineAsyncComponent(() =>
import('./components/CookieBanner.vue')
)
// Angular
loadComponent: () => import('./cookie-banner.component')
.then(m => m.CookieBannerComponent)
// Svelte
const CookieBanner = lazy(() => import('./CookieBanner.svelte'))Bundle Size Optimization
Avoid heavy cookie libraries. The implementations above use native document.cookie APIs, adding less than 2KB to your bundle. If you need a library, choose lightweight options:
js-cookie: 2.2KB minified- Native APIs: 0KB (use the examples above)
Core Web Vitals Impact
Cookie banners affect Cumulative Layout Shift (CLS) if they cause content to jump. Prevent this by:
- Reserving space for the banner with CSS
- Using
position: fixedto overlay content - Loading the banner before first paint if consent is required
Measure impact with Lighthouse and ensure your banner doesn’t delay First Contentful Paint (FCP) by more than 100ms.
Conclusion
Implementing framework cookie consent requires more than copying vanilla JavaScript code. Vue.js, Angular, and Svelte each have unique patterns for state management, SSR handling, and reactivity that your implementation must respect.
What you learned:
- Vue: Use composables or Pinia stores, guard with
onMountedfor SSR - Angular: Build injectable services with RxJS, use
isPlatformBrowserfor Universal - Svelte: Create writable stores with derived values, check
browserfor SvelteKit
These patterns give you complete control—and complete responsibility for maintenance, updates, and compliance changes.
The alternative: CookieTrust’s SDK delivers the same functionality across all three frameworks with a universal two-line embed. The auto-blocker handles script management automatically, and AI-powered scanning keeps your cookie list current without manual updates.
For teams that want compliance without the framework-specific code, start a free CookieTrust trial and be compliant in minutes.
Related guides:
- GDPR Cookie Consent Requirements — what the law actually requires
- React Cookie Consent Implementation — patterns for React apps
- Cookie Consent Best Practices — design and UX principles
