> ## Documentation Index
> Fetch the complete documentation index at: https://www.pagent.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue and Nuxt

> Add pagent to a Vue app built with Vite, or to a Nuxt site.

## Vue with Vite

Add the tag to the `<head>` of your `index.html`, before your app's script:

```html index.html theme={"dark"}
<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:

  ```js theme={"dark"}
  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

Add the script globally in `nuxt.config.ts`, with `data-await-hydration` set to the string `"true"`:

```ts nuxt.config.ts theme={"dark"}
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.

See [Frameworks](https://www.pagent.ai/docs/install/frameworks.md) for the shared rules and the Content Security Policy.

## 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.