How to use Vuetify's parent activator from inside a custom component

Question

Vuetify 3's VDialog has the activator prop that can be used like this:

<VBtn>
  Click me to show a dialog
  <VDialog activator="parent">
    Ta-da!
  </VDialog>
</VBtn>

But there's this dialog that I use similarly multiple times throughout the app. So I want to abstract it away into its own component. Like this:

<!-- MyDialog.vue -->
<script setup>
const props = defineProps({
  activator: String,
});
</script>

<template>
  <VDialog :activator="props.activator">
    Ta-da!
  </VDialog>
</template>

And then in the parent...

<VBtn>
  Click me to show a dialog
  <MyDialog activator="parent" />
</VBtn>

But this doesn't seem to work. It looks like <VDialog>'s parent is the <template>. How can I achieve this?

Answer 1

<script setup>
const props = defineProps({
  activator: String,
});
</script>

does not expose a props variable to <template />. Instead, it exposes each individual prop as a variable. Which means the correct template would be:

<template>
  <VDialog :activator="activator">
    Ta-da!
  </VDialog>
</template>

---

If the above doesn't help, I suggest you create a runnable minimal reproducible example to allow debugging and testing any potential solution. If you need a node-like online environment, use codesandbox.io or similar.