v-model on a custom element

[Benoit-Vasseur]

Version

3.0.0-rc.4

Reproduction link

https://github.com/Benoit-Vasseur/bug-vue3-v-model-wc

Steps to reproduce

• npm run dev

What is expected?

• no error in compilation
• v-model is working if the web component is using value prop and trigger the 'input' event

What is actually happening?

• compilation is failing : [vite] SFC template compilation error: v-model can only be used on <input>, <textarea> and <select> elements.

---

I based my test on those RFCs :

• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md#usage-on-custom-elements
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md#autonomous-custom-elements

vueCompilerOptions.isCustomElement seems to work but when i tried to add the v-model attribute it break the compilation :/.

I tried to read the compiler code to find a way to alter the tag of the node, but it does not seem possible : https://github.com/vuejs/vue-next/blob/master/packages/compiler-dom/src/transforms/vModel.ts#L47

Issue for vue2 is here : vuejs/vue#7830

I am open to try to make a PR for this if you give me some hints to implement the feature :).

Thank you in advance for your reply.
Can not wait to adopt Vue 3 :).

[Benoit-Vasseur]

Thanks :).

I was developping this and wanted to make a PR but it is done so it is perfect :).
However I have a suggestion concerning the v-model on a custom element.
I think it could be safer to force the "type" and name the prop v-model-type instead of type. type looks to dangerous to me for the naming collision. I was also thinking of <my-element v-model="model" v-model.type="text" /> but I do not think that it respect the design of the modifier, it is more an "adder" in this case.

What do you think (rename type to v-model-type and make it mandatory for custom element with a proper error message) ? I can make a PR if you approve the idea :).