Triggering dialog / modal via javascript

[lea0o0oo]

Is there a way to trigger a dialog via javascript? I can't find it anywhere in the docs or by searching how to do that with radix vue

[sadeghbarati]

You can use controlled components and control it with ref and v-model:open on Dialog component

[lea0o0oo]

Thank you so much!

[lea0o0oo]

For anyone wondering, it will be something like this

<script setup>
import { ref, onMounted } from "vue";

let showModal = ref(false);

showModal.value = true // Show modal
showModal.value = false // Hide modal

function openWithClickOnButtonForExample() {
    showModal.value = true
}

onMounted(() => {
     showModal.value = true
})
</script>

<template>
  <button @click="openWithClickOnButtonForExample">click</button>
  <Dialog v-model:open="showModal">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Hi</DialogTitle>
      </DialogHeader>
    </DialogContent>
  </Dialog>
</template>