[Web Component] Use plugins inside Web Component
Vue version
3.3.4
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-k5r83k
Steps to reproduce
- Open the console
- See the error message
What is expected?
Have a way to use plugins (like pinia
, vue-router
or any other) inside Web Component.
What is actually happening?
getCurrentInstance().appContext.app
is null
.
System Info
System:
OS: Windows 10 10.0.22631
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 3.79 GB / 15.74 GB
Binaries:
Node: 20.0.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (119.0.2151.44)
Internet Explorer: 11.0.22621.1
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
No response
What's the use case for turning a Vue component into a web component that only works in a Vue app (because it relies of vue-router, pinia, or similar)?
It can be used outside a vue app.
Here is my use case: When bundled, my application have all necessary deps in only one JS file in order to works; Vue, pinia, vue-router, CSS... When fetched on a website (that does not use Vue), the bundle initialize a Web Component and it just works without installing dependencies.
Ah, so you want to essentially encapsulate a complete Vue app as a single web component. I think we do have such a request in the backlog already, need to look it up.
Edit: Duplicate of #4635, essentially.
Would you agree?
Oh yes, sorry for the duplicate :(
Yes, totally agree 👍
EDIT: Currently I have my workaround to implement the use case but I have some problems depending on the plugin used. I will try to use the gist defined in the ticket and see if it fix my problem for the moment.