From c14f5196a7a04c498a65ff982e6e6e799c4c00d3 Mon Sep 17 00:00:00 2001
From: Lexpeartha <sevic.official@gmail.com>
Date: Sat, 2 Jul 2022 17:01:57 +0200
Subject: [PATCH 1/2] feat: :construction: add plugin for custom pwa elements

---
 package.json                         |  1 +
 playground/nuxt.config.ts            |  5 +++++
 pnpm-lock.yaml                       |  6 ++++++
 src/module.ts                        | 15 +++++++++++++--
 src/runtime/customElements.client.ts |  6 ++++++
 5 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/runtime/customElements.client.ts

diff --git a/package.json b/package.json
index 761b6dde..5cb66d58 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@capacitor/cli": "^3.6.0",
     "@capacitor/core": "^3.6.0",
     "@ionic/cli": "^6.20.1",
+    "@ionic/pwa-elements": "^3.1.1",
     "@ionic/vue": "^6.1.11",
     "@ionic/vue-router": "^6.1.11",
     "@kevinmarrec/nuxt-pwa": "^0.3.0",
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 05f6a2cd..e0da7db6 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -3,6 +3,11 @@ import { defineNuxtConfig } from 'nuxt'
 export default defineNuxtConfig({
   modules: ['nuxt-ionic'],
   ionic: {
+    integrations: {
+      pwa: {
+        enableElements: true,
+      },
+    },
     // integrations: {
     //   meta: true,
     //   pwa: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43ce8135..cac136d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,7 @@ importers:
       '@capacitor/cli': ^3.6.0
       '@capacitor/core': ^3.6.0
       '@ionic/cli': ^6.20.1
+      '@ionic/pwa-elements': ^3.1.1
       '@ionic/vue': ^6.1.11
       '@ionic/vue-router': ^6.1.11
       '@kevinmarrec/nuxt-pwa': ^0.3.0
@@ -43,6 +44,7 @@ importers:
       '@capacitor/cli': 3.6.0
       '@capacitor/core': 3.6.0
       '@ionic/cli': 6.20.1
+      '@ionic/pwa-elements': 3.1.1
       '@ionic/vue': 6.1.11
       '@ionic/vue-router': 6.1.11
       '@kevinmarrec/nuxt-pwa': 0.3.0
@@ -661,6 +663,10 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /@ionic/pwa-elements/3.1.1:
+    resolution: {integrity: sha512-BoEX1pSrKn5dP4VQwaf8DweAmT4ynmpW+9f6oj/W1xLe54bmuXcUY07ziuZX1DLu50xHSYcO5qJ/dbYC/w6wgA==}
+    dev: false
+
   /@ionic/utils-array/2.1.5:
     resolution: {integrity: sha512-HD72a71IQVBmQckDwmA8RxNVMTbxnaLbgFOl+dO5tbvW9CkkSFCv41h6fUuNsSEVgngfkn0i98HDuZC8mk+lTA==}
     engines: {node: '>=10.3.0'}
diff --git a/src/module.ts b/src/module.ts
index e60345f4..c058a987 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -12,10 +12,14 @@ import { setupMeta } from './parts/meta'
 import { setupPWA } from './parts/pwa'
 import { setupRouter } from './parts/router'
 
+interface PwaOptions {
+  enableElements?: boolean
+}
+
 export interface ModuleOptions {
   integrations?: {
     router?: boolean
-    pwa?: boolean
+    pwa?: boolean | PwaOptions
     meta?: boolean
   }
   css?: {
@@ -33,7 +37,9 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     integrations: {
       meta: true,
-      pwa: true,
+      pwa: {
+        enableElements: false,
+      },
       router: true,
     },
     css: {
@@ -108,6 +114,11 @@ export default defineNuxtModule<ModuleOptions>({
 
     if (options.integrations?.pwa) {
       await setupPWA()
+
+      // If it isn't true, it must be a PWA options object
+      if (options.integrations.pwa != true && options.integrations.pwa?.enableElements) {
+        addPlugin(resolve(runtimeDir, 'customElements.client'))
+      }
     }
 
     // Set up Ionic Router integration
diff --git a/src/runtime/customElements.client.ts b/src/runtime/customElements.client.ts
new file mode 100644
index 00000000..fbf72165
--- /dev/null
+++ b/src/runtime/customElements.client.ts
@@ -0,0 +1,6 @@
+import { defineCustomElements } from '@ionic/pwa-elements/loader'
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin(() => {
+  defineCustomElements(window)
+})

From 7041a0b30e19dbbf1063fa5769dd065da5540598 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 2 Jul 2022 17:24:18 +0100
Subject: [PATCH 2/2] fix: defineCustomElements only after app is mounted

---
 src/runtime/customElements.client.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/runtime/customElements.client.ts b/src/runtime/customElements.client.ts
index fbf72165..61d22494 100644
--- a/src/runtime/customElements.client.ts
+++ b/src/runtime/customElements.client.ts
@@ -1,6 +1,8 @@
 import { defineCustomElements } from '@ionic/pwa-elements/loader'
 import { defineNuxtPlugin } from '#imports'
 
-export default defineNuxtPlugin(() => {
-  defineCustomElements(window)
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.hook('app:mounted', () => {
+    defineCustomElements(window)
+  })
 })