nuxt-modules / nuxt-modules/ionic
Integrating Ionic PWA Elements
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 457
- Forks
- 53
- Avg merge
- 7h 32m
- Merged PRs (30d)
- 21
Description
🐛 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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the StackBlitz reproduction at pages/tabs/tab2.vue and read the Capacitor PWA Elements documentation linked in the issue. Trace how the Nuxt/Ionic integration is initialized and determine where the PWA Elements scripts should be integrated instead of added on the page. Done means the component works without manually adding those scripts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100