Integrations
Vite Integration
Last updated by
Harlan Wilton
in chore: deprecate integrations. Deprecated: This integration will be removed in v1.0. We recommend using the CLI or CI integrations instead. Learn more →
Introduction
The Vite integration enables Lighthouse auditing within your Vite development environment, providing real-time performance feedback as you build.
Install
yarn add -D @unlighthouse/vite
npm install -D @unlighthouse/vite
pnpm add -D @unlighthouse/vite
Git ignore reports
Unlighthouse will save your reports in outputDir
(.unlighthouse
by default),
it's recommended you .gitignore these files.
.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.
import Unlighthouse from '@unlighthouse/vite'
import { defineUnlighthouseConfig } from 'unlighthouse/config'
export default defineUnlighthouseConfig({
plugins: [
Unlighthouse({
// config
})
]
})
Providing Route Definitions
If you're using the 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'
export default defineUnlighthouseConfig({
plugins: [
Pages({
// ...
onRoutesGenerated(routes) {
// tell Unlighthouse about the routes
const unlighthouse = useUnlighthouse()
if (unlighthouse?.hooks)
hooks.callHook('route-definitions-provided', routes)
}
}),
]
})
Configuration
You can either configure Unlighthouse via the plugin, or you can provide a config file file in the root directory.
Example
export default defineUnlighthouseConfig({
plugins: [
Unlighthouse({
scanner: {
// simulate a desktop device
device: 'desktop',
}
})
]
})
Did this page help you?