Configure NuxtJs to use HTTPS on localhost

In this post, you'll learn how to configure NuxtJs to use HTTPS on localhost development. The steps are quite straight forward but don't miss any of it to ensure that it's set up properly.

Step 1: Install mkcert

We'll be using mkcert which is a "simple tool for making locally-trusted development certificates" and what's nice about it is that it requires zero configuration. If you are using macOS and have Homebrew installed, do run the command below.

brew install mkcert
brew install nss # if you use Firefox
mkcert -install

mkcert -key-file key.pem -cert-file cert.pem localhost

import path from 'path'
import fs from 'fs'

const config = {}

if (process.env.NODE_ENV === "development") {
  config.server = {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'cert.pem'))
    }
  }
}

export default config

"scripts": {
  "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0",
}