Vue Integration

Add qvctrs to Vue 3, Nuxt 3, or any Vue project. Works with both Options API and Composition API.

Easy2 minutes

Vue 3 / Vite (Recommended)

Option 1: index.html

Add the snippet directly to index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Vue App</title>

  <!-- qvctrs SDK -->
  <script>
  window.qvctrs=window.qvctrs||{};window.qvctrs.q=window.qvctrs.q||[];
  window.qvctrs.init=window.qvctrs.init||function(){window.qvctrs.q.push(['init'].concat(Array.prototype.slice.call(arguments)))};
  window.qvctrs.init({siteId:'YOUR_SITE_ID'});
  </script>
  <script src="https://www.qvctrs.com/qvctrs-sdk-v2.js" async></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

Option 2: Vue Plugin

Create a plugin for more control:

// src/plugins/qvctrs.ts
import type { App } from 'vue';

declare global {
  interface Window {
    qvctrs: {
      init: (options: { siteId: string }) => void;
      q?: unknown[];
      version?: string;
    };
  }
}

export const qvctrsPlugin = {
  install(app: App, options: { siteId: string }) {
    // Create shim
    window.qvctrs = window.qvctrs || {};
    window.qvctrs.q = window.qvctrs.q || [];
    window.qvctrs.init = window.qvctrs.init || function(...args) {
      window.qvctrs.q!.push(['init', ...args]);
    };

    // Initialize
    window.qvctrs.init({ siteId: options.siteId });

    // Load SDK
    const script = document.createElement('script');
    script.src = 'https://www.qvctrs.com/qvctrs-sdk-v2.js';
    script.async = true;
    document.head.appendChild(script);

    // Expose to components
    app.config.globalProperties.$qvctrs = window.qvctrs;
  },
};

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { qvctrsPlugin } from './plugins/qvctrs';

const app = createApp(App);

app.use(qvctrsPlugin, {
  siteId: 'qv_your_site_id',
});

app.mount('#app');

Nuxt 3

Option 1: nuxt.config.ts

Add scripts via Nuxt config:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          children: `
            window.qvctrs=window.qvctrs||{};window.qvctrs.q=window.qvctrs.q||[];
            window.qvctrs.init=window.qvctrs.init||function(){window.qvctrs.q.push(['init'].concat(Array.prototype.slice.call(arguments)))};
            window.qvctrs.init({siteId:'YOUR_SITE_ID'});
          `,
        },
        {
          src: 'https://www.qvctrs.com/qvctrs-sdk-v2.js',
          async: true,
        },
      ],
    },
  },
});

Option 2: Nuxt Plugin

Create plugins/qvctrs.client.ts:

// plugins/qvctrs.client.ts
export default defineNuxtPlugin(() => {
  // Create shim
  window.qvctrs = window.qvctrs || {};
  window.qvctrs.q = window.qvctrs.q || [];
  window.qvctrs.init = window.qvctrs.init || function(...args) {
    window.qvctrs.q!.push(['init', ...args]);
  };

  // Initialize
  const config = useRuntimeConfig();
  window.qvctrs.init({
    siteId: config.public.qvctrsSiteId || 'YOUR_SITE_ID',
  });

  // Load SDK
  useHead({
    script: [
      {
        src: 'https://www.qvctrs.com/qvctrs-sdk-v2.js',
        async: true,
      },
    ],
  });
});

Nuxt Plugin Naming

The .client.ts suffix ensures the plugin only runs on the client side, avoiding SSR issues.

Composable (Optional)

Create a composable for accessing qvctrs state:

// src/composables/useQvctrs.ts
export function useQvctrs() {
  const getQualityScore = () => {
    if (typeof window !== 'undefined' && window.__qvctrs_utils) {
      return window.__qvctrs_utils.getQualityScore();
    }
    return null;
  };

  const getSessionId = () => {
    if (typeof window !== 'undefined' && window.__qvctrs_utils) {
      return window.__qvctrs_utils.state.sessionId;
    }
    return null;
  };

  return {
    getQualityScore,
    getSessionId,
  };
}

Verify Installation

Start your dev server (npm run dev)
Open your app in the browser
Open Developer Tools → Console
Run window.qvctrs.version — should show "2.4.0"

Checklist

✓Snippet added via index.html, config, or plugin
✓Site ID replaced with your actual ID
✓Verified in browser console

Vue Router Navigation

The qvctrs SDK automatically tracks client-side navigation with Vue Router. No additional configuration needed — route changes are captured automatically.