nuxt3中使用defineAsyncComponent懒加载组件，但其中的loadingComponent和errorComponent为什么不生效？

Question

<template>
  <div>
    <h2>Async Component 示例</h2>
    <!-- 懒加载组件 -->
    <AsyncHelloWorld />
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

// 定义一个加载时的占位组件
const LoadingComponent = {
  template: `<div style="padding: 10px; color: #666;">加载中...</div>`
}

// 定义一个错误时的占位组件（可选）
const ErrorComponent = {
  template: `<div style="padding: 10px; color: red;">加载失败，请重试</div>`
}

// 使用 defineAsyncComponent 懒加载目标组件
const AsyncHelloWorld = defineAsyncComponent({
   loader: () => new Promise((resolve) => {
            setTimeout(() => {
                import('vue3-colorpicker').then(({ColorPicker}) => {
                    resolve(ColorPicker)
                })
            }, 10000) // 模拟 10 秒加载
        }),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 0,
  timeout: 3000 // 超过 3 秒报错，显示 errorComponent
})
</script>

如上代码所示，我在nuxt3中使用defineAsyncComponent加载组件时，loadingComponent并不会显示，并且超时errorComponent也不会显示，这是为什么呢？有成功的大佬吗？

Answer 1

改用渲染函数

// 定义一个加载时的占位组件
const LoadingComponent = h('div', { style: 'padding: 10px; color: #666;' }, '加载中...')

// 定义一个错误时的占位组件（可选）
const ErrorComponent = h('div', { style: 'padding: 10px; color: red;' }, '加载失败，请重试')

同时设置 suspensible: false

Vue Play

参见：Loading component doesn't show in defineAsyncComponent in Nuxt 3

Answer 2

<template>
  <div>
    <h2>Async Component 示例</h2>
    
    <Suspense @fallback="onLoading" @resolve="onLoaded" @pending="onPending">
      <AsyncHelloWorld />
      <template #fallback>
        <div class="loading-state">🔄 组件加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const AsyncHelloWorld = defineAsyncComponent({
  loader: () => import('./HelloWorld.vue'),
  // 这些配置通常会被 Suspense 覆盖
  timeout: 10000
})

const onLoading = () => console.log('开始加载')
const onLoaded = () => console.log('加载完成')
const onPending = () => console.log('等待加载')
</script>```