Vite #

Introduction #

Using the Unlighthouse Vite plugin allows you to close the feedback loop in fixing your Google Lighthouse issues in your development site.

Features #

• Hot Module Reloading will trigger re-scans
• File open hints will be shown in the client
• Automatic resolving of route definitions (requires vite-plugin-pages)

Install #

npm add -D @unlighthouse/vite
# yarn add -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'

export default defineConfig({
  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 defineConfig({
  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 unlighthouse.config.ts file in the root directory.

See Configuring Unlighthouse for more information.

Example #

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