Integrating Ionic PWA Elements

aaronksaunders commented 2 years ago

🐛 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

aaronksaunders commented 2 years ago

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",
    },
  ],
});