@vite-pwa/nuxt

Nuxt向けのゼロコンフィグPWAプラグイン

217.9Kダウンロード•540スター•v1.0.5

userquin•

antfu

@vite-pwa/nuxt - Zero-config PWA for Nuxt 3
Nuxt 3向けのゼロコンフィグPWAプラグイン

🚀 特徴

📖 ドキュメントとガイド
👌 ゼロコンフィグ: 一般的なユースケースに対応した、適切に設定された組み込みのデフォルト設定
🔩 拡張可能: プラグインの動作をカスタマイズする完全な機能を提供
🦾 型安全: TypeScriptで記述
🔌 オフラインサポート: オフラインサポート付きサービスワーカーを生成（Workbox経由）
⚡ 完全なツリーシェイキング: Webアプリマニフェストを自動注入
💬 新しいコンテンツのプロンプト: Vanilla JavaScript、Vue 3、React、Svelte、SolidJS、Preactの組み込みサポート
⚙️ Stale-while-revalidate: 新しいコンテンツが利用可能になった際に自動リロード
✨ 静的アセット処理: オフラインサポートのための静的アセットを設定
🐞 開発サポート: アプリケーション開発中にカスタムサービスワーカーロジックをデバッグ
🛠️ 多用途: メタフレームワークとの統合: îles、SvelteKit、VitePress、Astro、Nuxt 3、Remix
💥 PWAアセットジェネレーター: 単一のコマンドと単一のソース画像からすべてのPWAアセットを生成
🚀 PWAアセット統合: アプリケーション内でPWAアセットをリアルタイムで提供、生成、注入

📦 インストール

v0.4.0以降、@vite-pwa/nuxtにはVite 5とNuxt 3.9.0以降が必要です。

以前のバージョンでは、@vite-pwa/nuxtにはVite 3.2.0以降とNuxt 3.0.0以降が必要です。

npx nuxi@latest module add @vite-pwa/nuxt

🦄 使用法

@vite-pwa/nuxtモジュールをnuxt.config.tsに追加して設定します

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

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

このプラグインの設定方法と使用方法に関する完全なガイドについては、📖 ドキュメントを参照してください。

⚡️ 例

開発サーバーを起動したら停止し、PWAの動作を確認するには、次を実行します。

nr dev:preview:build: Nuxtビルドコマンド + サーバー起動
nr dev:preview:generate: Nuxt生成コマンド + サーバー起動

例	ソース	プレイグラウンド
`PWAの自動更新`	GitHub

👀 完全な設定

詳細については、型宣言src/types.tsと以下のリンクを参照してください。