tigr is a product analytics platform that turns raw events into clear, actionable insights. No charts to decode, no data team required you install the SDK, and tigr does the rest. This package is the Vue/Nuxt client.

The framework-agnostic engine lives in src/core/ with zero Vue imports, so the same folder powers tigr-react (and friends) unchanged.

Install

npm install tigr-vue

Quick start

Install the plugin once with your project API key. That's it page views, rage clicks, scroll depth, errors and page leaves are captured automatically.

Vue

// main.ts
import { createApp } from 'vue'
import { TigrPlugin } from 'tigr-vue'
import App from './App.vue'

createApp(App)
  .use(TigrPlugin, { apiKey: 'tigr_pk_...' })
  .mount('#app')

Nuxt

Register it as a client-only plugin (the SDK only runs in the browser):

// plugins/tigr.client.ts
import { TigrPlugin } from 'tigr-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(TigrPlugin, { apiKey: 'tigr_pk_...' })
})

Get your API key from your project's Settings at usetigr.app.

Tracking custom events

Grab the client in any component with useTigr():

<script setup lang="ts">
import { useTigr } from 'tigr-vue'

const tigr = useTigr()

function onUpgrade() {
  tigr.track('checkout_started', { plan: 'pro', total: 49 })
}
</script>

Identifying users

Attach a stable user id (and optional traits) so events are tied to a person:

const tigr = useTigr()

// after login
tigr.setUser('user_123', { email: '[email protected]', plan: 'pro' })

// on logout
tigr.reset()

identify() is the same as setUser() — use whichever reads better.

Configuration

app.use(TigrPlugin, {
  apiKey: 'tigr_pk_...',
  autoCapture: true,        // true | false | { pageview, rageClick, scrollDepth, error, pageLeave }
  flushInterval: 2000,      // ms before a buffered batch is sent (default 2000)
  batchSize: 20,            // force a flush at this many events (default 20)
  debug: false,             // log every event + flush to the console
  devMode: false,           // when true, the SDK does nothing (use in development)
})

| Option | Type | Default | Description | | --------------- | ------------------------------------- | ------- | ----------- | | apiKey | string | — | Required. Your project API key. | | host | string | tigr cloud | Where events are sent. Override to point at a self-hosted / local ingestion service. | | autoCapture | boolean \| Partial<AutoCaptureOptions> | true | Toggle automatic signals individually or all at once. | | flushInterval | number | 2000 | Ms to wait after the first buffered event before sending. | | batchSize | number | 20 | Flush immediately once the queue reaches this size. | | debug | boolean | false | Console-log every event and flush. | | devMode | boolean | false | When true the SDK does nothing — no capture, no network. Turn it on in development so your own activity doesn't pollute analytics. |

Auto-captured signals

pageview · rageClick · scrollDepth · error · pageLeave all on by default. Turn any off:

app.use(TigrPlugin, { apiKey: 'tigr_pk_...', autoCapture: { scrollDepth: false } })

Self-hosting / local development

By default events go to tigr's hosted ingestion endpoint. Point the SDK somewhere else with host handy when running the ingestion service locally:

app.use(TigrPlugin, { apiKey: 'tigr_pk_...', host: 'http://localhost:4001' })

Set host: '' (empty string) to run in console-only mode events are logged but nothing is sent. Omit host entirely to use the default tigr cloud.

API

useTigr() returns the client:

| Method | Description | | ------ | ----------- | | track(name, properties?) | Send a custom event. | | identify(userId, traits?) | Tie events to a user. | | setUser(userId, traits?) | Alias for identify. | | reset() | Clear the current user (e.g. on logout). | | flush() | Send everything queued right now. |

SSR / Nuxt

The SDK only runs in the browser on the server it's a no-op. In Nuxt, register it as a client-only plugin (*.client.ts, as shown above) so it never runs during SSR.

License

MIT © tigr