Add support for custom pwa elements

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",

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,

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

src/runtime/customElements.client.ts

@@ -0,0 +1,8 @@
+import { defineCustomElements } from '@ionic/pwa-elements/loader'
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.hook('app:mounted', () => {
+    defineCustomElements(window)
+  })
+})