@vite-pwa/nuxt

适用于 Nuxt 的零配置 PWA 插件

21.79 万次下载•540 颗星•v1.0.5

userquin•

antfu

@vite-pwa/nuxt - Zero-config PWA for Nuxt 3
适用于 Nuxt 3 的零配置 PWA 插件

🚀 功能

📖 文档和指南
👌 零配置：针对常见用例提供合理的内置默认配置
🔩 可扩展：充分暴露自定义插件行为的能力
🦾 强类型：使用 TypeScript 编写
🔌 离线支持：生成支持离线的 Service Worker（通过 Workbox）
⚡ 完全可摇树：自动注入 Web 应用清单
💬 新内容提示：内置支持 Vanilla JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
⚙️ 先旧后新 (Stale-while-revalidate)：当有新内容可用时自动重新加载
✨ 静态资产处理：配置静态资产以实现离线支持
🐞 开发支持：在开发应用程序时调试自定义 Service Worker 逻辑
🛠️ 多功能：与元框架集成：î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 和以下链接以获取更多详情。