Nuxt Integration
Lighthouse auditing during Nuxt development with automatic route discovery and HMR support.
Install
yarn add -D @unlighthouse/nuxt
npm install -D @unlighthouse/nuxt
pnpm add -D @unlighthouse/nuxt
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 module to buildModules.
When you run your Nuxt app, it will give you the URL of client, only once you visit the client will Unlighthouse start.
Nuxt 3
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
modules: [
'@unlighthouse/nuxt',
],
})
Nuxt 2
export default {
buildModules: [
'@unlighthouse/nuxt',
],
}
Type support can be added by adding the @unlighthouse/nuxt module to your plugins. Nuxt v3 will automatically add type support.
{
"compilerOptions": {
"types": [
"@unlighthouse/nuxt"
]
}
}
Configuration
You can either configure Unlighthouse via the unlighthouse key in your Nuxt config, or you can provide a unlighthouse.config.ts file
in the root directory.
Example
export default {
unlighthouse: {
scanner: {
// simulate a desktop device
device: 'desktop',
}
}
}
CI/CD
Run unlighthouse-ci on every deploy. Auto-discovers every URL, runs Lighthouse on all of them in parallel, enforces a single budget. Works in GitHub Actions, GitLab CI, any pipeline.
Vite
Integrate Lighthouse audits into your Vite development server with automatic route discovery and HMR support.