Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Integrating Ionic PWA Elements #14

Open
aaronksaunders opened this issue Jun 23, 2022 · 4 comments
Open

Integrating Ionic PWA Elements #14

aaronksaunders opened this issue Jun 23, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@aaronksaunders
Copy link
Contributor

aaronksaunders commented Jun 23, 2022 •
edited
Loading

🐛 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 aaronksaunders added the bug Something isn't working label Jun 23, 2022
@aaronksaunders
Copy link
Contributor Author

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

@aaronksaunders aaronksaunders mentioned this issue Jul 15, 2022
Closed
@Jamiewarb
Copy link
Contributor

@danielroe do you want to support this out of the box? If so I can look into this

@danielroe
Copy link
Collaborator

I think that would be pretty nice 👍

@danielroe danielroe removed their assignment Jan 9, 2024
@komunyako
Copy link

komunyako commented Apr 19, 2024 •
edited
Loading

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@aaronksaunders @Jamiewarb @komunyako @danielroe