HTTPS for Vite

Sometimes, you need your local Vite server to run over HTTPS—maybe you're working with APIs that require secure origins, or testing features like service workers and cookies that behave differently on HTTPS.

Quick video

Setting this up is easy with the vite-plugin-mkcert package. You can install it using your preferred package manager:

bun add -D vite-plugin-mkcert
# or
npm install --save-dev vite-plugin-mkcert
# or
pnpm add -D vite-plugin-mkcert
# or
yarn add -D vite-plugin-mkcert

Next, in your vite.config.ts or vite.config.js file just import mkcert from vite-plugin-mkcert and add mkcert() in the plugins section.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mkcert from "vite-plugin-mkcert"
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(), 
    tailwindcss(), 
    mkcert()
  ],
})

That's it! The mkcert plugin takes care of generating certificates and starts your vite dev server over HTTPS. Your browser will trust the certificate, so you can test secure features without any hassle.

Now start your vite development server and enjoy local HTTPS!