Vue SSL certificate tutorial

Vue SSL certificate: how to enable it

Having a SSL enabled is a must in some situations. If the HTTPS is not enabled for your app that is running on 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

Solution is pretty straightforward, in order to enforce HTTPS you need to use one paramater. 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.
Add --https to the serve in package.json

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

Vue.js SSL certificate is invalid

And if you opened 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.

Vue SSL certificate is self-signed

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 is a simple solutions for this, but be careful and don’t forget to restore the configuration back when you will be using 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.

Leave a Comment

Your email address will not be published. Required fields are marked *