Nuxt3 Matomo Integration

Note: This article was written using Nuxt.js 3.12.3

The Nuxt.js ecosystem features an official Matomo Analytics plugin to integrate Matomo into a project. Sadly this plugin is not yet compatible with Nuxt 3.

Integration of Matomo is still possible however creating a plugin. My Matomo plugin set up looks like this:

Edit plugins/matomo.client.js:

// plugins/matomo.client.js

export default defineNuxtPlugin((nuxtApp) => {
    if (process.client) {
        var _paq = (window._paq = window._paq || []);
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        _paq.push(["trackPageView"]);
        _paq.push(["enableLinkTracking"]);
        (function () {
            var u = nuxtApp.$config.public.matomo_host;
            _paq.push(["setTrackerUrl", u + "matomo.php"]);
            _paq.push(["setSiteId", nuxtApp.$config.public.matomo_site_id]);
            var d = document,
                g = d.createElement("script"),
                s = d.getElementsByTagName("script")[0];
            g.async = true;
            g.src = u + "matomo.js";
            s.parentNode.insertBefore(g, s);
        })();
    }
});

Then change your nuxt.config.ts to contain the following values:

// nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // URL of your matomo host.
      // Trailing slash required! 
      matomo_host: "https://<YOUR_MATOMO>/",
        
      // Matomo ID of your site. Check the Matomo backend for it
      matomo_site_id: 1,
    }
  },
  plugins: [
    { src: '~/plugins/matomo.client.js', mode: 'client' }
  ],
  // other configurations
})