Install on Vue or Nuxt

Load the script once for the whole app: in index.html for Vue, or in nuxt.config for Nuxt.

Vue (Vite)

1. Paste the script into index.html before </head>

   Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.

   index.html

   Copy

   1

   2

   3

   4

   5

   <script
     defer
     src="https://metricraven.com/js/script.js"
     data-site-id="YOUR_SITE_ID"
   ></script>

2. Build, deploy and open your app

   Check the deployed app; localhost is not tracked by default.

Nuxt

1. Add the script to app.head in nuxt.config.ts

   Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.

   nuxt.config.ts

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   // nuxt.config.ts
   export default defineNuxtConfig({
     app: {
       head: {
         script: [
           {
             src: "https://metricraven.com/js/script.js",
             defer: true,
             "data-site-id": "YOUR_SITE_ID",
           },
         ],
       },
     },
   });

2. Deploy and open your site

   Navigate between pages to confirm each route is recorded.

Notes

• Vue Router's history mode uses the browser history API, which the tracker records automatically.
• Hash mode (createWebHashHistory, URLs like /#/pricing) needs data-track-hash="true" on the script. See SPA & virtual pages.
• Add the script globally only, not from individual pages or components.

Optional script attributes are listed in Install & verify. To exclude your own visits, see Exclude your visits.