Nuxt3에서 동적으로 구성 요소 변경

!
Nuxt3은 현재(20222.4) 과도기 때문에 이 보도의 내용이 정확하지 않거나 틀리거나 틀릴 수 있습니다.다른 해석이 있으면 말씀해 주세요.

차리다

공식.에 소개된 Dynamic Components

<script setup>
const MyButton = resolveComponent('MyButton')
</script>

<template>
  <component :is="MyButton" />
</template>

변수로 동적 수정 지정

↑

<script setup>
const MyButtonTxt = 'MyButton'
const MyButton = resolveComponent(MyButtonTxt)
</script>

<template>
  <component :is="MyButton" />
</template>

면 ↓처럼 혼나요.

[Vue warn]: Failed to resolve component: MyButton
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

(이래도 될 것 같아)

해결책

config에 다음 설정을 추가하면 OK
nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  },
})

방금 욕먹은 구성 요소도 지정할 수 있고, ↓ 같은 것도 지정할 수 있다

<script setup>
const MyButtonTxt = 'MyButton'
</script>

<template>
  <component :is="MyButtonTxt" />
</template>

단, 상기 config 지정에 관하여 정부는 다음과 같다.
Alternatively, though not recommended, you can register all your components globally, which will create async chunks for all your components and make them available throughout your application.
또 추천하지는 않지만 모든 구성 요소를 전 세계에 등록할 수도 있다.이 경우 모든 구성 요소가 비동기 정보 블록을 만들어서 전체 응용 프로그램에서 사용할 수 있습니다.(deepl 번역)

참고 자료

https://github.com/nuxt/framework/pull/3305