Home / Tutorials / Configure NuxtJs to use HTTPS on localhost
Configure NuxtJs to use HTTPS on localhost cover

Configure NuxtJs to use HTTPS on localhost

12 mins

6.4K

3 years ago

0 comments

Skilled

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.
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

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

Related Tutorials

Code Snippets

Collection of Laravel, AlpineJS, VueJS, Tailwind CSS, Flutter snippets and more. New snippets added every day.
View Snippets

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this