vite-pwa-nuxt
@vite-pwa/nuxt

適用於 Nuxt 的零配置 PWA 外掛

@vite-pwa/nuxt - Zero-config PWA for Nuxt 3
適用於 Nuxt 3 的零配置 PWA 外掛

NPM version NPM Downloads Docs & Guides
GitHub stars


🚀 功能

  • 📖 文件和指南
  • 👌 零配置:針對常見用例提供合理的內建預設配置
  • 🔩 可擴充套件:充分暴露自定義外掛行為的能力
  • 🦾 強型別:使用 TypeScript 編寫
  • 🔌 離線支援:生成支援離線的 Service Worker(透過 Workbox)
  • 完全可搖樹:自動注入 Web 應用清單
  • 💬 新內容提示:內建支援 Vanilla JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
  • ⚙️ 先舊後新 (Stale-while-revalidate):當有新內容可用時自動重新載入
  • 靜態資產處理:配置靜態資產以實現離線支援
  • 🐞 開發支援:在開發應用程式時除錯自定義 Service Worker 邏輯
  • 🛠️ 多功能:與元框架整合:îlesSvelteKitVitePressAstroNuxt 3Remix
  • 💥 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 Open in StackBlitz

👀 完整配置

請檢視型別宣告 src/types.ts 和以下連結以獲取更多詳情。

📄 許可證

MIT 許可證 © 2023-PRESENT Anthony Fu