Nuxt 3动态组件无法正常使用，求正确实现方法

以下是几种可行的实现方式，对应不同场景：

方式一：直接导入组件对象（推荐） #

在Nuxt 3中，动态组件的:is属性优先接受组件对象而非字符串名称。你之前的问题核心在于把组件名称字符串赋值给dynComponent，而非导入后的组件对象本身。

修改代码如下：

<template>
  <component v-if="!pending" :is="dynComponent" />
</template>

<script setup>
import myComponent from "@/layouts/myComponent.vue"

// 直接将导入的组件对象赋值给变量
const dynComponent = myComponent
</script>

方式二：使用resolveComponent（适用于组件名称字符串场景） #

如果必须使用组件名称字符串（比如从后端动态获取组件名），需要先确保组件已注册，再通过resolveComponent获取组件对象：

<template>
  <component v-if="!pending" :is="resolvedComponent" />
</template>

<script setup>
import { resolveComponent } from 'vue'
import myComponent from "@/layouts/myComponent.vue"

// 在当前组件中注册目标组件
const localComponents = {
  myComponent
}

// 假设dynComponent是字符串格式的组件名
const dynComponent = "myComponent"
// 通过resolveComponent解析出组件对象
const resolvedComponent = resolveComponent(dynComponent, localComponents)
</script>

方式三：利用Nuxt 3自动导入（无需手动import） #

如果你的Nuxt 3项目开启了组件自动导入（默认开启状态），可以直接使用组件的kebab-case格式名称字符串：

<template>
  <!-- 注意组件名转为短横线分隔的格式 -->
  <component v-if="!pending" :is="dynComponent" />
</template>

<script setup>
// 直接使用组件的kebab-case名称字符串
const dynComponent = "my-component"
</script>

关键注意点 #

• Vue 3中动态组件的:is属性优先识别组件对象，Nuxt 2中支持的局部注册组件名称字符串，在Vue 3中需要配合resolveComponent才能生效。
• 使用字符串名称时，必须确保组件已完成注册（局部或全局），且名称格式匹配（自动导入的组件默认使用kebab-case格式）。
• 无错误提示但组件不渲染，通常是因为:is的值不是有效的组件对象或已注册的组件名称。

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