New package - Nuxt Lighthouse Module

When building applications for the web, there are certain metrics you need to actively think about during the development process. Things such as Speed and Performance are becoming increasingly more important to get right, especially with Google taking these metrics into account when ranking search results.

To aid in analysing these metrics, Google released a tool known as “Lighthouse”. This tool has gone through a few stages, starting as a browser extension, and now natively a part of the Chrome Devtools Audits tab.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

Google Developer Documentation

Essentially this tool will run a specific page through a whole bunch of tests and output scores and appropriate recommendations to improve, broken down into a handful of key categories:

  • Performance - how fast the page loads, and whether the content returned is appropriately compressed and efficient over the network.
  • Accessibility - how accessible your web application is for users of assistive software or users with visual impairments
  • Best Practices - whether your code is written in a general safe and secure way.
  • SEO - how crawlable your application is to search engine bots and content is optimised accordingly.
  • Progressive Web App - whether your app is ready to be used as a fully fledged PWA.

While this tool is extremely helpful, it is often not utilised often enough. It’s incredibly important that metrics are monitored during development, as well as after deploying new changes to production.

Introducing: @samturrell/nuxt-lighthouse-module!

This module provides a simple integration with Google Lighthouse, to automatically perform Lighthouse reports on each successful deploy of your application.

This module can log to three different locations:

  • Directly to the console
  • To a file in the static folder of your app
  • To Slack via a Slack Webhook

The module will run a Lighthouse report after your application has been built, or more specifically when the ready hook is fired.

This module will also store previous reports in a .lighthouse/ directory in your project root, and will use this to compare and return a change value, for how much each metric has changed since the last report.


The module is available on npm, and can be installed with the following command:

yarn add @samturrell/nuxt-lighthouse-module


Simply add the module to your nuxt config:

module.exports = {
    modules: [

And define any applicable options:

module.exports = {
    lighthouse: {
        slackWebhookUrl: '',
        htmlOutput: true,
        consoleNotifier: true,

This module can be disabled completely by setting the LIGHTHOUSE_DISABLED environment variable to true.

For documentation on available module options, check out the package on Github.

Related Posts

New package - Storybook Directories

A simple module for generating your storybook story structure based on your directory structure.

Gitprefix - Automatically formatting commit messages

Git precommit hook for appending branch and emoji prefixes

Automated Pull Request Checks on Github

Using Probot to create automated checks on Github Pull Requests

Netsells 💙 Vue (+ Vue.js London)

Why we at Netsells love the Vue.js framework and where you can find us later this week

Maximising Productivity with Slack

Staying productive with your favourite workplace chat app

Stop with the unhelpful loading spinners

Give some context to your users with some helpful loading text

Responsive Blocks and Vertical Alignment

How to create responsive cross-browser blocks with vertically aligned content

Development Goals for 2018

New Year Promise.resolve()

Progressively Infiltrating Google

Attending the Google Academy for a course on Progressive Web Apps

Laravel Certification Prelude

The Laravel Certification exam is here and I'm taking it.