nuxt密码模块

️已弃用️

Nuxt 3 由 Vite 提供支持，如今 Vite 自己拥有一个令人惊叹的 PWA 插件，并且有 Nuxt 支持。

随着更好的解决方案的出现，这就是为什么该模块将不再维护的原因。

考虑使用 Vite PWA for Nuxt 3 和 Vite PWA Assets Generator 来代替。

作为主要维护者（@kevinmarrec），我要感谢所有信任这个项目的贡献者和用户。

Nuxt 3 PWA

Nuxt 3 的零配置 PWA 解决方案

官方模块状态

该模块是非官方的，但旨在成为官方 Nuxt PWA 模块的下一个迭代。

设置

将@kevinmarrec/nuxt-pwa依赖项添加到您的项目中：

 # Using Yarn
yarn add -D @kevinmarrec/nuxt-pwa
# Using NPM
npm install -D @kevinmarrec/nuxt-pwa
# Using PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

编辑nuxt.config.ts文件以添加 PWA 模块：

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ]
} ) 

配置

由于此模块尝试与 Nuxt 2 PWA 兼容以方便迁移，因此您仍然可以使用 https://pwa.nuxtjs.org 文档来获取大多数功能。

如果您希望您的应用程序可在开发中安装，则需要在nuxt.config中将pwa.workbox.enabled选项设置为true ，因为默认情况下它仅在生产中启用：

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      enabled : true
    }
  }
} )

如果您需要自定义 Workbox Service Worker，您可以使用pwa.workbox.templatePath选项指定 Workbox 的路径，您可以使用~和@等路径别名。

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      templatePath : '~/path/to/your/worker.js'
    }
  }
} )

要自定义它，您可以在此处查看此模块的默认设置，以及 Nuxt 2 默认设置和 Workbox 文档。

可组合项

usePWAIcon（大小、选项）

您可以使用usePWAIcon获取 PWA 的图标 url，并在您的应用程序中使用它。

 const icon = usePWAIcon ( 512 ) // /assets/icons/512x512.png
const icon = usePWAIcon ( 512 , { maskable : true } ) // /assets/icons/512x512.maskable.png

或者，您可以使用 Typescript 使用string而不是number大小参数来利用可用大小：

发展

确保安装依赖项：

pnpm install

在 http://localhost:3000 上启动开发服务器：

pnpm dev

例子

在 http://localhost:3000 上构建并启动示例：

pnpm example:build
pnpm example:start

执照

用❤️制作

根据麻省理工学院许可发布。