feat!: include matomo depending on cookies, update code base and chan…

…ge module alias

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

eslint.config.mjs

@@ -0,0 +1,7 @@
+import { createConfigForNuxt } from '@remindgmbh/eslint-config-nuxt'
+
+export default createConfigForNuxt({
+    features: {
+        tooling: true,
+    },
+})

package.json

@@ -25,19 +25,19 @@
         "dev:build": "nuxi build playground",
         "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
         "lint": "npm run lint:script",
-        "lint:script": "eslint --ext \".js,.ts,.vue\" .",
+        "lint:script": "eslint .",
         "prepack": "npm run dev:prepare && nuxt-module-build build",
         "preview": "nuxi preview playground",
         "static-analysis": "npm run dev:prepare && npm run typecheck && npm run lint",
-        "typecheck": "nuxi typecheck"
+        "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.10.3",
-        "defu": "^6.1.3"
+        "@nuxt/kit": "^3.14.0",
+        "defu": "^6.1.4"
     },
     "peerDependencies": {
-        "@remindgmbh/nuxt-typo3": "^4.0.0 || ^0.0.0-development",
-        "@remindgmbh/nuxt-typo3-solr": "^2.0.0 || ^0.0.0-development"
+        "@remindgmbh/nuxt-typo3": "^5.0.0 || ^0.0.0-development",
+        "@remindgmbh/nuxt-typo3-solr": "^3.0.0 || ^0.0.0-development"
     },
     "peerDependenciesMeta": {
         "@remindgmbh/nuxt-typo3-solr": {
@@ -46,16 +46,16 @@
     },
     "devDependencies": {
         "@nuxt/devtools": "latest",
-        "@nuxt/module-builder": "^0.5.4",
-        "@nuxt/schema": "^3.10.3",
-        "@remindgmbh/eslint-config-nuxt": "^1.0.5",
+        "@nuxt/module-builder": "^0.8.4",
+        "@nuxt/schema": "^3.14.0",
+        "@remindgmbh/eslint-config-nuxt": "^2.0.0",
         "@remindgmbh/nuxt-typo3": "^0.0.0-development",
         "@remindgmbh/nuxt-typo3-solr": "^0.0.0-development",
-        "@types/node": "^20.9.3",
-        "eslint": "^8.54.0",
-        "nuxt": "^3.10.3",
-        "prettier": "^3.1.0",
-        "typescript": "^5.3.2",
-        "vue-tsc": "^1.8.22"
+        "@types/node": "^22.9.0",
+        "eslint": "^9.14.0",
+        "nuxt": "^3.14.0",
+        "prettier": "^3.3.3",
+        "typescript": "^5.6.3",
+        "vue-tsc": "^2.1.10"
     }
 }

src/module.ts

@@ -3,13 +3,17 @@ import {
     addPlugin,
     createResolver,
     defineNuxtModule,
+    hasNuxtModule,
+    installModule,
 } from '@nuxt/kit'
 import { name, version } from '../package.json'
