Subscribe on changes!

[Web Component] Use plugins inside Web Component

avatar
Nov 7th 2023

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

avatar
Nov 7th 2023

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

avatar
Nov 7th 2023

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.

avatar
Nov 7th 2023

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?

avatar
Nov 7th 2023

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.

avatar
Nov 7th 2023

closing in favor or the original issue.