Install StageWhisper in Nuxt

Nuxt manages the document head for you, so the StageWhisper loader goes in head config rather than a template file. There are two native homes for it: app.head in nuxt.config.ts, or the useHead composable.

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 app.head

Site-wide static tags belong in app.head in nuxt.config.ts. It doesn’t support reactive data, which is exactly right for the loader — the tag never changes. Script entries are objects, so async and the data-sw-key attribute go in as plain keys.

1. Open nuxt.config.ts and add the loader entry to app.head.script.
2. Swap pub_your_site_key for the public site key shown on your site’s install page in the dashboard.
3. Restart the dev server so the config change takes effect.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.stagewhisper.co/loader.js",
          async: true,
          "data-sw-key": "pub_your_site_key"
        }
      ]
    }
  }
})

Alternative: the useHead composable

Prefer keeping it in a component? Call useHead from app.vue instead — it takes the same script entry and renders the identical tag.

<!-- app.vue -->
<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://cdn.stagewhisper.co/loader.js",
      async: true,
      "data-sw-key": "pub_your_site_key"
    }
  ]
})
</script>

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

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.