5

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.

enter image description here

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!

Lulceltech
  • 1,662
  • 11
  • 22

1 Answers1

2

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

Pavel Gurecki
  • 1,091
  • 9
  • 14