[Feature]: use the same Dialog across component

[enjidev]

Describe the feature

I checked the docs about abstracting the Dialog component:

<Dialog>
   <DialogTrigger>Dialog trigger</DialogTrigger>
   <DialogContent>Dialog Content</DialogContent>
</Dialog>

But it’s not clear how to use the same Dialog across components.

I’m confused about why DialogTrigger needs to be inside DialogRoot.

In other libraries, like HeadlessUI and NuxtUI, you don’t have to define the trigger inside a root component. This makes it easier to toggle the dialog’s state — for example, with Pinia, I could just toggle the same modal by clicking a button in any components.

Could you share the best way to do this in Reka UI?

---

I just migrated from Headless UI and recently fell in love with Reka UI. Great work! Thanks!

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[cannap]

you can use

on the DialogRoot to controll the state

[enjidev]

i knew it, but when i tried to place the DialogTrigger outside the DialogRoot, it didn’t render and returned the following warning:

hook.js:608 [Vue warn]: Component is missing template or render function: {__name: 'DialogTrigger', props: {…}, setup: ƒ}

moving the DialogRoot to the top-level component, like app.vue in Nuxt, worked. is there a better way to handle this?

[enjidev]

in app.vue something like this:

  <DialogRoot>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </DialogRoot>

but just realized it might not work if i've multiple modals.

---

to make it clear, let's say i've these modals:

<ModalA />
<ModalB />

and i want to trigger them across components:

Header.vue -> has buttons to toggle ModalA and ModalB
Footer.vue -> same as above, has buttons to toggle the ModalA and ModalB

is the only one way is to reimport the ModalA and ModalB in each Header and Footer component?

[enjidev]

i got it working after reading about controlled dialog in Ark UI's docs. hmm 👀

so, i just stopped using the DialogTrigger and used a plain button instead.