Nuxt.JS http/2 help and advice

Question

I'm currently building an application using nuxt.js(With the built in server). That said i've been running google light house through development and for the life of me I can't get it to serve http/2.

Inside the nuxt.config.js I added:

render: {
    http2: {
      push: true,
      pushAssets: (req, res, publicPath, preloadFiles) => preloadFiles
        .filter(f => f.asType === 'script' && f.file === 'runtime.js')
        .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
    }
}

Maybe i'm not understanding how HTTP/2 works with nuxt, if anyone has any help or advice they can offer that would be great!

Answer 1

At the time of writing Nuxt doesn't seem to support serving HTTP/2 directly.

Most probably due to fact that usually HTTP/2 is enabled on edge (load balancer, CDN, etc) which communicates with your Nuxt server using HTTP/1 (more info).

Nevertheless you can set up Nginx proxy server with HTTP/2 enabled for your Nuxt app:

1. install and set up Nginx (beginners guide)

2. generate SSL certificates (HTTP/2 requires HTTPS connection)

3. set up Nginx as reverse https http/2 proxy for your Nuxt app, example configuration:

   server {
       server_name  localhost_http2;
       listen 3001 ssl http2;
   
       ssl_certificate /pathTo/server.crt;
       ssl_certificate_key /pathTo/server.key;
   
   
       location / {
           # url of nuxt app
           proxy_pass http://localhost:3000/;
           proxy_buffering off;
           proxy_http_version 1.1;
       }
   }
   

4. Assuming you have nuxt running on http://localhost:3000/, when visiting https://localhost:3001/ your app will be served with HTTP/2