Posts Learn Components Snippets Categories Tags Tools About
/

Configure NuxtJs to use HTTPS on localhost

Learn how to make localhost secure (HTTPS) by leveraging the use of a self-generated certificate

3 years ago

12 mins read

8099 views

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.
mkcert example

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
Otherwise, for windows and Linux users, the procedure is almost the same and you can refer to it from the GitHub readme.

Step 2Generate certificate


Once you have installed mkcert, we'll have to generate the certificate now by running the command below.
mkcert -key-file key.pem -cert-file cert.pem localhost
The command above will generate key and cert for localhost.

Step 3: Nuxt Config


The next step is to add some configuration for nuxt.config.js and the config would be under the "server" property.
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
The other default configs should be there too but for the sake of the example, I have omitted them.

Step 4: Package.json

"scripts": {
  "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0",
}
Lastly, update the package json "dev" command to export the environment and make use of it when running the application. Now run "npm run dev" or "yarn dev" and you will be able to see the console outputting https://localhost:3000.

Do note that you can update the host and port too if preferable. Now open the link in your browser and you should be able to see that the localhost is now served securely.

Alternative Tags

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Configure NuxtJs to use HTTPS on localhost

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Sponsors 👑

+ Add Yours
new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components
)