Support for Vue v3.4 v-bind shortand syntax

[cexbrayat]

In Vue v3.4, it is possible to write:

<script setup>
import { ref } from 'vue'

const disabled = ref(true)
</script>

<template>
  <button :disabled>Log in</button>
</template>

But vue-tsc throws with:

error TS2322: Type '{}' is not assignable to type 'Booleanish | undefined'.

26       <button :disabled>Log in</button>
                 ~~~~~~~~~

  ../node_modules/.pnpm/@vue+runtime-dom@3.4.0-rc.3/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:411:5
    411     disabled?: Booleanish;
            ~~~~~~~~
    The expected type comes from property 'disabled' which is declared here on type 'ButtonHTMLAttributes & ReservedProps'

See the repro on the playground

[bodograumann]

Yes please. To be honest I am a bit disappointed that this was released as a new stable feature with barely, any support in the tooling.

In addition to the problem noted above, there are more errors, when using multi-word identifiers. E.g. <button :is-disabled> is interpreted as <button v-bind:is-disabled="is-disabled"> by vue-tsc, instead of <button v-bind:is-disabled="isDisabled">.

[so1ve]

<button :is-disabled> is interpreted as <button v-bind:is-disabled="is-disabled"> by vue-tsc

We haven't provided support for v-bind shorthand yet

[yoshi-pi]

Even without TypeScript, I'm getting an error message like v-bind is missing expression. vue(34). Does language-tools generate this error? If it does, could you please fix it?

[so1ve]

Because our support for v-bind shorthand has not landed yet.

[AndrewBogdanovTSS]

Hi guys, any update on this one?

[kevsommer]

Are there any new updates on this? It looks like PR #3831 should be able to solve this. Can we expect it to to be merged soon?

[ChrizzDF]

@kevsommer But it's still a WIP though 😏

[so1ve]

I've implemented the basic functionality, but the mappings (highlight) are inaccurate. I can pack a vsix bundle if you need.