8

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?

kissu
  • 40,416
  • 14
  • 65
  • 133
Tobi360
  • 188
  • 1
  • 10

1 Answers1

21

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

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    Yeah ... this works for me. Thank you! But do the components always have to be on the first level in the components folder? Can't use subfolders? – Tobi360 Jul 19 '22 at 07:39
  • 1
    @Tobi360 if you have a structure like `/components/nested/Bob.vue`, then the name would be `nested/Bob`. Otherwise, you can always a solution like this to flatten them all: https://stackoverflow.com/a/66336654/8816585 – kissu Jul 19 '22 at 07:46
  • Any idea how to do this with replacing a string? See my question here: https://stackoverflow.com/q/75555611/4638682 – Loosie94 Feb 24 '23 at 14:53
  • @Tobi360 thanks, you section solution didn't work, however the link did. Thanks! – Wovasteen Gova Mar 25 '23 at 21:54
  • 1
    thanks, but it doesn't work with variable. how to get resolveComponent to work like const bob = resolveComponent(name) ? – nam vo Apr 15 '23 at 13:52
  • 1
    @namvo I'm not sure how that works with a dynamic import but it will probably not be good for performance anyway, having a static array of possible components is the best still IMO. For dynamic components, there is probably a way but I'm not sure how to do it with Vite! – kissu Apr 15 '23 at 14:03
  • thanks, but do you know how this could also be resolved in storybook 7 for nuxt? As in the current way component does not load properly also – Gesha Jun 23 '23 at 09:48
  • @Gesha I don't have any experience with Storybook 7 but you could probably look into the Github issues or ask a question down there regarding this specific use case by linking my answer. – kissu Jun 23 '23 at 22:10
  • It looks good, but how does it work with more than 2 components ? For exemple, I use it in a modal and I use it to load the good component in some parts ot my nuxt App. So I've lot of possibilities – RoosDev Jul 22 '23 at 15:09