Nuxt3のlocalhostでhttps #Nuxt

Nuxt3の3.0.0-rc.11でnuxi devとvite上でのIPv6とhttpsがサポートされたので使ってみます。

Changelog：https://v3.nuxtjs.org/community/changelog

新規Nuxt3のセットアップ

npx nuxi init nuxt-app
cd nuxt-app
yarn install

mkcertのセットアップとオレオレ証明書の発行

macの場合

brew install mkcert
mkcert -install

mkcert localhost

Windowsの場合

自環境にないので検証していませんが、
Chocolateyを使ったインストール方法の紹介ですです。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

cinst -y mkcert
mkcert -install

mkcert localhost

うまく作成できていればlocalhost.pemとlocalhost-key.pemが生成されていると思います。

スクリプトの変更

--httpsの指定と、--ssl-certとssl-keyを指定したものを追加します。

package.json

  "scripts": {
    "dev:ssl": "nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
  }

作成したスクリプトで起動

yarn dev:ssl

> Local:    https://localhost:3000/

https://localhost:3000/が確認できれば成功です。