[Web Component] Use plugins inside Web Component

[joris-fonck-loreal]

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

[LinusBorg]

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)?

[joris-fonck-loreal]

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.

[LinusBorg]

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?

[joris-fonck-loreal]

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.

[LinusBorg]

closing in favor or the original issue.