I can't use dynamic components in Nuxt 3

user_6449514 0
Viewed 327

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?

nuxtjs3 vuejs3
1 Answers

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

user_88165850
Related