[Vuejs]-Vue3 + Vite: Is there a way to let vue scoped style transform result from data-v-foo attributes to hash classname

I think you’re looking for css-modules.

You won’t have to use the <style> block in SFC, but instead create a button.module.css file that you can import in your components.

With vite, you can configure them like this: (see docs)

// vite.config.js
module export {
  rollupPluginVueOptions: {
    cssModulesOptions: {
      generateScopedName: '[hash:base64:8]',
    },
  },
}

<template>
  <button :class="[style.btn]">Styled button</button>
</template>

<script>
import style from './button.module.css'

[...]
</script>