Unlighthouse

Nuxt.js

Introduction

Using the Unlighthouse Nuxt.js module 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

Install

Public Early Access 🎉

Unlighthouse is currently in public early access, made possible by my sponsors 💖. Please consider becoming a sponsor or following me @harlan_zw 🐦if you like this project.

Sponsor 
npm add -D @unlighthouse/nuxt
# yarn add -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.

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

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  modules: [
    '@unlighthouse/nuxt',
  ],
})

Nuxt 2

nuxt.config.js
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.

tsconfig.json
{
  "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.

See Configuring Unlighthouse for more information.

Example

nuxt.config.js
export default {
  unlighthouse: {
    scanner: {
      // simulate a desktop device
      device: 'desktop',
    }
  }
}