window is not defined - Nuxt 3.

I'm getting a Window is not defined on Nuxt 3.8.2 start up. I seen this in older threads and it seems to be because of SSR needing to be disabled. Not sure how to approach this now that plugin files are automatically loaded and not controlled by nuxt.config.ts

Where and how can I disable SSR for the plugin? Here is my vue-matomo.js file:

import { defineNuxtPlugin } from '#app'
import VueMatomo from 'vue-matomo'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueMatomo, {
    host: 'https://datalogics.matomo.cloud/',
    siteId: 1,
    // Enables automatically registering pageviews on the router
    router: nuxtApp.$router,
    enableLinkTracking: true,
    requireConsent: false,
    trackInitialView: true,
    disableCookies: true,
    requireCookieConsent: false,

  })
  window._paq.push(['trackPageView']);
})

and here is what the console is giving me: [nuxt] [request error] [unhandled] [500] window is not defined at Object.<anonymous> (D:\DLWebsite2023\DL2023\FrontEnd\marketing-fe\node_modules\vue-matomo\dist\vue-matomo.js:1:224) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:194:25) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) [nuxt] [request error] [unhandled] [500] window is not defined at Object.<anonymous> (D:\DLWebsite2023\DL2023\FrontEnd\marketing-fe\node_modules\vue-matomo\dist\vue-matomo.js:1:224) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:194:25) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) [nuxt] [request error] [unhandled] [500] window is not defined at Object.<anonymous> (D:\DLWebsite2023\DL2023\FrontEnd\marketing-fe\node_modules\vue-matomo\dist\vue-matomo.js:1:224) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:194:25) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

The docs on Nuxt are outdated. In Nuxt 3, you need to use mode: 'client' instead of ssr: false.

This will make the app compile.

I still couldn't get it working. The plugin also needs to be defined different in Nuxt 3. This is what I got so far:

import VueMatomo from 'vue-matomo'

import { useRouter } from 'vue-router'

const router = useRouter()

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueMatomo, {
    host: '...',
    siteId: 1,
    router,
    enableLinktracking: true,
    requireConsent: false,
    trackInitialView: true,
    disableCookies: true,
    requireCookieConsent: false,
    enableHeartbeatTimer: true,
    enableHeartbeatTimerInterval: 5
  })

  return {
    provide: {
      matomo: VueMatomo
    }
  }
})

But I can't see any requests to my Matomo server.

I also can't use $matomo in my components as it should be possible with the provide according to this post.

Have you been able to set it up correctly? Would be nice if you could share your result.

AmazingDreams / vue-matomo

window is not defined - Nuxt 3. #140