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

Question

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

不要使用内置或保留的 HTML 元素作为组件 id：menu

和

错误：< MenuButton /> 缺少父 < Menu /> 组件

我在 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>-element 因为它是一个内置的HTML 元素。

只需重命名为 CustomMenu

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