Class bindings in Vue can accept strings, arrays and objects, according to the docs at

CodePudding user response：

I haven't found any type in Vue's core that is usable but we can use the information of the documentation to make up our own type. It can either be:

• string
• Record<string, boolean> (Object syntax)
• (string | Record<string, boolean>)[] (Combined)

So you could do something like:

type Class = string | Record<string, boolean> | (string | Record<string, boolean>)[];

const props = defineProps<{ class?: Class }>();

CodePudding user response：

https://vuejs.org/guide/components/attrs.html#accessing-fallthrough-attributes-in-javascript

You shouldn't type class as a prop, as it is inherited by default

(and added to root element, see https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance to bypass)

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

const attrs = useAttrs()
const klass = attrs.class
</script>