6

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!

Improve this question
1
  • Did you have any success ensuring the nuxt assets serve via http2? Commented Apr 29, 2021 at 15:42

1 Answer 1

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.