nuxt-modules
Integrating Ionic PWA Elements
đ The bug
reference - https://capacitorjs.com/docs/web/pwa-elements
The PWE Elements for Capacitor Components need to be installed and initialized in the vuejs application.
The current solution I have implemented is to add the following to the page where I need to use one of them
<Html>
<Head>
<Script
type="module"
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
></Script>
<Script
nomodule
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
></Script>
</Head>
</Html>
đ ī¸ To reproduce
https://stackblitz.com/edit/github-eahsnx?file=pages/tabs/tab2.vue
đ Expected behaviour
It would be nice if the module integrated this into the code so it wouldn't need to be configured manually
âšī¸ Additional context
No response
I think it would be nice to have this integrated into the main app.vue, but it is manageable to just add it where you need it using the useHead hook it works fine so no problem if you close this since there is a reasonable way to address this.
Maybe all is needed is an update to the documentation?
useHead({
script: [
{
async: true,
crossorigin: "anonymous",
type: "module",
src:
"https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js",
},
],
});
@danielroe do you want to support this out of the box? If so I can look into this
@Jamiewarb @danielroe It's better to just provide documentation on how to integrate those elements, and let devs to decide that to do.
https://stackblitz.com/edit/github-eahsnx-wbb7tx?file=plugins/ionic-pwa-elements.client.js Here is plugin that initiates elements installed via npm.
edit: if you catch "Upgrade Required" on stackblitz, just delete .nuxt folder
