Integration with Vue.js

Vue.js integration is not much different than Pure JavaScript integration. You only need to add Metricalp script to your index.html file. Then Metricalp will automatically be integrated to your Vue.js app and will be starting to tracking screen view events. While we do not have an official Vue.js library yet (planning it for future), you do not even need that. With this simple steps you will be integrated Metricalp's most recent and stable version always and it will be type safe. In this documentation we will also learn how to fire custom events. With that method, you can also disable auto route catch and fire screen_view events manually. To details please check Custom Events & Props

Add Metricalp script:

We assume that you bootstrapped a new Vue.js project with Vite like `yarn create vite my-vue-app --template vue-ts`. Then inside of your index.html file (./index.html) inside <head></head> tags add Metricalp script as described in Pure JavaScript Embed

html
<script src="https://cdn.metricalp.com/event/metricalp.js" data-allow-localhost="true" data-tid="YOUR_TID" defer></script>

- Do not forget to change YOUR_TID with your tid number a.k.a Tracker ID as described in Embed Share Tracker

We added allowLocalhost because defaultly Metricalp does not work in localhost to protect your quota limits. We allowed localhost for testing purposes. You would want to remove it after testing it once to save your quota. For detailed info check allow localhost & exclude me docs.

That's all, you integrated your Vue.js app with Metricalp, hooray 🚀

Defaultly, Metricalp automatically starts to collecting screen_view events and route changes (it can be disabled with data-disable-auto-route-catch option please check API reference for details and all other customizations).

Fire custom events with type safety:

Let's create a new file metricalp-tracker.ts in src folder (src/metricalp-tracker.ts)

typescript

        type MetricalpEvent = {
          type: string;
          [key: string]: string | number | boolean | undefined;
        };
        
        declare global {
          interface Window {
            metricalp?: { event: (ev: MetricalpEvent) => void };
          }
        }
        
        export enum MetricalpEventTypes {
          ScreenView = 'screen_view',
          ClickSave = 'click_save',
        }
        
        export function metricalpEvent(event: MetricalpEvent) {
          if (typeof window === 'undefined' || !window['metricalp']?.event) {
            return;
          }
          window.metricalp?.event(event);
        }

Now we can use metricalpEvent function to fire custom events. Let's import and use it in our app. For example (src/App.vue) and fire a custom event when user clicks save button.

typescript

        <script setup lang="ts">
        import { metricalpEvent, MetricalpEventTypes } from './metricalp-tracker';
        
        const handleClick = () => {
          metricalpEvent({ type: MetricalpEventTypes.ClickSave });
        };
        </script>
        
        <template>
          <button type="button" @click="handleClick()">Save</button>
        </template>

That is all, now you can fire custom events with type safety because we used event types as Enums. You can also disable auto route catch and fire a screen_view event manually with MetricalpEventTypes.ScreenView as we defined above. Also you can attach extra data to event as custom props, for details please check Custom Events & Props

Also please check full API Reference to customize script as you wish: API reference