@vite-pwa/nuxt

适用于 Nuxt 的零配置 PWA 插件

22.73 万次下载•550 颗星•v1.0.7

userquin•

antfu

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

🚀 功能

📖 文档与指南
👌 零配置：针对常见用例提供合理的内置默认配置
🔩 可扩展：充分暴露自定义插件行为的能力
🦾 类型安全：使用 TypeScript 编写
🔌 离线支持：生成支持离线的 Service Worker（通过 Workbox）
⚡ 完全可摇树优化：自动注入 Web 应用清单
💬 新内容提示：内置支持原生 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 和以下链接以获取更多详细信息。