+import type { Content } from '@remindgmbh/nuxt-typo3/models/typo3'
 import { defu } from 'defu'
 
 export const CONFIG_KEY = 'typo3Matomo'
 
 export interface ModuleOptions {
+    cookie?: Content.Cookie['category']
     domains: string
     matomoUrl: string
     siteId: number
@@ -26,10 +30,11 @@ export default defineNuxtModule<ModuleOptions>({
         name,
         version,
     },
-    setup(options, nuxt) {
+    async setup(options, nuxt) {
         const resolver = createResolver(import.meta.url)
 
-        nuxt.options.alias['#nuxt-typo3-matomo'] = resolver.resolve('runtime')
+        nuxt.options.alias['@remindgmbh/nuxt-typo3-matomo'] =
+            resolver.resolve('runtime')
 
         nuxt.options.runtimeConfig.public[CONFIG_KEY] = defu(
             nuxt.options.runtimeConfig.public[CONFIG_KEY],
@@ -38,6 +43,15 @@ export default defineNuxtModule<ModuleOptions>({
 
         addImportsDir(resolver.resolve('runtime/composables/**/*'))
 
+        if (nuxt.options._prepare) {
+            if (!hasNuxtModule('@remindgmbh/nuxt-typo3')) {
+                await installModule('@remindgmbh/nuxt-typo3')
+            }
+            if (!hasNuxtModule('@remindgmbh/nuxt-typo3-solr')) {
+                await installModule('@remindgmbh/nuxt-typo3-solr')
+            }
+        }
+
         addPlugin({
             mode: 'client',
             src: resolver.resolve('./runtime/plugins/matomo'),

src/runtime/plugins/matomo.ts

@@ -1,13 +1,16 @@
 import {
     type T3SolrModel,
+    computed,
     defineNuxtPlugin,
     useHead,
     useLogger,
     useMatomo,
     useRouter,
     useRuntimeConfig,
+    useT3CookieConsent,
     useT3Data,
     useT3DataUtil,
+    watch,
 } from '#imports'
 
 export default defineNuxtPlugin((nuxt) => {
@@ -20,6 +23,40 @@ export default defineNuxtPlugin((nuxt) => {
         return
     }
 
+    const { cookieCategories } = useT3CookieConsent()
+
+    const isCookieAccepted = computed(
+        () =>
+            !config.cookie ||
+            config.cookie === 'none' ||
+            cookieCategories.value[config.cookie],
+    )
+
+    if (isCookieAccepted.value) {
+        includeScript()
+    } else {
+        watch(
+            cookieCategories,
+            () => {
+                if (isCookieAccepted.value) {
+                    includeScript()
+                }
+            },
+            { deep: true },
+        )
+    }
+
+    function includeScript() {
+        useHead({
+            script: [
+                {
+                    async: true,
+                    src: new URL('matomo.js', config.matomoUrl).href,
+                },
+            ],
+        })
+    }
+
     window._paq = window._paq || []
 
     const matomo = useMatomo()
@@ -31,46 +68,51 @@ export default defineNuxtPlugin((nuxt) => {
     matomo.setDomains(config.domains.split(','))
     matomo.setIsUserOptedOut()
 
+    function addMatomoLinksEventListener(el: HTMLElement) {
+        const matomoLinks: NodeListOf<HTMLAnchorElement> = el.querySelectorAll(
+            'a[href^="t3://matomo"]',
+        )
+        for (const matomoLink of matomoLinks) {
+            const params = new URLSearchParams(matomoLink.search)
+            const action = params.get('action')
+
+            matomoLink.addEventListener('click', (event) => {
+                event.preventDefault()
+                switch (action) {
+                    case 'opt-out':
+                        matomo.optUserOut()
+                        break
+                    case 'opt-in':
+                        matomo.forgetUserOptOut()
+                        break
+                    case 'toggle':
+                        matomo.isUserOptedOut.value
+                            ? matomo.forgetUserOptOut()
+                            : matomo.optUserOut()
+                        break
+                    default:
+                        break
+                }
+            })
+        }
+    }
+
     nuxt.hook('typo3:parseHtml', (el) => {
         if (el.value) {
-            const matomoLinks: NodeListOf<HTMLAnchorElement> =
-                el.value.querySelectorAll('a[href^="t3://matomo"]')
-            for (const matomoLink of matomoLinks) {
-                const params = new URLSearchParams(matomoLink.search)
-                const action = params.get('action')
-
-                matomoLink.addEventListener('click', (event) => {
-                    event.preventDefault()
-                    switch (action) {
-                        case 'opt-out':
-                            matomo.optUserOut()
-                            break
-                        case 'opt-in':
-                            matomo.forgetUserOptOut()
-                            break
-                        case 'toggle':
-                            matomo.isUserOptedOut.value
-                                ? matomo.forgetUserOptOut()
-                                : matomo.optUserOut()
-                            break
-                        default:
-                            break
+            addMatomoLinksEventListener(el.value)
+        } else {
+            watch(
+                el,
+                () => {
+                    if (el.value) {
+                        addMatomoLinksEventListener(el.value)
                     }
-                })
-            }
+                },
+                { once: true },
+            )
         }
     })
 
-    useHead({
-        script: [
-            {
-                async: true,
-                src: new URL('matomo.js', config.matomoUrl).href,
-                type: 'text/javascript',
-            },
-        ],
-    })
-
     router.afterEach((to, from) => {
         matomo.setReferrerUrl(window.location.origin + from.fullPath)
         matomo.setCustomUrl(window.location.origin + to.fullPath)

src/runtime/types/schema.d.ts

@@ -1,4 +1,4 @@
-import { CONFIG_KEY, ModuleOptions } from '../../module'
+import type { CONFIG_KEY, ModuleOptions } from '../../module'
 
 declare module '@nuxt/schema' {
     interface PublicRuntimeConfig {

tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "./playground/.nuxt/tsconfig.json"
-}
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": [
+      "dist",
+      "node_modules",
+      "playground",
+  ]
+}