vite-pwa / nuxt

Zero-config PWA Plugin for Nuxt 3
https://vite-pwa-org.netlify.app/frameworks/nuxt
MIT License
440 stars 19 forks source link

Bug: Doesn't work on fresh Nuxt app #51

Open nicodes opened 1 year ago

nicodes commented 1 year ago

Hello, I just created a brand new nuxt app and setup this package but no manifest.json is detected. Specifically I am using "nuxt": "^3.5.2" and "@vite-pwa/nuxt": "^0.1.0". I have setup vite-pwa before with sveltekit so I am somewhat familiar with the process, but I can't figure out why this wont work with nuxt?

Below is my config file:

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["@vite-pwa/nuxt"],
  pwa: {
    // devOptions: { enabled: true },
    manifest: {
      name: "T",
      short_name: "T",
      description: "T",
    },
  },
});
nicodes commented 1 year ago

Found my issue, needed to include <VitePwaManifest /> in app.vue. I think we should add this step to the docs. Full example below:

<template>
  <div>
    <VitePwaManifest />
    <NuxtWelcome />
  </div>
</template>
userquin commented 1 year ago

https://vite-pwa-org.netlify.app/frameworks/nuxt.html#registering-web-manifest

TomSmith27 commented 1 year ago

I think this section could be made for obvious as i also completely missed this

danieldanielecki commented 12 months ago

If it's solved, then @nicodes please close this issue.

baxibaba commented 10 months ago

export default defineNuxtConfig({ runtimeConfig: { public: envData, }, router: { mode: "history", }, buildModules: [ "@nuxtjs/composition-api/module", ["@pinia/nuxt", { disableVuex: false }], "@nuxtjs/tailwindcss", ], modules: [ "@vite-pwa/nuxt", "@element-plus/nuxt", "@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt", ], pwa: { registerType: "autoUpdate", manifest: { name: "D", short_name: "D", theme_color: "#ffffff", icons: [ { src: "pwa-192x192.png", sizes: "192x192", type: "image/png", }, { src: "pwa-512x512.png", sizes: "512x512", type: "image/png", }, { src: "pwa-512x512.png", sizes: "512x512", type: "image/png", purpose: "any maskable", }, ], }, workbox: { globPatterns: ["*/.{js,css,html,png,svg,ico}"], }, client: { installPrompt: true, periodicSyncForUpdates: 20, }, devOptions: { enabled: true, suppressWarnings: true, navigateFallbackAllowlist: [/^\/$/], type: "module", }, }, plugins: [ // { src: '@/plugins/service-worker.ts', mode: 'client' } // '~/plugins/dict', // '~/router.js' // { src: '~/plugins/router.plugin.ts', mode: 'client' }, ], pinia: { autoImports: [ // automatically imports defineStore "defineStore", // import { defineStore } from 'pinia' ["defineStore", "definePiniaStore"], // import { defineStore as definePiniaStore } from 'pinia' ], }, build: { transpile: ["/^element-plus/", "vue-i18n"], extractCSS: { allChunks: true }, }

Production environments do not see pwa downloads,How to configure?