title

How to Run Lighthouse CI CLI with Nuxt (Step-by-Step Walkthrough)

Install Lighthouse CI CLI
Create & setup .lighthouserc.js config file
Configure your nuxt.config.js file to support static site generation
Build your site
Run lighthouse CLI
View your results

Install Lighthouse CI CLI Globally

npm install -g @lhci/cli

Create and Set Up the Configuration File

Create a .lighthouserc.js file in the root directory of your project with the following configuration:

// .lighthouserc.js
module.exports = {
  ci: {
    assert: {
      preset: 'lighthouse:recommended',
    },
    collect: {
      staticDistDir: './.output/public', // Path to the static files
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

This config tells Lighthouse CI to use the recommended Lighthouse assertions, collect data from the static assets in the ./.output/public folder, and upload the results to temporary public storage.

Configure your nuxt.config.js file to support static site generation

// nuxt.config.ts
export default defineNuxtConfig({
...
  ssr: true,
    nitro: {
      preset: 'static',
    }
});

Generate a static version of your site

Before running Lighthouse, you need to build your project so that the static assets are generated in the ./.output/public folder.

pnpm generate

Run Lighthouse CLI

Once the project is built, you can now run Lighthouse CI using the lhci command:

lhci autorun

lhci autorun will automatically:

Collects data based on your .lighthouserc.js configuration (from the static files or URLs).
Asserts the performance and other metrics using the Lighthouse recommended preset.
Uploads the results to the target you specified (in your case, temporary public storage).

View the results

Lighthouse will generate a .lighthouseci/ folder in your project with a variety of .html and .json files:

Open them in your browser using live server, or "open with Chrome" to have a look, here's one example:

devinschumacher/post.md