Не используйте встроенные или зарезервированные HTML-элементы с Vue, TailwindUI и Headless UI.

Question

Я пытаюсь добавить меню TailwindUI / Headless UI (раскрывающееся меню) во Vue, и в консоли появляются две ошибки:

Не используйте встроенные или зарезервированные HTML-элементы в качестве идентификатора компонента: menu

а также

Ошибка: <MenuButton /> отсутствует родительский компонент <Menu />

Я использую Vue 3 в приложении Laravel 8, вот как выглядит app.js:

      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");

А вот минимальный пример представления:

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

Я перепробовала все, что могла придумать, и потерялась! Любые идеи?

Answer 1

Не используйте <Menu>-element, так как это встроенный элемент HTML.

Просто переименуйте что-нибудь вроде CustomMenu

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