Officially support v-model with <slot>

[DrJume]

What problem does this feature solve?

Currently, it seems that v-model is not supported with Vue <slot>.
This is the current ESLint rule, which does not allow v-model in <slot>:

https://eslint.vuejs.org/rules/valid-v-model.html
https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-model.js#L32

But now with Vue 3, event handlers such as @update:modelValue are passed as props prefixed with on, so technically they are available as slot props.

What does the proposed API look like?

(This is currently technically possible, but not very elegant)

MyComponent.vue:

<slot v-model="data" />

App.vue:

<MyComponent v-slot="{ modelValue, 'onUpdate:modelValue': onUpdateModelValue }">
    <input type="text" :value="modelValue" @input="onUpdateModelValue($event.target.value)"/>
</MyComponent>

<!-- It would be awesome, if something like this would automagically work: -->
<MyComponent v-slot="{ modelValue }">
    <input type="text" v-model="modelValue"/>
</MyComponent>

[DrJume]

I made a POC in Stackblitz, showing that it technically works.

https://stackblitz.com/edit/vue3-vmodel-with-slot?file=src%2FApp.vue

[Nickno95]

Would also like this implemented.

[lbineau]

Any news on this one?
The migration from Vue 2 to Vue 3 proposes to use slots as a replacement for inline-template.
So far I also had issues with v-model not working on scoped slots.

[RomanSkrypnik]

Any updates?

[sanscheese]

Mentioned a use case for this in #495 (comment)