如何在Nuxt 3项目中正确实现组件内部的动态组件渲染？

你的问题核心是动态组件渲染时未正确解析图标组件，以下是两种可行的修复方案：

方案一：使用resolveComponent解析组件名 #

修改Navigation组件的代码：

脚本部分 #

<script setup lang="ts">
import { useRoute, resolveComponent } from 'vue-router';

const routes = [
  { name: 'Dashboard', path: '/dashboard', icon: 'IconsDashboard'},
];

const currentRoute = useRoute();

// 解析组件名称为组件实例
const getIcon = (iconName: string) => resolveComponent(iconName);
</script>

模板部分 #

修改动态组件的调用：

<component :is="getIcon(route.icon)" />

方案二：直接传入组件对象 #

手动导入图标组件，将组件实例直接存入路由配置：

脚本部分 #

<script setup lang="ts">
import { useRoute } from 'vue-router';
// 手动导入图标组件
import IconsDashboard from './icons/Dashboard.vue';

const routes = [
  // 这里直接传入组件对象而非字符串
  { name: 'Dashboard', path: '/dashboard', icon: IconsDashboard},
];

const currentRoute = useRoute();
</script>

模板部分保持原有写法即可：

<component :is="route.icon" />

额外注意事项 #

• Nuxt 3默认开启组件自动导入，components/icons目录下的组件会被自动注册为Icons{组件名}格式（比如Dashboard.vue对应IconsDashboard）。
• 若自定义了nuxt.config.ts中的components配置，需确保icons目录被包含在内。

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