Vue 3

Use the script tag for the default install, or the optional Vue package wrapper when you want typed helpers.

Install

The recommended Vue install is the standard HTML script tag in your app shell. Use the package wrapper below if you prefer a composable or global plugin.

1. 1

   Add the package

   bash

   npm install produl-tracker

2. 2

   Choose an integration method

   The Vue adapter exports both a useAnalytics composable and an analyticsPlugin. Pick the one that fits your app structure.

Option A: Composable

Call useAnalytics(props) once in your root component — typically App.vue. This is the most lightweight option and works well when you want to co-locate setup with your root template.

<script setup>
import { useAnalytics } from 'produl-tracker/vue'

useAnalytics({ siteId: 'YOUR_SITE_API_KEY' })
</script>

<template>
  <RouterView />
</template>

Option B: Plugin

Register analyticsPlugin globally via app.use() in main.ts. The plugin accepts the same props as the composable. Use this approach when you want Produl initialized alongside other plugins in one place.

import { createApp } from 'vue'
import { analyticsPlugin } from 'produl-tracker/vue'
import App from './App.vue'

const app = createApp(App)

app.use(analyticsPlugin, { siteId: 'YOUR_SITE_API_KEY' })

app.mount('#app')

Configuration