Vue SSL certificate: how to enable it

Having an SSL enabled is a must in some situations. If the HTTPS is not enabled for your app that is running on the localhost, this might cause a problem sometimes (for example, Facebook login persists you to have SSL enabled). Fortunately, the problem is solvable. If for the live website a valid SSL certificate is needed, for the localhost self-signed one will do the work. So, let‘s see how can we add the Vue SSL certificate.

Two ways how you can enable Vue SSL

The solution is pretty straightforward, in order to enforce HTTPS you need to use one parameter. Here are different ways you can do this:

• Inside the directory of your project, where the package.json file is, create a file called vue.config.js. Add the code that you see below to the js file.

module.exports = {
   devServer: {     
       https: true   
   } 
} 

And the another approach.

• Open the package.json file and add the –https parameter to the serve command.

The only problem with both mentioned methods is that you will get an alert that the connection is not secure.

And if you opened the console in the browser, you would see that it is because of the invalid authority of a certificate. As the certificate is self-signed and not signed by the authority, you are getting this warning.

And that’s not a big deal as you are only using this for the purposes of development (otherwise you wouldn’t be running this on localhost). Unless… you are using Mozilla Firefox. If you get an error, keep on reading.

How to fix the SEC_ERROR_INADEQUATE_KEY_USAGE error

Some of the browsers are taken extra security precautions. As the Vue SSL certificate is self-signed, Firefox denies accessing your localhost/ There are simple solutions for this, but be careful and don’t forget to restore the configuration back when you will be using the browser for other than development purposes.

Here is how you can do this: with your browser go to the about:config, find the security.enterprise_roots.enabled, and set it to false. After this, restart the browser and try accessing localhost.

Here it is, now you have a Vue SSL enabled.