How to use vue-matomo in Vuepress 2. Window is not defined

58 Views Asked by At

I am trying to set up Matomo in a Vuepress 2 project. I have found the vue-matomo plugin but don't know how to set up a Vue plugin to run in a Vuepress project. I have tried to follow these guides:

I have created the client.ts file below and got the following error message while running npm run docs:build:

ReferenceError: window is not defined
    at 4512 (/path-to-project/.vuepress/.temp/.server/app.cjs:802:63)
    at __webpack_require__ (/path-to-project/.vuepress/.temp/.server/app.cjs:1840:41)
    at /path-to-project/.vuepress/.temp/.server/app.cjs:18321:18
    at /path-to-project/.vuepress/.temp/.server/app.cjs:18670:3
    at Object.<anonymous> (/path-to-project/.vuepress/.temp/.server/app.cjs:18673:12)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)

clients.ts

import { defineClientConfig } from '@vuepress/client'
import { VueMatomo } from 'vue-matomo'

export default defineClientConfig({
  enhance({ app, router, siteData }) {
    app.use(VueMatomo, {
        host: 'https://matomo.example.com',
        siteId: 5,
        router: router,
    })
  },
  setup() {},
  rootComponents: [],
})

package.json

  "devDependencies": {
    "@vuepress/plugin-register-components": "^2.0.0-rc.0",
    "vuepress-webpack": "^2.0.0-rc.0"
  },
  "dependencies": {
    "vue-matomo": "^4.2.0"
  },

I have followed this answer (https://stackoverflow.com/a/30400159/1195909) and tried to add the code below in my package.json, but it hasn't solved the problem.

"eslintConfig": {
  "globals": {
    "window": true
  }
}

How could I set up a Vue plugin in Vuepress to solve this ReferenceError: window is not defined error?

0

There are 0 best solutions below