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,
    trackInitialView: true,
    disableCookies: true,
    requireCookieConsent: false,
  });
});

The plugin is autoloaded by nuxt and does not require any further integration.

Be sure to use .client in the file name to ensure it's only loaded on the client side. Otherwise you may end up with issues on the back end.