How to augment `ElementAttrs<HTMLAttributes>` interface in Vue?

Question

I'm using Vue 3 with TSX, how to augment the ElementAttrs<HTMLAttributes> interface, so I could do the following without getting type errors?

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    //                                👇 ts complains
    return () => <div class='v-table' vLoading={true}></div>
  },
})

The error I got is:

Type '{ class: string; vLoading: boolean; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.

Property 'vLoading' does not exist on type 'ElementAttrs<HTMLAttributes>'.ts(2322)

Answer 1

I've figured this out:

// Import an entire module for side effects only, without importing anything.
// This runs the module's global code but doesn't actually import any values.
import 'vue'

declare module 'vue' {
  interface HTMLAttributes {
    vLoading?: unknown
  }
}