Vue

Install HumanBehavior in standalone Vue/Vite: env vars, main.ts placement, direct tracker API, and wizard detection.

Standalone Vue installs are simple: initialize the browser tracker in the same client entry that creates the Vue app, before or alongside createApp(...).mount(...).

Wizard detection

The shipped wizard detects Vue when:

Signal	Meaning
`package.json` has `vue`	Vue app
`package.json` does not have `nuxt`	Not Nuxt; Nuxt has a separate client plugin path

The wizard treats this as a Vite-style Vue project and uses VITE_ browser env vars.

Package

pnpm add humanbehavior-js

Environment variables

VITE_HUMANBEHAVIOR_API_KEY=your-api-key
VITE_HUMANBEHAVIOR_INGESTION_URL=https://ingest.humanbehavior.co

VITE_HUMANBEHAVIOR_INGESTION_URL can be omitted for hosted production ingestion. Keep it when using local ingestion or a reverse proxy.

Restart the dev server after changing .env.

Init in `src/main.ts`

import { createApp } from "vue";
import { HumanBehaviorTracker } from "humanbehavior-js";
import App from "./App.vue";

HumanBehaviorTracker.init(import.meta.env.VITE_HUMANBEHAVIOR_API_KEY, {
  ingestionUrl: import.meta.env.VITE_HUMANBEHAVIOR_INGESTION_URL,
});

createApp(App).mount("#app");

The wizard reference project initializes before mounting. That is safe because src/main.ts runs in the browser bundle and the tracker sets up its own DOM-ready handling.

If you prefer to guard missing keys

const apiKey = import.meta.env.VITE_HUMANBEHAVIOR_API_KEY;

if (apiKey) {
  HumanBehaviorTracker.init(apiKey, {
    ingestionUrl: import.meta.env.VITE_HUMANBEHAVIOR_INGESTION_URL,
  });
}

Use the guard in shared starter templates or open-source apps where the env var may not be present for every developer.

What this starts

After init, the SDK starts the same browser features as other frameworks:

Feature	Default
Session replay	On
Page view/navigation capture	On
Automatic UI events	On unless `enableAutomaticTracking: false`
Console warn/error capture	On unless `enableConsoleTracking: false`
Network error capture	On unless `enableNetworkTracking: false`
Runtime error capture	On unless `enableErrorTracking: false`
Web vitals / tracing	On unless disabled

Vue Router

No special Vue Router adapter is shipped. The SDK patches browser history/navigation and records pageviews automatically.

If your app uses unusual in-memory routing that never changes history or location, call:

const tracker = HumanBehaviorTracker.init(apiKey);
router.afterEach(() => {
  void tracker.trackPageView();
});

Most Vue Router apps do not need this manual hook.

Files to check

File	What to verify
`.env.local` or `.env`	`VITE_HUMANBEHAVIOR_API_KEY` exists
`src/main.ts`	`HumanBehaviorTracker.init` runs once
`package.json`	`humanbehavior-js` dependency installed
DevTools Network	Ingestion requests return 2xx

Common pitfalls

Pitfall	Symptom	Fix
Using `HUMANBEHAVIOR_API_KEY` without `VITE_`	`undefined` in browser bundle	Rename to `VITE_HUMANBEHAVIOR_API_KEY`
Installing in Nuxt with this guide	Server-side init or missing runtime config	Use Nuxt
Initializing inside a component rendered many times	Duplicate setup attempts	Keep init in `main.ts`
Hardcoding ingestion URL to dashboard port	404/failed requests	Use hosted ingestion or the actual ingestion server

Redaction example

HumanBehaviorTracker.init(import.meta.env.VITE_HUMANBEHAVIOR_API_KEY, {
  redactionStrategy: {
    mode: "privacy-first",
    unredactFields: ["[data-hb-allow]"],
  },
});

Use Replay privacy before recording sensitive forms.

Custom events from Vue code

Keep the tracker instance if you want to send events:

export const humanBehavior = HumanBehaviorTracker.init(apiKey);

await humanBehavior.customEvent("plan_selected", { plan: "pro" });

For batching, property design, and verification, see Custom events.

Verify

Run the Vue app.
Open a browser tab and interact with the page.
Confirm /api/ingestion/events and /heartbeat (init is not required).
Open Replays and look for the newest session.
Use Verify data is flowing if the page is still empty.

Vue

On this page