Vue.js 3 project use third party custom web component (carcutter-web-player) gives undefined error but works in Angular app

Question

I try to integrate a third party custom web component into a vue/cli projects vue component.

The custom web component integration works inside a standard HTML page and works also inside an Angular project with CUSTOM_ELEMENTS_SCHEMA enabled. Just in Vue.js projects it does not work and gives errors in developer console. I am trying to use it inside a vue/cli project but also setup a new test vue/vite project with the same result.

I import the third party Javascript via a script tag in index.html. To the custom web component element I add

v-pre

to exclude it from Vue's processing. In the vue/vite test project this is done inside vite.config.js.

Here is a the error message and a screenshot of the error position in bundle.js:

> bundle.min.js:3 Uncaught TypeError: Cannot set properties of undefined
> (setting 'borderRadius')
>     at T._applyAttributes (bundle.min.js:3:11650)
>     at T.init (bundle.min.js:3:7009)
>     at T.connectedCallback (bundle.min.js:3:7149)
>     at insert (runtime-dom.esm-bundler.js:16:1)
>     at mountElement (runtime-core.esm-bundler.js:5545:1)
>     at processElement (runtime-core.esm-bundler.js:5455:1)
>     at patch (runtime-core.esm-bundler.js:5323:1)
>     at mountChildren (runtime-core.esm-bundler.js:5583:1)
>     at processFragment (runtime-core.esm-bundler.js:5797:1)
>     at patch (runtime-core.esm-bundler.js:5309:1)

As I said that kind of integration works natively and with Angular. Just Vue refuses to work.

Wondering whats happening here! It really lacks surface to start debugging that issue.

Answer 1

The carcutter development team reached out to me with the solution. They just finished development of a specific vue.js version:

carcutter webplay vue.js

This one works as expected!

They also have other specific versions and a standalone web-component implementation.