@vite-pwa/create-pwa/dist/chunks/nuxt.mjs

PWA Templates

import t from"node:fs";import e from"node:path";import x from"node:process";import{b as y,c as k,g as j,p as w,M as S}from"../shared/create-pwa.DNW-qV5p.mjs";import{a as b,i as h,P as $,N as P,V as W,W as d,T as F,b as C}from"../index.mjs";import{d as A}from"../shared/create-pwa.Dr0vPKPn.mjs";import"fs";import"node:url";import"child_process";import"path";import"readline";import"events";async function N(o,n){const{cdProjectName:a,templateDir:r,rootPath:i,customServiceWorker:f,prompt:l,pwaAssets:p}=o,[s,c]=I(i,r,n);if(t.rmSync(e.join(s,"app.vue"),{recursive:!0}),t.rmSync(e.join(i,"nuxt.config.ts"),{recursive:!0}),t.rmSync(e.join(i,"public"),{recursive:!0}),t.copyFileSync(e.join(c,"app.vue"),e.join(s,"app.vue")),t.mkdirSync(e.join(s,"layouts")),t.writeFileSync(e.join(s,"layouts","default.vue"),R(o),"utf-8"),t.mkdirSync(e.join(s,"pages")),t.copyFileSync(e.join(c,"pages","index.vue"),e.join(s,"pages","index.vue")),t.mkdirSync(e.join(i,"public")),t.copyFileSync(e.join(c,"public","favicon.svg"),e.join(i,"public","favicon.svg")),n&&p){const m=t.readFileSync(e.join(c,"pwa-assets.config.ts"),"utf-8");t.writeFileSync(e.join(i,"app/pwa-assets.config.ts"),m.replace("images: ['public/favicon.svg'],","images: ['../public/favicon.svg'],"),"utf-8")}else t.copyFileSync(e.join(c,"pwa-assets.config.ts"),e.join(i,"pwa-assets.config.ts"));if(f)if(t.mkdirSync(e.join(s,"service-worker")),t.copyFileSync(e.join(c,"service-worker",`${l?"prompt":"claims"}-sw.ts`),e.join(s,"service-worker","sw.ts")),n){const m=t.readFileSync(e.join(c,"service-worker","tsconfig.json"),"utf-8");t.writeFileSync(e.join(s,"service-worker","tsconfig.json"),m.replace('"extends": "../tsconfig.json",','"extends": "../../tsconfig.json",'),"utf-8")}else t.copyFileSync(e.join(c,"service-worker","tsconfig.json"),e.join(s,"service-worker","tsconfig.json"));V(o,n);const u=JSON.parse(t.readFileSync(e.join(i,"package.json"),"utf-8")),g=await A({cwd:i}).then(m=>m?.name||"npm");u.dependencies??={};const v=[["@vite-pwa/assets-generator",$],["@vite-pwa/nuxt",P],["vite-plugin-pwa",W],["workbox-build",d],["workbox-window",d]];switch(f&&v.push(["workbox-core",d],["workbox-precaching",d],["workbox-routing",d],["workbox-strategies",d]),b("dependencies",v,u,!0),u.devDependencies??={},b("devDependencies",[["typescript",F],["vue-tsc",C]],u,!0),h(o,g==="npm",u,!0),t.writeFileSync(e.join(i,"package.json"),JSON.stringify(u,null,2),"utf-8"),console.log(`

PWA configuration done. Now run:
`),i!==x.cwd()&&console.log(`  cd ${a.includes(" ")?`"${a}"`:a}`),g){case"yarn":console.log("  yarn"),p||console.log("  yarn generate-pwa-icons"),console.log("  yarn dev");break;default:console.log(`  ${g} install`),p||console.log(`  ${g} run generate-pwa-icons`),console.log(`  ${g} run dev`);break}console.log()}function V(o,n){const{rootPath:a,customServiceWorker:r,reloadSW:i,installPWA:f}=o,l=y(!0,o,"service-worker",{workbox:{globPatterns:["**/*.{js,css,html,svg,png,ico}"],cleanupOutdatedCaches:!0,clientsClaim:!0},injectManifest:{globPatterns:["**/*.{js,css,html,svg,png,ico}"]},devOptions:{enabled:!1,suppressWarnings:!0,navigateFallback:"/",navigateFallbackAllowlist:[/^\/$/],type:"module"}});l.registerWebManifestInRouteRules=!0,(i||f)&&(l.client={},i&&(l.client.periodicSyncForUpdates=3600),f&&(l.client.installPrompt=!0));const p=D(r===!0,n);k(p,"@vite-pwa/nuxt","pwa",l),t.writeFileSync(e.join(a,"nuxt.config.ts"),j(p,S).code,"utf-8")}function R(o){const{offline:n,installPWA:a}=o;let r=`<script setup lang="ts">
// you can extract the <ClientOnly> component to a separate file
<\/script>

<template>
  <main>
    <slot />
    <ClientOnly>`;return n?r+=`
      <div
          v-if="$pwa?.offlineReady || $pwa?.needRefresh"
          class="pwa-toast"
          role="alert"
          aria-labelledby="toast-message"
      >
        <div class="message">
          <span id="toast-message">
            {{ $pwa.offlineReady ? 'App ready to work offline' : 'New content available, click on reload button to update' }}
          </span>
        </div>
        <div class="buttons">
          <button
              v-if="$pwa.needRefresh"
              @click="$pwa.updateServiceWorker()"
          >
            Reload
          </button>
          <button @click="$pwa.cancelPrompt()">
            Close
          </button>
        </div>
      </div>`:r+=`
      <div
          v-if="$pwa?.needRefresh"
          class="pwa-toast"
          role="alert"
          aria-labelledby="toast-message"
      >
        <div class="message">
          <span id="toast-message">
            New content available, click on reload button to update
          </span>
        </div>
        <div class="buttons">
          <button @click="$pwa.updateServiceWorker()">
            Reload
          </button>
          <button @click="$pwa.cancelPrompt()">
            Close
          </button>
        </div>
      </div>`,a&&(r+=`
      <div
          v-if="${n?"$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh":"$pwa?.showInstallPrompt && !$pwa?.needRefresh"}"
          class="pwa-toast"
          role="alert"
          aria-labelledby="install-pwa"
      >
        <div class="message">
          <span id="install-pwa">
            Install PWA
          </span>
        </div>
        <button @click="$pwa.install()">
          Install
        </button>
        <button @click="$pwa.cancelInstall()">
          Cancel
        </button>
      </div>`),r+=`
    </ClientOnly>
  </main>
</template>

<style>
.pwa-toast {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 16px;
  padding: 12px;
  border: 1px solid #8885;
  border-radius: 4px;
  z-index: 1;
  text-align: left;
  box-shadow: 3px 4px 5px 0 #8885;
  background-color: white;
}
.pwa-toast .message {
  margin-bottom: 8px;
}
.pwa-toast button {
  border: 1px solid #8885;
  outline: none;
  margin-right: 5px;
  border-radius: 2px;
  padding: 3px 10px;
}
</style>
`,r}function O(o){return o?w(`// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      exclude: ['../service-worker'],
    },
  },
  devtools: { enabled: true },
  nitro: {
    prerender: {
      routes: ['/'],
    },
  },
})
`):w(`// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  nitro: {
    prerender: {
      routes: ['/'],
    },
  },
})
`)}function M(o){return o?w(`// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  typescript: {
    tsConfig: {
      exclude: ['../app/service-worker'],
    },
  },
  devtools: { enabled: true },
  nitro: {
    prerender: {
      routes: ['/'],
    },
  },
})
`):w(`// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: true },
  nitro: {
    prerender: {
      routes: ['/'],
    },
  },
})
`)}function I(o,n,a){return a?[e.join(o,"app"),n.replace("template-custom-nuxt-v4","template-custom-nuxt")]:[o,n]}function D(o,n){return n?M(o):O(o)}export{N as customize};