Vue3 scale events…

[rbartholomay]

Hi there,

i know that vue3 is currently not supported but can be used without the specific scale-components-vue package.
I try this and it runs (with some warnings) but I cannot capture the custom event line @Scalechange and so on.
I read the pull request update Vue and Angular docs and try this on a plain new vue project, but the custom elements are not recognized and handled the events.

Is there a way to capture the scale events or must I use el.addListener(…) for handling this in vue3?

Kind regards

[rbartholomay]

a comment by myself...

after study some documentations I figure out that vue3 cannot handle CustomEvents in camelCase. So it seems that I use addListener('scaleChange', ...)
That runs...

Correct me if I am wrong...

[acstll]

Hello @rbartholomay

Thank you for your question.

As far as I know, you can do @scaleChange="handleChange" in Vue 2 and 3. I will come back to you with a working example just to make sure.

i know that vue3 is currently not supported but can be used without the specific scale-components-vue package.

I would rephrase this like this:

Vue 3 is supported, it fully supports web components/custom elements. The soon-to-be-deprecated proxy package (scale-components-vue) only supports Vue 2.

Regarding the warnings, you can suppress them by following this guide in the official Vue 3 docs. This is also mentioned in the new docs (link to file in PR), as you already found out :)

The warning has to do with Vue trying to treat Scale components as Vue components while parsing the templates. With the configuration you let Vue know they are custom HTML tags and not actual Vue components.

[acstll]

Hey @rbartholomay

I need to apologise because @scaleChange="handleChange($event)" is indeed not working in Vue 3 (I was expecting this to be the same as in Vue 2). This is truly unfortunate!

I'm doing some more research.

[rbartholomay]

I am new to vue3…

… but if I understand the docu correctly vue3 will transform all props from camelCase to kebabCase. But only for props, not for events in Custom-Components.

[acstll]

This could be a bug, see vuejs/core#2841

The docs say you can kebab-case the event names for custom event names ($emit('myEvent') -> @my-event="handle"), but apparently there is not reason @scaleChange shouldn't work in a custom element.

[acstll]

Vue 3 will turn event names into kebab-case:

https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/src/modules/events.ts#L104

So @scaleChange will listen for scale-change :(

https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/__tests__/patchEvents.spec.ts#L174-L176

Need to figure out whether this is 100% intentional.

[acstll]

@rbartholomay, to answer to your original question, for now you have to use el.addEventListener.

We'll be working on a fix for this, to make it possible to use the Vue syntax in the immediate future, without breaking changes.

[rbartholomay]

Ok, thanks for clarification!