How do I get my ref-activated dialog to appear?

I am using Vue 3 and Vuetify 3. I am trying to understand the various ways to make a dialog appear, based on the examples in the Vuetify documentation, especially the four methods illustrated in the first example within the Slots section of the Dialogs article. At the moment, I'm struggling with the ref-activated method. This playground illustrates the issue.

To see the code, go down to the card titled "Approach 3: Ref-activated". I've got a button that is trying to invoke a dialog in component RADialog1. The problem is that I can't figure out how to pass the ref from that button to the dialog so that it opens when I click on the Ref Activator 1 button.

I've tried passing the ref as a prop but the defineProps macro objects to me passing something called ref and then typescript-annotating it as a ref. I tried using provide in the parent and inject in the dialog but I keep getting syntax errors, no matter what I try.

I'm hoping someone here can help me figure out how to pass the ref value from the parent to the dialog.

I can't see anything in the Vuetify docs that explains this. (Unfortunately, their examples all show dialogs that are coded within the parent component being invoked. I think it's a lot better to code dialogs as separate components.)

Solution

Refs can be passed down just like any prop. You don't necessarily need provide/inject.

App.vue

<v-btn class="indent" color="indigo" ref="trigger1"
  >Ref Activator 1
</v-btn>
<RADialog1 :verbiage="ra_prop1" :activator="trigger1" />

const trigger1 = ref()

Side note: When defining a ref, the value wrapped by the ref is considered the initial value. You originally had ref('raDialog1'), which is a ref with initial string value "raDialog1", but once the component mounts, this initial value is overwritten with the VBtn component. It'd be better to just let the initial value be null, e.g. ref()

RADialog1

<v-dialog max-width="360" persistent :activator="activator">

const props = defineProps(['verbiage', 'activator'])

You mentioned typescript error before. If you want typescript to be happy, you can define props like this

<script setup lang="ts">
  import type { PropType, ComponentPublicInstance } from 'vue'

  const props = defineProps({
    verbiage: { type: String },
    activator: {
      type: Object as PropType<ComponentPublicInstance>
    }
  })
</script>

Playground example

Simpler Alternative

There's actually a shortcut here since the root element of RADialog is v-dialog, assigning the activator to RADialog will have it fallthrough to the v-dialog (provided you don't declare the activator as a prop in RADialog).

App.js

<RADialog1 :verbiage="ra_prop1" :activator="trigger1" />

Now just don't declare any activator prop in RADialog1.

RADialog1.vue

<v-dialog max-width="360" persistent>

const props = defineProps(['verbiage'])

Playground example