web component object as props weird usage doesnt update as it should

[flozero]

Version

3.2.29

Reproduction link

github.com

Steps to reproduce

• clone the project
• npm i && npm run build
• go to example project
• you can check App.vue inside vue3 or vue2 project
• npm i && npm run serve

What is expected?

I can understand for vue2 due to old reactivity that it doens't work properly. But for vue3 with new reactivity even if a data object change it should be able to re render the web component

What is actually happening?

have to spread my object for vue2 and vue3 to make it re render my web component {...obj } that looks like an anti pattern to vue3

[LinusBorg]

Your issue here is that you have two local copies of vue in this repository:

• one in the main /node_modules, which will be detected for files from /src (or /dist)
• one in /examples/vue3-playground/node_modules, which will be detected for files from /examples/vue3-playground/src

Since Vue relies on a couple of singletons to make reactivity work, you need to make sure that only one copy is every loaded into your app - usually by resolving the 'vue' alias in your vue.config.js to an absolute path.

An alternative would be a monorepo with workspaces. I did that to your example and it works fine for me:

Sidenote: /src/cmoponents/Tag.vue imports from @vue/reactivity and @vue/runtime-core where it should import from 'vue'. That needs to be fixed for the alias variant to work.

[LinusBorg]

On second look I need to reopen, made a mistake and need to re-evaluate

[LinusBorg]

Ah, still the same reason: 2 copies of Vue. But the real culprit was that you didn't exclude vue from the web components bundle.

You need to externalize Vue so that in the consuming app, the same copy of Vue is used for the app and the Vue web component from your lib.

build: {
    lib: {
      entry: path.resolve(__dirname, './src/custom-elements.js'),
      name: 'paper-ds',
      fileName: (format) => `paper-ds.${format}.js`,
    },
    rollupOptions: {
      external: ['vue']
    }

also keep in mind that the alias mentioned above might still be necessary in local test scenarios.

[flozero]

Thank you linus. But if I do that. For other framework like angular or react. They will have to install vue3 right ? Cause it will not work in this case if they don't. Same for vue2 project

[LinusBorg]

Yes. Which, in my opinion isn't much of a problem. Rather can be an advantage if the consumers might choose to use another web component built on Vue 3 from another vendor.

If it is a problem though for you or your consumers tough, you could do 2 builds, one which includes Vue 3 and one which doesn't.

[flozero]

Agree with you. For vue2 I am going to have an issue no ? how can I an make both working good ?