Back to list 2023-220

Nuxt3 Matomo Integration

Note: This article was written using Nuxt.js 3.6.5

On the Nuxt.js website you'll find a Matomo Analytics plugin to integrate Matomo into your brand new Matomo webiste.

Sadly this convenient method does not work for me leading to the following error trying to start the server:

 ERROR  Cannot restart nuxt:  Cannot read properties of undefined (reading 'options')                                                     14:46:49
  at matomoModule (node_modules/nuxt-matomo/lib/module.js:23:12)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:2409:101)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:3236:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:205:9)
  at async _applyPromised (node_modules/nuxi/dist/chunks/dev.mjs:97:10)

Nuxt3 compatibility of this module seems to be a known issue. This github issue offers a nice workaround to the problem.

My personal integration (for this website) loacated in @/plugins/matomo-plugin.client.js ended up looking like this:

import VueMatomo from "vue-matomo";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueMatomo, {
    debug: true,
    host: YOUR_URL,
    siteId: YOUR_SITE_ID,
    router: nuxtApp.$router,
    enableHeartBeatTimer: true,
    heartBeatTimerInterval: 5,
    enableLinkTracking: true,
    requireConsent: false,