Skip to main content
Virent
Join waitlist

Vue Installation Guide

Last researched 2026-08-26

This is the canonical Virent installation guide for Vue single-page applications, especially Vue apps scaffolded with Vite.

Research Notes#

  • The official Vue SPA setup uses Vite and a root index.html entry point.
  • Vue client code cannot capture AI crawlers that do not execute browser JavaScript.
  • AI Analytics belongs in Nuxt, a backend, CDN worker, edge function, or reverse proxy when using plain Vue.

Primary references:

  • https://vuejs.org/guide/quick-start
  • https://vite.dev/guide/

Human Analytics#

Add the Virent browser script to index.html.

HTML
<!doctype html><html lang="en">  <head>    <meta charset="UTF-8" />    <script      defer      data-write-key="vha_pk_..."      src="https://app.virent.app/js/script.js"    ></script>  </head>  <body>    <div id="app"></div>    <script type="module" src="/src/main.ts"></script>  </body></html>

Optional event helper:

SH
pnpm add @virent.app/sdk
TS
import { initVirent, trackGoal } from "@virent.app/sdk/browser"initVirent({ writeKey: import.meta.env.VITE_VIRENT_WRITE_KEY })export function trackSignupCompleted(orderId: string) {  return trackGoal({    name: "signup_completed",    idempotencyKey: orderId,  })}

Best practices:

  • Keep the pageview script in index.html.
  • Put event helpers in a composable or utility module.
  • Use only publishable keys in VITE_ variables.
  • Test Vue Router navigation after install.

Verification:

  • Build and preview the Vue app.
  • Inspect the document head for the Virent script.
  • Confirm pageview requests appear after route navigation.
  • Refresh Human Analytics status.

Troubleshooting:

  • If the script is absent, verify the correct index.html was edited.
  • If CSP blocks the script, allow the Virent origin.
  • If route changes are missed, confirm the Virent script loaded before testing navigation.

AI Analytics#

Install AI Analytics outside the Vue browser bundle, in the host or backend layer.

ENV
VIRENT_SITE_ID=site_...VIRENT_INGEST_SECRET=vha_sk_...VIRENT_INGEST_ENDPOINT=https://app.virent.app/v1/ingest/bot

Use the same edge/server pattern as React:

TS
const staticAssetPattern = /\.(?:png|jpg|jpeg|gif|svg|ico|webp|css|js|map|txt|xml)$/iconst aiCrawlerPattern = /GPTBot|OAI-SearchBot|ChatGPT-User|ClaudeBot|claudebot|Claude-Web|Claude-User|Claude-SearchBot|PerplexityBot|PerplexityBot\/|Perplexity-User|Perplexity-User\/|Google-CloudVertexBot|DeepSeekBot|DeepSeekSpider|CCBot|Applebot|Bytespider|meta-externalagent|meta-webindexer|meta-externalfetcher|Amazonbot|DuckAssistBot|PetalBot|YouBot/iexport async function trackVirentCrawler(  request: Request,  response: Response,  waitUntil?: (promise: Promise<unknown>) => void) {  const url = new URL(request.url)  const userAgent = request.headers.get("user-agent") ?? ""  if (staticAssetPattern.test(url.pathname) || !aiCrawlerPattern.test(userAgent)) {    return  }  const report = fetch(process.env.VIRENT_INGEST_ENDPOINT!, {    method: "POST",    headers: {      "Content-Type": "application/json",      "x-api-key": process.env.VIRENT_INGEST_SECRET!,    },    body: JSON.stringify({      siteId: process.env.VIRENT_SITE_ID!,      url: url.toString(),      host: url.host,      path: url.pathname,      method: request.method,      referer: request.headers.get("referer"),      userAgent,      statusCode: response.status,      requestId: crypto.randomUUID(),      timestamp: new Date().toISOString(),    }),  })  if (waitUntil) {    waitUntil(report.catch(() => {}))    return  }  await report}

Best practices:

  • Use Nuxt if you want framework-native server middleware.
  • Keep VIRENT_INGEST_SECRET out of Vue code.
  • Skip static files and only capture document/page requests by default.

Verification:

SH
curl -A "GPTBot" https://your-domain.com/
  • Confirm the edge/backend layer runs for the route.
  • Refresh AI Analytics status.

Troubleshooting:

  • If the app is static-only, install tracking in the host platform instead of Vue components.
  • If the secret leaks into the bundle, rotate it and remove all public references.
  • If events include built assets, add file extension exclusions.