Vue & Nuxt

The approach depends on whether you're on Nuxt (which manages the document head for you) or a plain Vue app built with Vite.

Nuxt #

Add the script to your nuxt.config.ts so it's injected on every page:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://api.plotap.com/widget.js",
          "data-key": "hx_pub_your_key_here",
          defer: true,
        },
      ],
    },
  },
});

If you only want the widget on certain pages, use useHead inside those page components instead of the global config.

Vue (Vite) #

A plain Vue app has an index.html in the project root. Add the script just before </body>:

<script
  src="https://api.plotap.com/widget.js"
  data-key="hx_pub_your_key_here"
  defer
></script>

The data-key is your public key, safe to ship in client code, and limited to the origins you allow. See Quotas, origins & keys and the general Installation guide.