Vue 3

Add Produl to a Vue 3 app. Choose between the composable for scoped setup or the plugin for global registration.

Install

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_ID' })
</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_ID' })

app.mount('#app')

Configuration