{"record":{"id":"3559af6483b35095","repo":"tailwindlabs/headlessui","slug":"you-provided-an-open-prop-to-the-dialog-but-t","errorCode":null,"errorMessage":"You provided an `open` prop to the `Dialog`, but the value is not a boolean. Received: ${open.value === Missing ? undefined : props.open}","messagePattern":"You provided an `open` prop to the `Dialog`, but the value is not a boolean\\. Received: (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@headlessui-vue/src/components/dialog/dialog.ts","lineNumber":126,"sourceCode":"      }\n      return props.open\n    })\n\n    let internalDialogRef = ref<HTMLDivElement | null>(null)\n\n    let ownerDocument = computed(() => getOwnerDocument(internalDialogRef))\n\n    expose({ el: internalDialogRef, $el: internalDialogRef })\n\n    // Validations\n    let hasOpen = props.open !== Missing || usesOpenClosedState !== null\n\n    if (!hasOpen) {\n      throw new Error(`You forgot to provide an \\`open\\` prop to the \\`Dialog\\`.`)\n    }\n\n    if (typeof open.value !== 'boolean') {\n      throw new Error(\n        `You provided an \\`open\\` prop to the \\`Dialog\\`, but the value is not a boolean. Received: ${\n          open.value === Missing ? undefined : props.open\n        }`\n      )\n    }\n\n    let dialogState = computed(() =>\n      !ready.value ? DialogStates.Closed : open.value ? DialogStates.Open : DialogStates.Closed\n    )\n    let enabled = computed(() => dialogState.value === DialogStates.Open)\n\n    let hasNestedDialogs = computed(() => nestedDialogCount.value > 1) // 1 is the current dialog\n    let hasParentDialog = inject(DialogContext, null) !== null\n    let [portals, PortalWrapper] = useNestedPortals()\n    let {\n      resolveContainers: resolveRootContainers,\n      mainTreeNodeRef,\n      MainTreeNode,","sourceCodeStart":108,"sourceCodeEnd":144,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-vue/src/components/dialog/dialog.ts#L108-L144","documentation":"After confirming an open state exists, the Vue Dialog validates that open is strictly a boolean. Because Vue props are flexible, stringly-typed or numeric values (e.g. open=\"false\") would break the component's internal watchers, so setup() throws with the received value to surface the mistake early.","triggerScenarios":"Passing open=\"true\" / open=\"false\" as a static string attribute (no v-bind) so Vue delivers a string; binding open to a number (0/1), null, undefined, or a non-boolean ref; passing a value from a URL query param or form input without conversion.","commonSituations":"Writing open=\"false\" instead of :open=\"false\"; storing dialog state as 0/1 or 'yes'/'no' in a store; binding to localStorage or route query values that come back as strings.","solutions":["Use a binding with a real boolean: :open=\"isOpen\" (ensure isOpen is a boolean ref).","Convert non-boolean state: :open=\"Boolean(value)\" or normalize the value at its source (store/localStorage/route param).","For static usage, write :open=\"true\" not open=\"true\"."],"exampleFix":"// before\n<Dialog open=\"false\" @close=\"...\">...</Dialog> <!-- string \"false\" -->\n\n// after\n<Dialog :open=\"false\" @close=\"...\">...</Dialog>","handlingStrategy":"type-guard","validationCode":"// Normalize before binding\n<Dialog :open=\"typeof rawOpen === 'boolean' ? rawOpen : rawOpen === 'true'\" @close=\"...\">","typeGuard":"const isBoolean = (v: unknown): v is boolean => typeof v === 'boolean'","tryCatchPattern":null,"preventionTips":["Always bind open with : (v-bind), never as a static attribute.","Keep dialog state as a boolean ref (ref(false)) rather than 0/1 or strings.","Convert values from localStorage, query params, or APIs with Boolean(...) before passing them in."],"tags":["headlessui","vue","dialog","prop-type-validation"],"backgroundTag":"invalid-prop-type","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}