Standalone devtools not working when app is mounted to body + top-level await
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 279
- PR merge metrics
- No merged PRs in 30d
Description
My app is mounted to document.body directly, which in itself does not cause an issue with DevTools. However, I also use top-level await, which delays the mounting process until all the promises have been resolved. This order of events cause a race condition, where DevTools is mounted before the app and it get's replaced by Vue after mounting
Expected behaviour
Devtools should be mounted after it detects that all the other apps are also mounted to avoid being overwritten (we can't stop the user from manipulating the DOM, so I think it's a sensible middleground).
Reproduction
https://stackblitz.com/edit/vue3-vite-typescript-starter-jkegp2zi?file=src%2Fmain.ts
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 linked StackBlitz reproduction in src/main.ts and inspect the interaction between mounting to document.body and top-level await. Trace the mounting order, then verify that DevTools remains present after the Vue app finishes mounting and does not get overwritten.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100