Doesn't work with vue3 + Inertia

[eele94]

I can't get it to work, because Inertia uses Ziggy route function to pass the routes instead of the default vue router.

Does anyone have an example for working with inertia?

[Repox]

I can't get it to work, because Inertia uses Ziggy route function to pass the routes instead of the default vue router.

Ziggy doesn't provide routing like the Vue Router does. Ziggy is just a help in terms of using named routes from Laravel.

Does anyone have an example for working with inertia?

My solution has been the following:

import VueMatomo from 'vue-matomo'

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({el, App, props, plugin, title}) {
        const app = createApp({render: () => h(App, props)})
            .use(plugin)
            .use(ZiggyVue)
            .use(VueMatomo, {
                host: 'https://matomo.example.com',
                siteId: 1,
            })
            .mount(el);

        router.on('navigate', (event) => {
                window._paq.push(['trackPageView']);

                // If you want to track users as well
                if(event.detail.page.props.auth.user) {
                    window._paq.push(['setUserId', page.props.auth.user.id]);
                }
        });

        return app;
    },
    progress: {
        color: '#4B5563',
    },
});

[gde-pass]

@Repox Your implementation seems to work but not fully, i do have some logs on my matomo dashboard but not every pages visited are logged ...

[gde-pass]

This is how i fixed the issue with Vue2 + Inertia + Ziggy + Vite:

  setup: ({ el, App, props, plugin }) => {
    Vue.use(plugin);
    Vue.use(VueMatomo, {
      host: import.meta.env.VITE_MATOMO_URL,
      siteId: import.meta.env.VITE_MATOMO_SITE_ID,
    });

    router.on('navigate', (event) => {
      window._paq.push(['setCustomUrl', event.detail.page.url]);
      window._paq.push(['trackPageView']);
    });

    new Vue({
      i18n,
      pinia,
      render: (h) => h(App, props),
    }).$mount(el);
  },

With the following line:

window._paq.push(['setCustomUrl', event.detail.page.url]);

I have been able to fix the issue where i see on the matomo dashboard a user navigating always on the same url while he actually navigate to differente pages