---
title: "Vite Integration · Unlighthouse"
canonical_url: "https://unlighthouse.dev/integrations/vite"
last_updated: "2026-02-27T02:31:30Z"
meta:
  description: "Integrate Lighthouse audits into your Vite development server with automatic route discovery and HMR support."
  "og:description": "Integrate Lighthouse audits into your Vite development server with automatic route discovery and HMR support."
  "og:title": "Vite Integration · Unlighthouse"
---

Star Unlighthouse on GitHubUnlighthouse on GitHub

[**User Guide **](https://unlighthouse.dev/guide/getting-started/installation)

[**Integrations **](https://unlighthouse.dev/integrations/cli)

[**API **](https://unlighthouse.dev/api-doc/config)

**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

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

### Git ignore reports

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

```shell
.unlighthouse
```

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

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

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

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

```ts
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

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

```ts
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.

### **Related **

[**CLI Integration**](https://unlighthouse.dev/integrations/cli) [**Deprecation Notice**](https://unlighthouse.dev/integration-deprecations) [**Configuration**](https://unlighthouse.dev/guide/guides/config)

[**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)