Nuxt3+PrimeVue项目中能否在模板区定义菜单项并添加nuxt-icon？

PrimeVue 默认确实是通过脚本区的数组配置菜单项，但完全支持在模板区自定义菜单项，甚至能完美适配你的 nuxt-icon 需求。下面分两种场景给出具体实现：

1. 完全在模板区定义整个菜单（类似 Buefy 用法） #

通过 Menu 组件的 default 插槽，你可以完全绕过脚本的 model 配置，直接编写任意 HTML 结构和第三方组件，同时手动应用 PrimeVue 的样式类保证样式一致性。

<template>
  <Menu>
    <template #default>
      <ul class="p-menu-list">
        <!-- 普通菜单项 -->
        <li class="p-menuitem">
          <a class="p-menuitem-link" href="/home">
            <Icon name="mdi:home" class="p-menuitem-icon" />
            <span class="p-menuitem-text">首页</span>
          </a>
        </li>
        <!-- 带折叠子菜单的项 -->
        <li class="p-menuitem p-submenu">
          <a class="p-menuitem-link" @click="toggleSubmenu('docs')">
            <Icon name="mdi:book-open" class="p-menuitem-icon" />
            <span class="p-menuitem-text">文档</span>
            <i class="pi pi-chevron-down p-submenu-icon"></i>
          </a>
          <ul class="p-submenu-list" v-show="expandedSubmenus.includes('docs')">
            <li class="p-menuitem">
              <a class="p-menuitem-link" href="/docs/getting-started">
                <Icon name="mdi:rocket" class="p-menuitem-icon" />
                <span class="p-menuitem-text">快速开始</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </template>
  </Menu>
</template>

<script setup>
import { ref } from 'vue'

// 手动管理子菜单展开状态
const expandedSubmenus = ref([])

const toggleSubmenu = (key) => {
  const idx = expandedSubmenus.value.indexOf(key)
  idx > -1 ? expandedSubmenus.value.splice(idx, 1) : expandedSubmenus.value.push(key)
}
</script>

2. 保留脚本配置 + 模板自定义菜单项内容 #

如果想复用 PrimeVue 内置的菜单逻辑（比如路由跳转、激活状态、默认子菜单展开），可以用 item 插槽自定义每个菜单项的内容，直接在插槽中使用 <Icon> 标签即可，无需在脚本中传入 HTML 代码。

<template>
  <Menu :model="menuItems">
    <!-- 自定义单个菜单项的内容 -->
    <template #item="{ item }">
      <div class="flex items-center gap-2">
        <Icon :name="item.icon" />
        <span>{{ item.label }}</span>
      </div>
    </template>
    <!-- 自定义子菜单的触发项 -->
    <template #submenu="{ item }">
      <div class="flex items-center gap-2">
        <Icon :name="item.icon" />
        <span>{{ item.label }}</span>
        <i class="pi pi-chevron-down ml-auto"></i>
      </div>
    </template>
  </Menu>
</template>

<script setup>
import { ref } from 'vue'

// 脚本中仅配置基础数据，UI 交给模板插槽处理
const menuItems = ref([
  {
    label: '首页',
    icon: 'mdi:home',
    to: '/'
  },
  {
    label: '文档',
    icon: 'mdi:book-open',
    items: [
      {
        label: '快速开始',
        icon: 'mdi:rocket',
        to: '/docs/getting-started'
      }
    ]
  }
])
</script>

为什么之前的 <MenuItem> 标签无效？ #

PrimeVue 的 Menu 组件并没有暴露 <MenuItem> 这类子组件，它的核心设计是通过 model 属性传递配置，或通过插槽实现自定义，直接编写 <MenuItem> 不会被组件识别。

内容的提问来源于stack exchange，提问作者ericktreichel