only render the Dialog on the client

tailwindlabs · Jun 9, 2022 · 10ebf51 · 10ebf51
1 parent f2a813e
commit 10ebf51
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -78,10 +78,17 @@ export let Dialog = defineComponent({
   },
   emits: { close: (_close: boolean) => true },
   setup(props, { emit, attrs, slots, expose }) {
+    let ready = ref(false)
+    onMounted(() => {
+      ready.value = true
+    })
+
     let nestedDialogCount = ref(0)
 
     let usesOpenClosedState = useOpenClosed()
     let open = computed(() => {
+      if (ready.value === false) return false
+
       if (props.open === Missing && usesOpenClosedState !== null) {
         // Update the `open` prop based on the open closed state
         return match(usesOpenClosedState.value, {