How to enable Brotli when using Nuxt.js

Before providing introductions on how to enable Brotli for your Nuxt.js application, please be aware that it would be better to let either your reverse proxy/server (like NGINX or Apache) or your platform (e.g. Cloudflare) handle Brotli for you. Only if not possible otherwise, you should resort to the instructions.

Also, the instructions below will only cover Nuxt 3. For Nuxt 2 applications, we recommend this blog post describing how to set up Brotli on Nuxt.js 2.

Static Assets

Thanks to Nitro, the server engine of Nuxt 3, static assets can be compressed during build time with the maximum Brotli level. This can be done by enabling the compressPublicAssets option in your nuxt.config.ts or nuxt.config.js:

export default defineNuxtConfig({
  nitro: {
    compressPublicAssets: {
      brotli: true
    }
  }
})

Using this option will allow having best-grade compression without using a CDN. Be aware that it only affects static assets like JavaScript or CSS.

Dynamic Brotli compression

For actual HTML or JSON responses that are dynamically generated by Nuxt, there is no recommended way to implement Brotli in Nuxt itself but an open issue about it.