Vue Matomo tracker inside theme

[tassoman]

Hello there, I'm trying to inject Matomo's Vue tracker inside my template but failing.

I managed to create a custom theme by having a custom MyLayout.vue but I'm unable to inject the vue-matomo component inside my Layout's Slot.

Any idea on how to load the component, by using the provided example? Vue.use(VueMatomo, {props: 'myprops'})

[brc-dd]

Vue.use -- this is vue 2 syntax. You'll need something like this: https://vitepress.dev/guide/extending-default-theme#registering-global-components -- app.use(VueMatomo, { ... }) inside enhanceApp.

[tassoman]

I'm sorry I took the wrong example. Vue3 syntax is this

import { createApp } from 'vue'
    import VueMatomo from 'vue-matomo'
    import App from './App.vue'

    createApp(App)
        .use(VueMatomo, {
            // Configure your matomo server and site by providing
            host: '{YOUR_MATOMO_INSTANCE_URL}',
            siteId: {YOUR_SITE_ID},
        })
        .mount('#app')


    window._paq.push(['trackPageView']); //To track pageview

I bet the answer is the same, I must register the component inside the enhancement function. 🤔

[tassoman]

Looks like I made it, but adding the component to MyLayout.vue makes an orhpan <vuematomo></vuematomo> xml tag 🥴

export default {
    extends: DefaultTheme,
    Layout: MyLayout,
    enhanceApp({app}) {
            app.component('TestComp', MyComp)
            app.use(VueMatomo, {
                host: 'https://matomo.my.host/',
                siteId: 123,
            })
    }
} satisfies Theme

<script setup>
import DefaultTheme from 'vitepress/theme'
const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #layout-bottom>
        <VueMatomo />
    </template>
  </Layout>
</template>

[brc-dd]

I don't think it registers any global component. Just initializing should be sufficient. Better to do that inside some condition like typeof document !== 'undefined' to avoid breaking ssr.

[tassoman]

I tried somehow, having it half functional. Was included but claiming internal errors, because Matomo Tracker was not initialized.
I feel it buggy, not official, and not functional, not ready for TS, also.
I'm just going to create a custom component loading the needed JS after page is rendered. Maybe by importing mounted hook.

[Djyp]

In case anyone comes here like I did
Not sure it's the perfect solution that respect the art of Vue development but here's how I got it to work :

I have Vite 2.0.0-alpha2
I tried using vue-matomo and the package vitepress-plugin-matomo and a bunch of stuff including what is described up on this page. Nothing worked. Extending the theme didn't help either.

Best way was this, in index.ts :

// Basic code
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    // ...
  },
// My code
  setup(app) {
    onMounted(() => {
      // Matomo's JS code
      var _paq = window._paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
          var u="//matomo.host.someting/";
          _paq.push(['setTrackerUrl', u+'matomo.php']);
          _paq.push(['setSiteId', '123']);
          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);
      })();
      // end of Matomo's code
    })
  }
// End of my code
} satisfies Theme

I'm a still Vue/Vite newbie so I had a lot to figure out to workaround this simple feature. Please let me know if anything seems wrong to you