Couldn't use VueJS component with "kebab-case" in HTML template

[sarukomine]

If I wanna to use <dialog />, <dialog-overlay /> in HTML template but it said that <DialogOverlay /> is missing a parent <Dialog /> component.

<template>
    <dialog ...>
        <dialog-overlay ... />   
    </dialog> 
</template>

<script>
import { Dialog, DialogOverlay } from '@headlessui/vue'
export default {
    components: {
        Dialog,
        DialogOverlay,
    }
}
</script>

I am thinking that why does it must be <Dialog /> and <DialogOverlay />?
Because I like to use "kebab-case" not "PascalCase" in HTML template.

[adamwathan]

Lowercase "dialog" is a standard HTML element so Vue doesn't think you are trying to use a component when you write it that way. If you want to use kebab case, you'll have to alias it to a different name when registering the component in your script block:

<template>
  <ui-dialog>
    ...
  </ui-dialog>
</template>

<script>
import { Dialog } from "@headlessui/vue"

export default {
  components: {
    UiDialog: Dialog
  }
}

[sarukomine]

Thank you for solved my question!