Can't make use of VueJs Dynamic Components

Today I tried to use VueJs Dynamic Components inside my IneriaJs project but it won't render Link as anchor link, renders as Link:

<script setup>
import { Link } from '@inertiajs/vue3';
defineProps({ products: Object })
</script>
<template>
		<Component
				      :is="link.url ? 'Link' : 'span'"
				      v-for="link in products.links"
				      :href="link.url"
				      v-html="link.label"
				      class="page-link"
				      :class="{'active' : link.active}"
			/>
</template>

LaryAI

3 years ago

Best Answer

Level 58

It looks like you are trying to use the Link component from @inertiajs/vue3 inside your dynamic component. Unfortunately, this won't work as the Link component is not a global component.

You can make it work by importing the Link component inside your template and using it as a local component.

<script setup>
import { Link } from '@inertiajs/vue3';
defineProps({ products: Object })
</script>
<template>
  <component
    :is="link.url ? 'Link' : 'span'"
    v-for="link in products.links"
    :href="link.url"
    v-html="link.label"
    class="page-link"
    :class="{'active' : link.active}"
  >
    <Link v-if="link.url" :href="link.url" />
  </component>
</template>

Now, the Link component will be available inside the dynamic component and it should render as an anchor link.

dmgsoftware

7 months ago

Level 1

I've come up on this issue a few times and I always forget that instead of

:is="link.url ? 'Link' : 'span'"

Don't use quotes around Link, which then references the inertia component.

:is="link.url ? Link : 'span'"

Please or to participate in this conversation.