feat: add Cookie Consent

Author: Baroshem

app/app.vue

@@ -8,13 +8,6 @@ useHead({
     return titleChunk ? `${titleChunk} - Nuxt Commerce` : 'Nuxt Commerce'
   },
 })
-
-// Uncomment and adjust when you need Google Analytics
-// const { load } = useScriptGoogleAnalytics(
-//   { id: 'G-1234567', scriptOptions: { trigger: 'manual' } },
-// )
-
-// load()
 </script>
 
 <template>
@@ -35,6 +28,7 @@ useHead({
 
       <NuxtPage />
 
+      <LayoutCookieConsent />
       <LazyLayoutTheFooter class="mt-5" />
     </main>
   </UApp>

app/components/layout/CookieConsent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const toast = useToast()
+const consent = useCookie('consent', { maxAge: 31536000, path: '/' })
+
+// Load Google Analytics Script after consent
+// https://scripts.nuxt.com/docs/guides/consent
+
+onMounted(() => {
+  if (document.cookie.includes('cookie-consent')) return
+
+  toast.add({
+    'id': 'welcome',
+    'title': 'Welcome to Nuxt Commerce',
+    'description': 'A high-performance, server-rendered E-commerce app built with Nuxt & Shopify',
+    'duration': Infinity,
+    'onClick': () => {},
+    'onUpdate:open': () => {
+      consent.value = 'cookie-consent'
+      toast.remove('welcome')
+    },
+  })
+})
+</script>
+
+<template>
+  <span />
+</template>