javascriptvue.jsvuejs3nuxt3.js

I can't use dynamic components in Nuxt 3


I try to get this to work

<component v-if="!pending" :is="dynComponent" />

In Nuxt 2 it was no problem, but in Nuxt 3 (Vue 3 ?) it doesn't seem so easy.

The variable dynComponent is filled with the name of the component in the course of the process (myComponent).

As in Nuxt 2, I import the corresponding component with import myComponent from "@/layouts/myComponent.vue". The error is probably there.

I read in the docs that the use of resolveComponent helper is required. I've also tried as described...but without success. (Dynamic components)

I don't get any error messages either. Nothing happens.
Can someone explain me how to use dynamic components in Nuxt 3?


Solution

  • This is how you should write your dynamic component.

    <script setup>
    const yolo = resolveComponent('Yolo')
    const bob = resolveComponent('Bob')
    const boolean = ref(true)
    </script>
    
    <template>
      <div>
        <div>{{ boolean }}</div>
        <component :is="boolean ? yolo : bob" />
        <button @click="boolean = !boolean">toggle</button>
      </div>
    </template>
    

    With this kind of structure

    enter image description here