Dynamic component via Nuxt3 / Vue3

I want to create a few components dynamically, but at the moment It doesn't work.

Here is a simple example. I cannot assign a var to the :is attribute

<template>
    <div class="the-modules">
        <component :is="name"  />
    </div>
</template>

<script setup>
    import ModuleStage from './ModuleStage.vue';
    const name = "ModuleStage"
</script>

As it is not always possible to predict components and import them manually or work with resolveComponent (i.e. you work with a CMS), i would recommend to work with global components in nuxt3.

Just place your dynamic components (and only these) under components/global/

You can also specify a seperate directory in your nuxt config:

export default defineNuxtConfig({
  components: {
    dirs: [
      {
        "path": "~/components/my-dynamic-components",
        "global": true
      },
      "~/components"
    ]
  },
})

Then you can just use them without resolving or import anything:

<component :is="'MyAwesomeComponent'" />

Read more in the Documentation:

• https://nuxt.com/docs/api/configuration/nuxt-config#components
• https://nuxt.com/docs/guide/directory-structure/components#dynamic-components

<script setup> specifically can not use strings for dynamic components: Documentation

You can use the imported reference itself

<template>
  <div class="the-modules">
    <component :is="ModuleStage"  />
  </div>
</template>

<script setup>
  import ModuleStage from './ModuleStage.vue';
</script>

or you can use Options API where strings can be used

<template>
  <div class="the-modules">
    <component :is="name" />
  </div>
</template>

<script>
import ModuleStage from './ModuleStage.vue';
export default {
  components: { ModuleStage },
  data() {
    return {
      name: 'ModuleStage'
    };
  }
};
</script>