How to use https with Vue CLI for local development

Usually, in local development environment the Vue app is served via http protocol. But in the production environment, it is served via https. Running the local server in https might be needed if you consume API that is forced to be consumed only by the app served via HTTPS.

In this guide, we will be setting up HTTPS in our development environment for our Vue app with our own SSL certificate.

Vue CLI

The most common way to scaffold a Vue project is via its vue-cli tooling and running the following commands

npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run serve

The app runs locally at http://localhost:8080

Now we want the app to be served via https. We can do this easily by setting up our own SSL certificate in development for localhost using mkcert

Step 1: Creating an SSL Certificate

To create a valid SSL certificate easily we make use of mkcert tool. Run the following commands to obtain a certificate.

brew install mkcert

mkcert -install

Now we have successfully created Certificate Authority (CA) on our machine which enables us to generate certificates for all of our future projects.

From the root of our hello-world project, run the following commands,

mkdir -p .certs

mkcert -key-file ./.certs/key.pem -cert-file ./.certs/cert.pem "localhost"

Now we have a .certs folder with key and cert files inside it.

Please, make sure to add this folder to .gitignore so that we don’t accidently commit these files to version control.

Step 2: Adding HTTP to vue config file

Vue CLI allows us to configure it via config file as follows

const fs = require('fs');

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: {
      key: fs.readFileSync('.certs/key.pem'),
      cert: fs.readFileSync('.certs/cert.pem'),
    },
    hotOnly: false,
  },
};

Here we are pointing to CLI where our certificate file is by simply passing an object with a key and cert to devServer’s https config.

We are almost at the end of the process. Let’s restart the server again. Voila, now our app is served via https.

Happy solving!