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

[davidmatter]

Hey there, as there have been many fixes in the last 2.x versions: If you're still encountering issues, please provide a minimal reproduction. Otherwise kindly close this one, thanks!

[GideonMegaport]

I just tried it again with v2.0.28 and still have the same error.

The minimal reproduction is already provided above.

I also updated all the dependencies in my project to the latest and that made no difference.

I also downloaded the source from the repository above and set it up on a completely separate computer, and was able to reproduce the same problem.

[davidmatter]

Right, this is an eslint issue. You might want to transfer this issue to https://github.com/vuejs/eslint-plugin-vue