How do I install the Matomo tracking code on websites that use Vue.js?

If you use Vue.js in your website, you can start tracking data in Matomo seamlessly using the “vue-matomo” npm package. Here’s how to set it up:

1. Install the vue-matomo npm package.
npm install --save vue-matomo

2. Initialize VueMatomo in main.js with your Matomo Instance details (example code below).
Example code for Vue3:

    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

Example code for Vue2:

    import Vue from 'vue'
    import App from './App.vue'
    import VueMatomo from 'vue-matomo'

    Vue.use(VueMatomo, {
        host: '{YOUR_MATOMO_INSTANCE_URL}',
        siteId: {YOUR_SITE_ID}
    });

    new Vue({
      el: '#app',
      router,
      components: {App},
      template: ''
    })

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

Congratulations! You have successfully installed the Matomo Analytics tracking code via the “vue-matomo” npm package. To verify that hits are being tracked, visit your website and check that this data is visible in your Matomo instance.

Notes:
* If you followed these steps you can now access Matomo in your components through window._paq.push.
* If you followed these steps and have no data coming into Matomo, you can contact our support team for assistance or try the Matomo Tag Manager instead (use this link for Single Page Applications).