Cookie Banner for Vue.js & Nuxt
Vue.js and Nuxt applications need cookie consent just like any other web app. TinyConsent integrates cleanly without Vue plugins or Nuxt modules — just add a script tag to your index.html or nuxt.config. Works with Vue 2, Vue 3, Nuxt 2, and Nuxt 3.
Get Your Vue.js / Nuxt Code
No signup required to get started
Live Banner Preview
This is how the cookie banner will appear on your Vue.js / Nuxt site.
My Vue.js / Nuxt Site uses cookies to enhance your experience and analyze traffic. By clicking "Accept", you consent to our use of cookies.
Vue.js / Nuxt Integration Code
Add this to: Various files
// Vue 3 (Vite): index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID" async></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
// Nuxt 3: nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID',
async: true,
},
],
},
},
});
// Nuxt 2: nuxt.config.js
export default {
head: {
script: [
{
src: 'https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID',
async: true,
},
],
},
};
// Optional: Vue 3 Composable
// composables/useConsent.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useConsent(category: string) {
const hasConsent = ref(false);
const checkConsent = () => {
hasConsent.value = window.TinyConsent?.hasConsent(category) ?? false;
};
onMounted(() => {
checkConsent();
window.addEventListener('tinyconsent:change', checkConsent);
});
onUnmounted(() => {
window.removeEventListener('tinyconsent:change', checkConsent);
});
return hasConsent;
}Replace YOUR_SCRIPT_ID with your actual script ID from TinyConsent.
Why Vue.js / Nuxt Sites Need a Cookie Banner
Vue/Nuxt apps commonly use analytics, error tracking, and marketing pixels. If you have EU users and any of these integrations, you typically need cookie consent infrastructure.
What TinyConsent Handles for Vue.js / Nuxt
- Automatic blocking of tracking scripts until consent
- Technical consent collection with region detection
- Google Consent Mode v2 integration
- Consent storage and audit logging
- Customizable design to match your site
How to Add a Cookie Banner to Vue.js / Nuxt
Generate your script
Get your unique script from tinyconsent.com.
Choose integration method
Vue: edit index.html. Nuxt: edit nuxt.config.
Add the script
Add TinyConsent to your document head.
Build and deploy
Deploy your Vue/Nuxt app with the script included.
Use composables (optional)
Create a useConsent composable for checking consent in components.
Vue.js / Nuxt Tips
- •Works with Vue 2, Vue 3, Nuxt 2, and Nuxt 3
- •No Vue plugin or Nuxt module needed
- •Composable example for reactive consent checking
- •Compatible with SSR and static generation
Why TinyConsent for Vue.js / Nuxt
60-Second Setup
No npm packages, no build configuration. Just one script tag and you're compliant.
Lightweight
Under 5KB initial load. Zero impact on your Vue.js / Nuxt bundle size.
Technical Infrastructure
Script blocking, consent logging, and region detection. Technical foundation for consent workflows.
Developer-Friendly
JavaScript API for checking consent status. Perfect for conditional script loading.
Frequently Asked Questions
Do I need a Vue cookie consent package?
No. npm packages for Vue cookie consent add bundle size and complexity. TinyConsent is simpler — external script, zero bundle impact.
Does it work with Nuxt SSR?
Yes. The script loads client-side, so it works with SSR, SSG, and SPA modes in Nuxt.
How do I check consent in Vue components?
Use our composable example above, or check window.TinyConsent.hasConsent() in your component methods.
Will it cause hydration mismatches in Nuxt?
No. TinyConsent operates independently of Vue's hydration process.
Does it work with Pinia/Vuex?
You can integrate with stores, but it's not necessary. TinyConsent manages consent state internally.