How to use dynamic components with Vuetify components

[Dominic-Marcelino]

Hi again 👋🏼

How can we use Dynamic Components wit vuetify modules? In Nuxt we can import components for dynamic usage via resolveComponent:

<script setup lang="ts">
import { SomeComponent } from '#components'

const MyButton = resolveComponent('MyButton')
</script>

<template>
  <component :is="clickable ? MyButton : 'div'" />
  <component :is="SomeComponent" />
</template>

This doesn't work with vuetify components. Error: Failed to resolve component: VDialog Is there any known solution?

Thanks a lot!

[userquin]

@Dominic-Marcelino I guess you cannot, you need the vuetify component be loaded as global or using local registration, it is by design https://vuetifyjs.com/en/features/treeshaking/#limitations

[Dominic-Marcelino]

Indeed works by importing it the manual way: import { VDialog } from 'vuetify/components/VDialog';

Due to whatever reason it didn't worked before restarting the dev server 😅 Thanks!