Support camel case convertion for v-bind:class

[otomad]

It is possible to add a option in vue.config.js?

Then if you typing in <template>:

<div :class="{ someClass: foo }"></div>

It will automatically convert to

<div :class="{ 'some-class': foo }"></div>

Especially in

<div :class="{ someClass }"></div>

It will automatically convert to

<div :class="{ 'some-class': someClass }"></div>

This can omit quotation marks and be more convenient.

[liulinboyi]

There is a demo: Play GRound

<script setup>
import { ref, onMounted } from 'vue'
const flag = ref(true)
const demo = ref()
const domStr = ref('')

onMounted(() => {
  domStr.value = demo.value.outerHTML
})
</script>

<template>
  <div ref="demo" :class="{ someClass: flag }">demo</div>
  <div>
    {{ domStr }}
  </div>
</template>

The class will not automatically convert to camel, i guess the behavior of automatically convert to camel maybe other plugin done.

[otomad]

Yes, so I just wondering if there is a plugin, or vue provides a feature to enable it in config.

[liulinboyi]

是的，所以我只是想有没有插件提供，或者官方可以在配置中提供一个功能可以开启。

I feel if the plugin exist and use this plugin maybe let other people confused about this hidden behavior. my suggest is you can self done or use change-case to do.