不要在 Vue、TailwindUI 和 Headless UI 中使用内置或保留的 HTML 元素

Question

我正在尝试将 TailwindUI / Headless UI 菜单（下拉菜单）添加到 Vue，但在控制台中出现两个错误：

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

和

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

我在 Laravel 8 应用程序中使用 Vue 3，这是 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> 元素，因为它是 built-in HTML 元素。

只需重命名为 CustomMenu

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