Running your Vue.js dev server with HTTPS is required when working with secure cookies, OAuth flows or testing service workers that need secure contexts. Vue CLI makes it easy to enable HTTPS locally with built-in options or custom certificates.
This guide will show you how to run your Vue dev server with HTTPS, generate certificates and avoid common pitfalls.
Using vue-cli-service with HTTPS
If you're using Vue CLI 3 or newer, you can launch your dev server with HTTPS support using the --https flag.
Basic Command (with Auto-generated Certs)
This method enables HTTPS with automatically generated, self-signed certificates:
vue-cli-service serve --https
This is suitable for quick tests but may lead to browser warnings about untrusted certificates.
Using Custom SSL Certificates
For better trust and fewer browser warnings, use your own .pem and .key certificate files.
Command with Custom Certs
vue-cli-service serve --https --cert ./cert.pem --key ./key.pem
Make sure you place your cert.pem and key.pem files in your project root or specify the correct paths.
Configure HTTPS in vue.config.js
You can also permanently enable HTTPS by adding settings to your vue.config.js file.
Example Configuration
// vue.config.jsconst fs = require('fs');
module.exports = {
devServer: {
https: {
key: fs.readFileSync('./key.pem'),
cert: fs.readFileSync('./cert.pem'),
},
port: 8080, // Optional
},
};
Now, just run:
npm run serve
And your app will be served via HTTPS automatically.
How to Generate SSL Certificates (OpenSSL Example)
You can generate a basic self-signed certificate with OpenSSL:
openssl req -x509 -newkey rsa:2048 -nodes \ -keyout key.pem -out cert.pem -days 365
This command generates key.pem and cert.pem in your current directory. You might need to mark them as trusted in your local environment to prevent browser warnings.
Also Read: Best Vue.js Framework Of All Time
Common Issues & Tips
- Browser Warnings: Self-signed certificates are not trusted by default. You can mark them as trusted or use mkcert for local development.
- CORS / Mixed Content: Make sure all your backend services and API endpoints also use HTTPS to avoid mixed-content errors.
- Invalid Key/Cert Path: Double-check your file paths in your vue.config.js and CLI commands.
Key Takeaways
To serve your Vue.js app over HTTPS, use vue-cli-service serve --https for quick setup or configure your own SSL certificates via vue.config.js for more control. This is a secure and modern development practice and compatible with HTTPS only features.
Related Resources
