One-Line Installation
Paste the script into public/index.html (Vite/Vue CLI) or nuxt.config head
Script loads once before the Vue app mounts
No Vue plugin or npm package required
Works with Vite, Vue CLI, Nuxt 2, and Nuxt 3
Vue.js Integration
Cookie Consent for Vue.js Applications in
|
Add Secure Privacy to your Vue.js single-page application by placing the script in your HTML shell. The banner, preference centre, cookie scanning, and consent logs work across Vue Router navigations without extra code—configure everything from the Secure Privacy dashboard.
Vue 2 & Vue 3 Compatible
index.html or Nuxt Config
Persists Across Route Changes
SOC2 · IAB TCF
55+ Privacy Laws
0min
Typical Setup
0+
Privacy Laws
99.9%
Uptime
4.9/5
Rating
Why Secure PrivacyBuilt for
Built for
Single-Page Apps
Vue.js apps render client-side—pages don't reload on navigation, so the consent script must initialise once and persist. Secure Privacy handles this natively: add the script to the HTML shell and the banner survives every Vue Router transition.
SPA-Friendly by Default
Banner and preference centre persist across Vue Router navigations
Consent state stored in cookies—survives page refreshes
No need to re-initialise on route change hooks
Handles hash and history mode routing
Script Blocking for SPAs
Blocks analytics and marketing scripts until consent is granted
Works with dynamically injected third-party tags
Google Consent Mode v2 supported for GA4 and Google Ads
Rescan after adding new third-party integrations
Vue.js Features
Everything You Need forVue.js Compliance
Secure Privacy provides cookie scanning, customisable banners, consent logging, geo-targeting, multilingual support, and Google Consent Mode—all configured from the dashboard and injected via a single script tag in your Vue app's HTML shell.
Automated Cookie Scanner
Detect and categorise cookies from your Vue app and every third-party script it loads.
- Deep scan of all origins loaded by the SPA
- Automatic categorisation: essential, analytics, marketing, functional
- Continuous monitoring for newly added cookies
Customisable Consent Banner
Match the banner to your Vue app's design system using the visual editor.
- Colours, typography, and positioning via dashboard
- Multiple layout styles (bar, modal, corner widget)
- Mobile-responsive out of the box
Granular Consent Controls
Preference centre with category-level and vendor-level toggles.
- Category-level accept/reject
- Vendor-specific opt-in/opt-out when TCF is enabled
- Consent withdrawal via persistent floating widget
Nuxt.js SSR Support
Handle the server-to-client handoff so the banner renders correctly after hydration.
- Add the script in nuxt.config.ts head section
- Banner initialises client-side after hydration completes
- Compatible with Nuxt 2 (nuxt.config.js) and Nuxt 3 (nuxt.config.ts)
Google Consent Mode v2
Automatic consent signal mapping for GA4, Google Ads, and related tags.
- All seven GCM v2 types mapped to Secure Privacy categories
- Advanced mode for cookieless pings and behavioral modeling
- Works alongside GTM or standalone gtag.js
Geo-Targeting Rules
Show the right banner for each visitor's jurisdiction automatically.
- 55+ privacy law templates (GDPR, CCPA, LGPD, POPIA, etc.)
- Automatic location detection by IP
- Custom rules per region or country
Multi-Language Support
Serve consent banners in 70+ languages to match your Vue app's i18n setup.
- Auto-detect visitor language
- Works alongside vue-i18n or @nuxtjs/i18n
- Custom translation overrides available
Audit Logs & Proof of Consent
Immutable consent records for regulatory compliance and audits.
- Timestamped records of every consent event
- IP anonymisation for GDPR alignment
- Export-ready for DPA inquiries
Automatic Script Blocking
Block third-party scripts until consent is granted—essential for Vue apps loading external SDKs.
- Pre-consent blocking for analytics, marketing, and social scripts
- Works with dynamically loaded scripts common in SPAs
- No manual type='text/plain' tagging required
Installation
Add Secure Privacy to Your Vue.js App
Paste the Secure Privacy script into your Vue app's HTML shell so it loads before the framework mounts. The banner persists across client-side navigations with no additional code.
01
Copy Script from Dashboard
Log in to Secure Privacy → Domains → Installation → copy the installation script for your domain.
1 min
02
Paste into index.html <head>
Open public/index.html (Vue CLI) or index.html (Vite) and paste the script in the <head> section before any analytics or marketing tags.
2 min
03
Run, Test & Rescan
Start your dev server (npm run dev), verify the banner appears, accept/reject cookies, then run a Secure Privacy rescan on your production domain after deployment.
5 min
Your Vue app is now compliant.
Global Compliance, Built In
Instant Access to 55+ Legal Templates Worldwide
Automatically adapt legal templates and consent banners by location — compliant by default, seamless for users.
55+
Privacy Laws Covered
200+
Countries Supported
∞
Continuously Updated Regulations
CORE GLOBAL PRIVACY FRAMEWORKS
Why Choose Secure Privacy
Secure Privacy vs DIY Vue Consent Logic
| Feature | Secure Privacy | Custom Vue Component |
|---|---|---|
| Setup time | 5 minutes | Hours to days |
| Automatic cookie scanning | ||
| 55+ privacy law templates | Manual research required | |
| Proof-of-consent logging | Custom build needed | |
| Google Consent Mode v2 | Automatic mapping | Manual implementation |
| IAB TCF support | Certified CMP | Not feasible |
| Geo-targeting rules | Built-in | Requires IP detection service |
| Multi-language banners | 70+ languages | Manual translations |
| SPA route persistence | Automatic | Must handle manually |
| Maintenance | Dashboard updates, no deploys | Code changes for every law update |
Vue.js Ecosystem
Works With Your Vue.js Stack
0+ native integrations and growing
Resources
Everything You Need for Vue.js
CMS & Framework Integrations
Compare installation across Vue, React, Angular, WordPress, and more.
Learn more
Customer Success
Trusted by Vue.js Teams
Frontend teams use Secure Privacy to add compliance to Vue and Nuxt apps without slowing down development.
4.9/5Average Rating
98%Customer Satisfaction
G2
“Privacy services works great! Easy setup and integration with our website.”
Capterra
“Great app and includes full integration with WordPress. Easy setup and configuration.”
G2
“Great software for Cookie Privacy Policy. Highly recommended!”
G2
“Privacy services works great! Easy setup and integration with our website.”
Capterra
“Great app and includes full integration with WordPress. Easy setup and configuration.”
G2
“Great software for Cookie Privacy Policy. Highly recommended!”
G2
“Best consent management platform. Saved us months of development time.”
Capterra
“The cookie scanner is incredibly accurate. Saved us hours of manual work.”
Capterra
“Excellent support team and the Google Consent Mode integration works flawlessly.”
G2
“Best consent management platform. Saved us months of development time.”
Capterra
“The cookie scanner is incredibly accurate. Saved us hours of manual work.”
Capterra
“Excellent support team and the Google Consent Mode integration works flawlessly.”
Frequently Asked Questions
Frequently Asked Questions
Paste the Secure Privacy script into the <head> of your public/index.html (Vite or Vue CLI) or add it to the head config in nuxt.config. The script loads before the Vue app mounts and persists across client-side navigations.
GET STARTED IN MINUTES
Add Cookie Consent to Your Vue.js App
One script tag in your HTML shell. Full compliance across every route. Start free—no credit card required.
30-day free trial
No credit card required
Cancel anytime