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?
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