v-bind shorthand syntax is not supported for :class

[GideonMegaport]

When using an attribute named class the v-bind shorthand produces the 'v-bind' directives require an attribute value. error.

To reproduce:

<script lang="ts" setup>
defineProps<{
  color: string
  class: string
}>()
</script>

<template>
  <div
    :class
    :color></div>
</template>

In the above code, the color attribute is accepted but the class attribute isn't.

[so1ve]

Do you have a reproduction repo? I can't reproduce this on my machine.

[GideonMegaport]

Here is a reproduction repo: https://github.com/GideonMegaport/vbindTest

The relevant code is in src/components/TestComponent.vue

I created a blank Vue 3 project with the following settings: ✔ Add TypeScript? … Yes ✔ Add JSX Support? … No ✔ Add Vue Router for Single Page Application development? … No ✔ Add Pinia for state management? … No ✔ Add Vitest for Unit Testing? … No ✔ Add an End-to-End Testing Solution? › No ✔ Add ESLint for code quality? … Yes ✔ Add Prettier for code formatting? … Yes ✔ Add Vue DevTools extension for debugging? (experimental) … No

In VSCode I disabled all extensions except Vue - Official and ESLint

The error shows up no matter what order I put the attributes in.

[so1ve]

It works?

[GideonMegaport]

Still doesn't work for me.

[so1ve]

Pretty weird, what's your vue and volar's version?

[GideonMegaport]

I'm using "Vue - Official" v2.0.10 and Vue 3.4.21([email protected])

I just downloaded the repository zip and did a pnpm i