useVModel(s) should optionally be backwards compatible.

Clear and concise description of the problem

I would like to create a runtime bridge for v-model to work with Vue 2.X and Vue 3 components. Vue Bridge wants to solve this problem, but is not currently publicized heavily as it is under construction.

I believe VueUse would have better adoption + usage due to its popularity and it already depends on vue-demi.

Is this out of scope?

Suggested solution

In VueUse core, we could extend useVModel to take in an option for backwards compatibility.

As an aside: I would like Volar + vue-tsc to help create a version of defineProps and defineEmits that would support this macro. Is an experimental feature possible @johnsoncodehk? I think I will create an issue in either project (vue-tsc || Volar) regardless of if we end up adding this functionality to VueUse.

Alternative

• We could create a separate function so that useVModel is not weighed down by a heavier API surface area.
• We could decide this is out of scope for VueUse

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[JessicaSachs]

Yes! It’s almost there, but the open issues block me from using it. Can you double check my usage?

Blockers:

1. Does not seem to work with Vue 2.7. Can you check if I am doing it right?
   1. Here is a video and reproduction and a High-resolution video download
      
      Low-res gif of Vue 2.7 not working with modelValue

      
2. TypeScript / Volar is not supported (written in the known issues, but this breaks all prop-type checking).
3. withDefaults not supported

Reproducing:

pnpm install
pnpm dev:2 # Vue 2 development
pnpm dev:3 # Vue 3 development

1. vite.config.ts is specific to Vue 2 + Vue 3, with a shared common.
2. Source + Test are symlinked across Vue versions. (This architecture is based on Vue Bridge’s)

Pros:

1. Doing a build-time transform instead of explicit runtime logic would be very nice!!!
2. Unplugin ecosystem makes this accessible for lots of users 👍

[sxzz]

@JessicaSachs Hi, I already added the support of Vue 2 and the unified prop name. It will transform Vue 3 code to Vue 2 seamless. I also already refactored the code of your project. So just go to check code~ https://github.com/JessicaSachs/petite/compare/v-model-support...sxzz:petite:v-model-support