# Install on Vercel
Source: https://www.luriart.com/docs/install/vercel
Plain text: https://www.luriart.com/docs/install/vercel.txt

Add the Luria tag to a site hosted on Vercel (Next.js, SvelteKit, Nuxt, Astro, Remix or plain HTML), then optionally connect Vercel so Luria can check your deploys and mark them on your charts.

Time needed: about 10 minutes.

## What you'll need
* Your Luria tag, with your site ID already in it. Onboarding shows it on the "Paste the Luria tag" step; your dashboard shows it any time on the Connections page.
* Access to the code of the site (the Git repository Vercel deploys from).
* Optional: owner or member access to the Vercel team, if you want to connect Vercel.

Vercel cannot add a script to a deployed site by itself: the tag goes into your code, and Vercel deploys it like any other change. One commit, one deploy, done.

### Step 1: Pick your framework
On the Connections page open **Vercel** and pick your framework. Luria usually picks it for you from your live site. The block below the picker is the exact code for that framework, with your site ID filled in.

[Screenshot: Luria Connections page with the Vercel card open, the framework picker and the copy block]

### Step 2: Add the tag
Put the tag where your framework keeps `<head>` content. Replace `YOUR_SITE_ID` with your own if you copy from here.

**Next.js, App Router** (`app/layout.tsx`): inside `<html>`, add a `<head>` if there is none, and put this first in it:

```tsx
<script async src="https://luriart.com/snippet.js" data-luria-site="YOUR_SITE_ID" />
```

**Next.js, Pages Router** (`pages/_document.tsx`): the same line inside `` from `next/document`. No `_document` yet? Create one with the default Document and this line inside ``.

**SvelteKit** (`src/app.html`): inside `<head>`, before `%sveltekit.head%`:

```html
<script async src="https://luriart.com/snippet.js" data-luria-site="YOUR_SITE_ID"></script>
```

**Nuxt** (`nuxt.config.ts`), inside `defineNuxtConfig`:

```ts
app: {
  head: {
script: [{ src: "https://luriart.com/snippet.js", async: true, "data-luria-site": "YOUR_SITE_ID" }],
  },
},
```

**Astro** (your base layout in `src/layouts/`): inside `<head>`; `is:inline` stops Astro from bundling it:

```html
<script is:inline async src="https://luriart.com/snippet.js" data-luria-site="YOUR_SITE_ID"></script>
```

**Remix / React Router** (`app/root.tsx`): inside `<head>`, before ``, the same line as Next.js.

**Plain HTML or Vite** (`index.html`, and every other HTML page): inside `<head>`, the SvelteKit line.

**Warning:**
  Luria reads your site ID (and your thank-you pages, if the block shows `data-luria-convert`) off the tag itself. Keep every attribute exactly as copied.

### Step 3: Commit and let Vercel deploy
Commit the change to the branch Vercel deploys to production. When the deploy is live, press **Verify** on the Vercel card. Luria loads your live site and checks the tag is there.

Using a Content Security Policy? Allow `https://luriart.com` in `script-src` and `connect-src`, or the browser blocks the tag and your site simply runs without Luria.

### Step 4 (optional): Connect Vercel
Press **Connect Vercel** on the card, choose the team and the project that serves this site, and approve. Luria then:

* checks your latest production deploy is live whenever you press **Verify**, and about every 15 minutes after that;
* tells you if a deploy removed the tag (for example a new layout that forgot it), with the fix;
* marks every production deploy on your charts, so a sudden change in results can be matched to the deploy that caused it;
* removes itself cleanly when you disconnect: it deletes only the settings it created on your project and its own Vercel installation.

Luria never changes your code, your domains or your other settings. You can also remove Luria any time from Vercel under **Settings → Integrations**; Luria notices and marks the connection as disconnected.

## Edge serving
For Next.js sites connected to Vercel, Luria can also run at Vercel's edge: the page arrives with the visitor's version already chosen, so there is no extra request before the change shows. It is on by default and used only when your project qualifies (no Attack Challenge Mode, no firewall rules that judge visitors by IP or country, bot protection off), because the edge fetches your page once more on each view. That can double the page invocations Vercel counts. The Vercel card says whether your project qualifies and why.

Luria first asks two questions on the Vercel card: your Next.js version, and whether your project already has a `middleware.ts` or `proxy.ts`. When edge serving is on, Luria saves these settings on your project: `LURIA_SITE`, `LURIA_EDGE_KEY`, `LURIA_MW_TOKEN`, `LURIA_HEAD_UNSAFE` and, if you track thank-you pages, `LURIA_CONVERT`. It then shows two files: `luria-edge.ts`, and your `middleware.ts` (Next.js 15 and earlier) or `proxy.ts` (Next.js 16). If you already have that file, you change one line in it so Luria wraps your middleware; if not, you create it. Your middleware keeps running exactly as before on every request. Keep the plain tag from Step 2 as well: it steps aside when the edge tag runs, and takes over if it ever does not.

## If something goes wrong
* **Verify says the tag is missing**: open your live site, view the page source and search for `luriart.com/snippet.js`. Not there? The deploy with the tag is not live yet, or the tag went into a layout that this page does not use.
* **"Start the Vercel connection from Luria"**: installs started from the Vercel Marketplace listing cannot be matched to your Luria site. Press **Connect Vercel** inside Luria instead.
* **Your site looks wrong**: remove the tag, commit, deploy. Luria stops at once; nothing else on your site depends on it.