Zenn
📘

Nuxt3でコンポーネントを動的に変更する

2022/04/08に公開
Nuxt
Vue.js
tech

準備

公式で紹介されている 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']
  },
})

さきほど怒られたコンポーネントの指定もOKになるし、↓のような指定も可能になる

<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

Discussion