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.