Do not use built-in or reserved HTML elements with Vue, TailwindUI and Headless UI-CodePudding

I'm trying to add the TailwindUI / Headless UI Menu (dropdown) to Vue and am getting two errors in the console:

Do not use built-in or reserved HTML elements as component id: menu

and

Error: < MenuButton /> is missing a parent < Menu /> component

I'm Using Vue 3 within a Laravel 8 app, here's what app.js looks like:

import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
const app = createApp({
  ...
});
app.component('menu', Menu);
app.component('menubutton', MenuButton);
app.component('menuitems', MenuItems);
app.component('menuitem', MenuItem);
app.mount("#app");

And here's a minimal example for the view:

<Menu>
  <MenuButton>More</MenuButton>
  <MenuItems>
    <MenuItem v-slot="{ active }">
      <a :class='{ "bg-blue-500": active }' href="/test">
        Test
      </a>
    </MenuItem>
  </MenuItems>
</Menu>

I've tried everything that I can think of and am lost! Any ideas?

CodePudding user response：

Do not use <Menu>-element as it is a built-in HTML element.

Just rename to something like CustomMenu

import { Menu as CustomMenu, ... } from ...
app.component('menu', CustomMenu);
<CutomMenu>
...