Vue and Nuxt

​

Vue with Vite

<head>
  <meta charset="utf-8" />
  <script
    src="https://cdn.pagent.ai/js/sdk.js"
    data-client-key="YOUR_CLIENT_KEY">
  </script>
</head>

• No hydration wait. A client-rendered Vue app has no server HTML to hydrate, so leave out data-await-hydration.
• Routing: Vue Router’s createWebHistory is tracked automatically. With createWebHashHistory, send a navigate command after each route change:
  import { START_LOCATION } from "vue-router";
  
  router.afterEach((to, from) => {
    if (from === START_LOCATION) return; // pagent counts the first page itself
  
    window._pgnt = window._pgnt || [];
    window._pgnt.push({ kind: "navigate" });
  });
  

​

Nuxt

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.pagent.ai/js/sdk.js",
          "data-client-key": "YOUR_CLIENT_KEY",
          "data-await-hydration": "true",
          tagPosition: "head",
        },
      ],
    },
  },
});

• Keep it synchronous: don’t add async, defer or type: "module".
• Nuxt 3 and 4: pagent recognizes their hydration. On Nuxt 2, pagent can’t detect hydration, so leave out data-await-hydration there.
• Navigation with <NuxtLink> and navigateTo is tracked automatically.

​

Check it worked

1. Deploy, then open your site in a private browser window.
2. Back in pagent, click Check connection in the install step.
3. Open a test’s preview link and check that the variant shows and stays after the page has finished loading.