feat(nuxt): add cookie module

cypress/e2e/index.cy.ts

@@ -40,6 +40,7 @@ describe('index page', () => {
 
   context('visual regression', () => {
     it('looks as before', () => {
+      cy.setCookie('cookie_control_consent', 'true')
       cy.visit('/')
       cy.get('[data-is-loading="false"]').should('be.visible')
       cy.compareSnapshot('index')

layouts/default.vue

@@ -1,12 +1,14 @@
 <template>
   <div :data-is-loading="isLoading">
     <slot />
+    <CookieControl :locale="locale" />
   </div>
 </template>
 
 <script setup lang="ts">
 const loadingId = Math.random()
 const loadingIds = useState('loadingIds', () => [loadingId])
+const { locale } = useI18n()
 
 // computations
 const isLoading = computed(() => !!loadingIds.value.length)

nuxt.config.ts

@@ -10,50 +10,56 @@ const BASE_URL =
 export default defineNuxtConfig({
   css: ['@/assets/css/main.css'],
   modules: [
-    // [
-    //   '@dargmuesli/nuxt-cookie-control',
-    //   {
-    //     locales: ['en', 'de'],
-    //     necessary: [
-    //       {
-    //         name: {
-    //           de: 'Authentifizierungsdaten',
-    //           en: 'Authentication Data',
-    //         },
-    //         // cookies: ['JWT_NAME'],
-    //       },
-    //       {
-    //         name: {
-    //           de: 'Cookie-Präferenzen',
-    //           en: 'Cookie Preferences',
-    //         },
-    //         // cookies: ['cookie_control_consent', 'cookie_control_enabled_cookies'],
-    //       },
-    //       {
-    //         name: {
-    //           de: 'Spracheinstellungen',
-    //           en: 'Language Settings',
-    //         },
-    //         // cookies: ['i18n_redirected'],
-    //       },
-    //     ],
-    //     optional: [
-    //       {
-    //         name: 'Google Analytics',
-    //         identifier: 'ga',
-    //         // cookies: ['_ga', '_gat', '_gid'],
-    //         accepted: () => {
-    //           const { $ga } = useNuxtApp()
-    //           $ga.enable()
-    //         },
-    //         declined: () => {
-    //           const { $ga } = useNuxtApp()
-    //           $ga.disable()
-    //         },
-    //       },
-    //     ],
-    //   },
-    // ],
+    [
+      '@dargmuesli/nuxt-cookie-control',
+      {
+        cookies: {
+          necessary: [
+            {
+              description: {
+                de: 'Speichert die Einstellungen, die in diesem Dialog getroffen werden.',
+                en: 'Saves the settings made in this dialog.',
+              },
+              name: {
+                de: 'Cookie-Präferenzen',
+                en: 'Cookie Preferences',
+              },
+              targetCookieIds: [
+                'cookie_control_consent',
+                'cookie_control_enabled_cookies',
+              ],
+            },
+            {
+              description: {
+                de: 'Speichert in welcher Sprache die Webseite angezeigt wird.',
+                en: 'Saves in which language the web page is displayed.',
+              },
+              name: {
+                de: 'Spracheinstellungen',
+                en: 'Language Settings',
+              },
+              targetCookieIds: ['i18n_redirected'],
+            },
+          ],
+          // optional: [
+          //   {
+          //     name: 'Google Analytics',
+          //     id: 'ga',
+          //     // targetCookieIds: ['_ga', '_gat', '_gid'],
+          //     // accepted: () => {
+          //     //   const { $ga } = useNuxtApp()
+          //     //   $ga.enable()
+          //     // },
+          //     // declined: () => {
+          //     //   const { $ga } = useNuxtApp()
+          //     //   $ga.disable()
+          //     // },
+          //   },
+          // ],
+        },
+        locales: ['en', 'de'],
+      },
+    ],
     // [
     //   '@nuxtjs/google-analytics',
     //   {
@@ -94,7 +100,6 @@ export default defineNuxtConfig({
           },
           fallbackWarn: false, // TODO: don't show incorrect warnings (https://github.com/intlify/vue-i18n-next/issues/776)
         },
-        // vueI18nLoader: true,
       },
     ],
     '@nuxtjs/robots',

package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "@commitlint/cli": "17.3.0",
     "@commitlint/config-conventional": "17.3.0",
+    "@dargmuesli/nuxt-cookie-control": "2.1.0",
     "@funken-studio/sitemap-nuxt-3": "4.0.4",
     "@intlify/eslint-plugin-vue-i18n": "2.0.0",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
@@ -75,6 +76,13 @@
     "vue": "3.2.45",
     "vue-tsc": "1.0.13"
   },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "webpack"
+      ]
+    }
+  },
   "lint-staged": {
     "*.{js,vue}": "eslint",
     "*.{css,vue}": "stylelint"