alexandrecanijo / nuxt2-lighthouse-boilerplate

Nuxt2 Lighthouse Boilerplate

Nuxt2 with 100 Lighthouse score

What

A starting point and reusable Nuxt2 application, based on the one generated by Nuxt-CLI with all settings already setup up, with performance in mind, to achieve a 100% Lighthouse score.

---

Why

Generating a fresh setup of a Nuxt2 application is always a tedious process and by default, it won't achieve a good Lighthouse score. This project aims to speed up the process of starting up an application and trying to get a perfect Lighthouse score, with all the main features a medium/large application should have.

---

How

By setting up some Nuxt configs, removing all the clutter and still having a viable boilerplate. The goal is to have with every update a perfect 100 Lighthouse score.

---

Table of contents

• Requirements
• Installation
• Commands
• Features
• Roadmap
• Google Lighthouse score
• Licenses
• Inspiration
• Want to contribute?

---

Requirements

The only tools you will need installed on your machine are:

• Node.js - Download and Install Node.js
• a package manager (Yarn or NPM) - Download and Install Yarn (NPM already comes bundle with Node.js)

---

Installation

Clone repository and run project locally:

$ git clone https://github.com/alexandrecanijo/nuxt2-lighthouse-boilerplate.git # Clone project using HTTPS
$ cd nuxt2-lighthouse-boilerplate # Change directory
$ npm install # Install required dependencies

---

Commands

Launch development server at localhost:3000

$ npm run dev

Build for production

$ npm run build

Start the production server (after running the build command)

$ npm run start

Generate a static project

$ npm run generate

---

Features

• Disabled core Nuxt features, that should only be enabled when needed
• Enabled HTTP2 (if possible) and added a bunch of webpack optimizations to speed up first page impression
• All code resides on src/ directory

---

Roadmap

• Add Lighthouse-CI under Github Actions
• Add Cypress integration and example e2e tests
• Improve documentation
• Add common features, i18n, light/dark theme, accessibility analysis, etc.

---

Google Lighthouse score

• Performance - 100
• Accessibility - 100
• Best practices - 100
• SEO - 100

---

Licenses

This project is licensed under the MIT License - see the LICENSE file for details

---

Inspiration

Several articles and repositories inspired me to create this one, but the main goal was to have a starting point, for all my Nuxt apps. Here are some links that this project is based on:

• https://github.com/larsdouweschuitema-nuxt/nuxt-boilerplate
• https://dev.to/jacobandrewsky/performance-checklist-for-vue-and-nuxt-cog
• https://github.com/harlan-zw/nuxt-webpack-optimisations

---

Want to Contribute?

Please check out CONTRIBUTING.md.