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/@[email protected]/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.

[rocketdv]

Any update on this?

[razvaniacob]

Still nothing?

[EyalRazNadiv]

this is, literally, the only thing that prevents me from using this feature :/

[yakir-reznik]

Would really love to see this fixed. ✌️

[JoniLieh]

Finally working, Version 2.0 supports this, no more takeover-mode needed either, uninstall Volar :)

[liuzw2579]

support camelCase, not support kebab-case

[benkroeger]

because you can not have kebab-case variable names in JavaScript

[liuzw2579]

because you can not have kebab-case variable names in JavaScript

but this can run in .vue
https://play.vuejs.org/#eNp9UrFOwzAQ/ZWTlxSpNANMIS0C1AEGWgGjlyi5BJfEtmynVErz75ydNhQE3Xz33j0/33PH7rSebVtkCUttboR2YNG1esGlaLQyDjowWEIPpVENRESNRuhBNfrQn8W+8ErRDZdc5kpaB0ri2igNc68xiVYSwdfRBZdpPFxHF1HhsNF15pAqgDToJjR8qf10TN00PqGwKXOWbihFNdtYJcl85wc5y2lS1GhW2glywFkCAfFYVtfq8yn0nGlxeuzn75h//NHf2J3vcbY2aNFskbMRc5mp0A3w8vUZd3QewUYVbU3sM+ALWlW33uNAu29lQbZPeMHtY9izkNWbXe4cSnt8lDfqmX3gc0Z790v77+nfdq9m12GOy562eMzsd/pQZ7Ka0xzJ0L4LLMWQpE2D5iHX2wSsM2SP1BYTCvV8rIXYhgN03fgz9nuIIujJDxHigfEz6/4LHOHitg==

[reneroth]

vue shorthand is meant to bind your variables with their own name... thus, in shorthand you can only use valid javascript variable names. if you want to use kebab attributes, you can not use shorthand...

It actually does work, vue converts it internally. I do agree though that it's... not optimal 🥴

[liuzw2579]

vue shorthand is meant to bind your variables with their own name... thus, in shorthand you can only use valid javascript variable names. if you want to use kebab attributes, you can not use shorthand...

It actually does work, vue converts it internally. I do agree though that it's... not optimal 🥴

eslint plugin vue rule recommend attribute hyphenation

https://eslint.vuejs.org/rules/attribute-hyphenation.html