How to use SSL with Vue CLI for local development?

Apr 25, 2021
Learn how to use SSL with Vue CLI for local development.
Usually in local development environment the vue app is served via http protocol. But in 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.


The most common way to scaffold a vue project is via its vue-cli tooling and running following commands
The app runs locally at http://localhost:8080
notion image
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.
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,
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
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.
notion image
Happy solving!


© Bharathvaj Ganesan 2020 - 2023