---
title: "Vite Integration · Unlighthouse"
meta:
  "og:description": "Integrate Lighthouse audits into your Vite development server with automatic route discovery and HMR support."
  "og:title": "Vite Integration · Unlighthouse"
  description: "Integrate Lighthouse audits into your Vite development server with automatic route discovery and HMR support."
---

**Integrations**

# **Vite Integration**

[Copy for LLMs](https://unlighthouse.dev/integrations/vite.md)

**Deprecated**: This integration will be removed in v1.0. Use [**CLI**](https://unlighthouse.dev/integrations/cli) or [**CI**](https://unlighthouse.dev/integrations/ci) instead. See [**deprecation notice**](https://unlighthouse.dev/integration-deprecations).

Lighthouse auditing within your Vite dev environment with real-time performance feedback.

## [Install](#install)

```
yarn add -D @unlighthouse/vite
```

```
npm install -D @unlighthouse/vite
```

```
pnpm add -D @unlighthouse/vite
```

### [Git ignore reports](#git-ignore-reports)

Unlighthouse will save your reports in `outputDir` (`.unlighthouse` by default), it's recommended you .gitignore these files.

```
.unlighthouse
```

## [Usage](#usage)

To begin using Unlighthouse, you'll need to add the plugin to `plugins`.

When you run your Vite app, it will give you the URL of client, only once you visit the client will Unlighthouse start.

```
import Unlighthouse from '@unlighthouse/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Unlighthouse({
      // config
    })
  ]
})
```

### [Providing Route Definitions](#providing-route-definitions)

If you're using the [**vite-plugin-pages**](https://github.com/hannoeru/vite-plugin-pages) plugin, you can provide route definitions to Unlighthouse.

You will need to hook into the plugin using the following code.

```
import { useUnlighthouse } from 'unlighthouse'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Pages({
      // ...
      onRoutesGenerated(routes) {
        // tell Unlighthouse about the routes
        const unlighthouse = useUnlighthouse()
        if (unlighthouse?.hooks)
          unlighthouse.hooks.callHook('route-definitions-provided', routes)
      }
    }),
  ]
})
```

## [Configuration](#configuration)

You can either configure Unlighthouse via the plugin, or you can provide a [**config file**](https://unlighthouse.dev/guide/guides/config) file in the root directory.

### [Example](#example)

```
import Unlighthouse from '@unlighthouse/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Unlighthouse({
      scanner: {
        // simulate a desktop device
        device: 'desktop',
      }
    })
  ]
})
```

[Edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/2.integrations/4.vite.md)

[Markdown For LLMs](https://unlighthouse.dev/integrations/vite.md)

**Did this page help you? **

Anything that could be done better? :)

Help us improve this page. You can [edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/2.integrations/4.vite.md) on GitHub or provide anonymous feedback below.

[**Nuxt** Integrate Lighthouse audits directly into your Nuxt development workflow with automatic route discovery.](https://unlighthouse.dev/integrations/nuxt) [**Webpack** Add Lighthouse auditing to webpack-based projects with development server integration and HMR support.](https://unlighthouse.dev/integrations/webpack)

**On this page **

- [Install](#install)
- [Usage](#usage)
- [Configuration](#configuration)