Vue 3で再帰的にコンポーネントを利用するメモ

tl;dr

defineAsyncComponentで遅延させるといいみたい

import { defineAsyncComponent } from 'vue'
import Foo from './path/to/Foo.vue'

export default {
  components: {
    Foo: defineAsyncComponent(() => Promise.resolve(Foo))
  }
}

解決したかった問題

コンポーネントAからコンポーネントBを利用して、コンポーネントBからコンポーネントAを利用したら以下の警告が出ていた。

Failed to resolve component: A

このissueによると非同期コンポーネントが必要とのことで上記の形で記述すると解決した。

github.com