Install StageWhisper in Vue

StageWhisper drops into a Vue app the same way it drops into any site — one async script tag in the shell page. In a Vite-based Vue project that shell is index.html, so the whole install is a single paste: no plugin, no component, no build config.

Prerequisites

A StageWhisper site created in the dashboard.
Your app’s origin on the site’s origin allowlist — enable the localhost toggle if you’re testing locally.

Add the loader to index.html

Vite-based Vue projects keep an editable index.html at the project root — it’s the shell page that boots your app, which makes it the natural home for the loader.

Open index.html at the root of your project.
Paste the one-liner before the closing </head> tag, and swap pub_your_site_key for the public site key shown on your site’s install page in the dashboard.
Reload the page — Vite serves index.html directly, so there’s nothing to rebuild.

index.html

<!-- index.html -->
<head>
  <meta charset="UTF-8" />
  <title>My Vue App</title>
  <script async src="https://cdn.stagewhisper.co/loader.js" data-sw-key="pub_your_site_key"></script>
</head>

<!-- index.html -->
<head>
  <meta charset="UTF-8" />
  <title>My Vue App</title>
  <script async src="https://cdn.stagewhisper.co/loader.js" data-sw-key="pub_your_site_key"></script>
</head>

Running a strict Content Security Policy? The Content Security Policy guide covers the exact directives and where the nonce goes.

Vue Router

Client-side navigation is handled automatically — the widget re-evaluates your URL rules whenever Vue Router updates history state, so route changes need no extra wiring. Keep the loader in the index.html shell and install it once; never add it per-component.

Verify

Refresh your app, then watch the site’s install status in the dashboard — it flips the moment the first ping arrives.

Widget not showing up? Head to Troubleshooting for the usual suspects — blocked origins, CSP, localhost, and stale config.