Nuxt3で使えるPWA対応プラグインを探す旅 〜2024年夏〜

Nuxt3で使えるPWA対応プラグインを探す旅をしたので、旅程を記録します。

現在地

nuxt@3.10.3

結論

試したプラグイン

nuxt/pwa ← 結論から言うとダメだった（Nuxt3に対応してない）
vite-pwa-nuxt ← 使える。だけど英語で書かれた最初のステップを見落としがちかと。← これが記事化の理由です。

@nuxt/pwa について

ググると最初に出てくるのですが、Nuxt2までの対応でした。
公式サイトからNuxt.jsへのリンクも、Nuxt2リファレンス行きになっていました。

@vite-pwa/nuxt

Nuxt3公式にも掲載があり、対応してくれているようです。

それではこちらをビルドできるまでの旅（やったこと）を記録します。

インストール

まずはドキュメントに則ってインストールします。

npm i @vite-pwa/nuxt

モジュールに追加

次にnuxt.config.tsに追加します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
    /* PWA options */
  }
})

ここでエラー

このタイミングで、 npm run devなどで開発サーバが動いていると、ビルドエラーが出ます。こんなやつ。

Cannot restart nuxt:  Cannot destructure property 'nuxt' of 'this' as it is undefined. 

ふう。さてガイドを読み直そう。

ガイドの「Examples」に何やら書いてある

You need to stop the dev server once started and then to see the PWA in action run:
nr dev:preview:build: Nuxt build command + start server
nr dev:preview:generate: Nuxt generate command + start server

そ、そうなのか。
いったんdevサーバを止めて、build と generateをする必要があるそうなのでその通りにします。

無事導入の旅終了

ありがとうございました。うまくいきました。