Vue & Nuxt Installation Guide - Help Center

Integrating Discover Mac Apps tracking into a Vue (or Nuxt.js) application is straightforward. Since our tracking script is vanilla JavaScript, it works perfectly with the Vue Virtual DOM.

1. Adding the Script

The best place to add the tracking script is in your main HTML template so it loads immediately.

For a standard Vue app (Vite or Vue CLI), open your index.html file in the root or public directory.

<head>
  <!-- Other head tags -->
  
  <script 
    src="https://discovermacapps.com/track.js" 
    data-program-id="YOUR_PROGRAM_ID" 
    defer
  ></script>
</head>

[!IMPORTANT] Make sure you replace YOUR_PROGRAM_ID with the actual ID from your Dashboard. The defer attribute ensures the script loads without blocking your page rendering.

2. Nuxt.js Installation

If you are using Nuxt 3, you should add the script via the nuxt.config.ts file instead of editing HTML directly.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://discovermacapps.com/track.js',
          'data-program-id': 'YOUR_PROGRAM_ID',
          defer: true
        }
      ]
    }
  }
})

3. Manual Verification

To ensure it works:

Load your Vue app locally with an affiliate parameter: http://localhost:5173/?aff_ref=test-affiliate
Open Chrome Developer Tools -> Application tab -> Cookies.
Verify that a cookie named dma_aff_ref has been created with the value test-affiliate.