Skip to main content

Vue / Nuxt

This guide covers installing the DAP SDK in Vue 3 applications (with Vite) and Nuxt 3 applications.

Prerequisites​

  • Vue 3+ or Nuxt 3+

Vue 3 (Vite)​

Add the snippet to index.html in your project root, inside the <head> tag:

<head>
  <meta charset="UTF-8" />
  <!-- DAP SDK Snippet -->
  <script>
    (function (w, d, s, o, f, js, fjs) {
      w["DAPObject"] = f;
      w[f] =
        w[f] ||
        function () {
          (w[f].q = w[f].q || []).push(arguments);
        };
      w[f].l = 1 * new Date();
      js = d.createElement(s);
      fjs = d.getElementsByTagName(s)[0];
      js.id = f;
      js.src = o;
      js.async = 1;
      js.crossOrigin = "anonymous";
      fjs.parentNode.insertBefore(js, fjs);
    })(window, document, "script", "https://cdn.example.com/sdk.js", "DAP");
    DAP("init", { tenantKey: "YOUR_TENANT_KEY" });
  </script>
</head>

Dynamic Injection in App.vue​

If you need to control when the SDK loads, inject it from App.vue:

<script setup lang="ts">
import { onMounted } from 'vue';

let sdkBootstrapped = false;

onMounted(() => {
  if (sdkBootstrapped) return;
  sdkBootstrapped = true;

  if (!window.DAP) {
    window.DAPObject = 'DAP';
    const q: unknown[][] = [];
    window.DAP = Object.assign(
      (...args: unknown[]) => { q.push(args); },
      { q, l: Date.now() },
    );
  }

  let script = document.getElementById('breakground-dap') as HTMLScriptElement | null;
  if (!script) {
    script = document.createElement('script');
    script.id = 'breakground-dap';
    script.src = 'https://cdn.example.com/sdk.js';
    script.async = true;
    script.crossOrigin = 'anonymous';
    document.head.appendChild(script);
  }

  window.DAP('init', { tenantKey: 'YOUR_TENANT_KEY' });
});
</script>

Nuxt 3​

Option A — nuxt.config.ts​

Add the SDK as a head script in your Nuxt configuration:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: `
            (function(w,d,s,o,f,js,fjs){
              w['DAPObject']=f;w[f]=w[f]||function(){(w[f].q=w[f].q||[]).push(arguments)};
              w[f].l=1*new Date();js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
              js.id=f;js.src=o;js.async=1;js.crossOrigin='anonymous';fjs.parentNode.insertBefore(js,fjs);
            })(window,document,'script','https://cdn.example.com/sdk.js','DAP');
            DAP('init', { tenantKey: 'YOUR_TENANT_KEY' });
          `,
          type: "text/javascript",
        },
      ],
    },
  },
});

Option B — Client-Only Plugin​

Create a plugin at plugins/breakground.client.ts:

export default defineNuxtPlugin(() => {
  if (!window.DAP) {
    window.DAPObject = "DAP";
    const q: unknown[][] = [];
    window.DAP = Object.assign(
      (...args: unknown[]) => {
        q.push(args);
      },
      { q, l: Date.now() },
    );
  }

  const script = document.createElement("script");
  script.id = "breakground-dap";
  script.src = "https://cdn.example.com/sdk.js";
  script.async = true;
  script.crossOrigin = "anonymous";
  document.head.appendChild(script);

  window.DAP("init", { tenantKey: "YOUR_TENANT_KEY" });
});
info

The .client suffix in the filename tells Nuxt to run this plugin only in the browser, not during server-side rendering.

TypeScript Support​

Add a type declaration file at env.d.ts or breakground.d.ts in your project root:

declare global {
  interface Window {
    DAP: ((...args: unknown[]) => void) & { q?: unknown[][]; l?: number };
    DAPObject: string;
  }
}

export {};

Ensure the file is included in your tsconfig.json:

{
  "include": ["env.d.ts", "**/*.ts", "**/*.vue"]
}

SPA Route Changes​

Vue Router and Nuxt routing are handled automatically by the SDK's pushState and popstate monitoring.

For manual refresh on route changes (for example, when query parameters change but the path stays the same), use a watcher:

<script setup lang="ts">
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

watch(() => route.fullPath, () => {
  window.DAP('refreshContent');
});
</script>

Gotchas​

warning
  • Nuxt plugin filename: The .client suffix on breakground.client.ts is critical. Without it, the plugin runs on the server where window is not available.
  • SSR guards in composables: If you access DAP inside a composable, wrap the call with if (import.meta.client) to prevent server-side errors.
  • Vue 2 users: Use mounted() lifecycle hook instead of onMounted(), and use the Options API pattern.

Verification​

  1. Open your application in a browser.
  2. Open the developer console (F12 or Cmd+Option+I).
  3. Type window.DAP and press Enter. You should see the DAP function object.
  4. Enable debug mode for detailed logs:
DAP("init", { tenantKey: "YOUR_TENANT_KEY", debug: true });
  1. Check the Console tab for messages prefixed with [DAP] confirming successful initialization.

Next Steps​