# Install with the Vite plugin

> Install @scriptmonitoring/vite and register scriptMonitoring() in vite.config.ts. Every production build gets the tag first in the head.

Source: https://docs.scriptmonitoring.com/install/vite/ · Plan: All plans · Updated 2026-10-13

On a Vite project you install Script Monitoring as a build plugin: add `@scriptmonitoring/vite` and register `scriptMonitoring()` in `vite.config.ts`. Every production build then carries the tag at the very start of the `<head>`, so the install is enforced by your build rather than remembered by whoever edits `index.html`.

![Install with Vite: add the tag to index.html so it is the first script in the head.](https://docs.scriptmonitoring.com/screenshots/setup-install-vite-light.webp)

## How do I install the plugin?

1. In the dashboard, open **Developers > Setup**, go to step 3, **Install**, and pick **Vite**.
2. Install the package (**1. Install package**):

   ```shell
   npm i @scriptmonitoring/vite
   ```

   With yarn, `yarn add @scriptmonitoring/vite`. With pnpm, `pnpm i @scriptmonitoring/vite`.

3. Register the plugin (**2. Register the plugin**). This is the dashboard's snippet with your script URL filled in:

   ```ts
   // vite.config.ts
   import { scriptMonitoring } from '@scriptmonitoring/vite';
   import { defineConfig } from 'vite';

   export default defineConfig({
     plugins: [
       scriptMonitoring({ scriptUrl: 'https://<teamID>.cdn.scriptmt.com/sm.js' }), // <- Here
       // ...other plugins
     ],
   });
   ```

4. Build and deploy, then check [Verify it's working](https://docs.scriptmonitoring.com/verify/).

## Which options does scriptMonitoring() take?

| Option | What it does |
| --- | --- |
| `teamId` | Your team ID. Loads `https://<teamID>.cdn.scriptmt.com/sm.js`. The recommended option. |
| `scriptUrl` | Your full script URL, as in the dashboard snippet. Deprecated: it still works, with a build warning. |
| `enabled` | Turns the plugin on or off. Defaults to off in the dev server and on in builds. |

The same configuration with `teamId`:

```ts
// vite.config.ts

export default defineConfig({
  plugins: [scriptMonitoring({ teamId: '<teamID>' })],
});
```

## Why don't I see the tag in development?

The plugin skips the dev server unless you pass `enabled: true`, and logs "[Script Monitoring] Plugin is disabled (because you are in development mode)". Check the built `dist/index.html` instead: the first element in `<head>` is the Script Monitoring tag.

## Frequently asked questions

### Why is the tag missing when I run the dev server?

The plugin is off in the Vite dev server by default and logs a warning saying so. It runs in production builds. Pass `enabled: true` to turn it on in development too.

### Should I use scriptUrl or teamId?

The dashboard snippet passes `scriptUrl`. The package now marks `scriptUrl` as deprecated in favor of `teamId`, and prints a warning at build time when you use it. `scriptMonitoring({ teamId: '<teamID>' })` loads the same script without the warning.

### Where does the plugin put the tag?

At the very start of the `<head>` (`head-prepend`), with `referrerpolicy="origin"`, in every HTML file Vite builds.

## Related

- [Install the script tag](https://docs.scriptmonitoring.com/install/)
- [CLI](https://docs.scriptmonitoring.com/install/cli/)
- [Verify it's working](https://docs.scriptmonitoring.com/verify/)