{"record":{"id":"498ff4e807a1aec2","repo":"tailwindlabs/headlessui","slug":"a-transition-is-used-but-it-is-missing-a-sho","errorCode":null,"errorMessage":"A <Transition /> is used but it is missing a `:show=\"true | false\"` prop.","messagePattern":"A <Transition /> is used but it is missing a `:show=\"true \\| false\"` prop\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@headlessui-vue/src/components/transitions/transition.ts","lineNumber":426,"sourceCode":"    beforeEnter: () => true,\n    afterEnter: () => true,\n    beforeLeave: () => true,\n    afterLeave: () => true,\n  },\n  setup(props, { emit, attrs, slots }) {\n    let usesOpenClosedState = useOpenClosed()\n\n    let show = computed(() => {\n      if (props.show === null && usesOpenClosedState !== null) {\n        return (usesOpenClosedState.value & State.Open) === State.Open\n      }\n\n      return props.show\n    })\n\n    watchEffect(() => {\n      if (![true, false].includes(show.value)) {\n        throw new Error('A <Transition /> is used but it is missing a `:show=\"true | false\"` prop.')\n      }\n    })\n\n    let state = ref(show.value ? TreeStates.Visible : TreeStates.Hidden)\n\n    let nestingBag = useNesting(() => {\n      state.value = TreeStates.Hidden\n    })\n\n    let initial = ref(true)\n    let transitionBag = {\n      show,\n      appear: computed(() => props.appear || !initial.value),\n    }\n\n    onMounted(() => {\n      watchEffect(() => {\n        initial.value = false","sourceCodeStart":408,"sourceCodeEnd":444,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-vue/src/components/transitions/transition.ts#L408-L444","documentation":"Headless UI Vue's <Transition> requires an explicit boolean `show` prop to know when to toggle visibility. A `watchEffect` asserts that `show.value` is strictly `true` or `false`; anything else (undefined, null, a string, a number) throws, because the internal visibility TreeState can't be derived from a non-boolean.","triggerScenarios":"Using <Transition> without a `:show` binding; binding `:show=\"undefined\"` because the data isn't loaded yet; passing `show=\"false\"` as a string attribute instead of `:show=\"false\"`; binding to a non-boolean ref or a value that starts as null.","commonSituations":"Copy-pasting <Transition> from docs but forgetting the show prop; using `v-if`-style truthy values (e.g., a count or object) as `show`; async state where `open` is initially undefined; passing string literals without the `:` binding prefix in Vue.","solutions":["Always pass a strict boolean: `<Transition :show=\"isOpen\">` where `isOpen` is `ref(false)` or computed to boolean.","If the source value may be undefined, coerce it: `:show=\"Boolean(open)\"` or `:show=\"!!open\"`.","Initialize the state ref as `ref(false)`, not `ref(null)` or `ref(undefined)`.","Remember `show=\"true\"` (string) is wrong in Vue; use `:show=\"true\"`."],"exampleFix":"<!-- before -->\n<Transition show=\"true\"> ... </Transition>\n<!-- or -->\n<Transition> ... </Transition>\n\n<!-- after -->\n<Transition :show=\"isOpen\"> ... </Transition>","handlingStrategy":"validation","validationCode":"// Vue: ensure a strict boolean before binding\n<Transition :show=\"typeof open === 'boolean' ? open : !!open\">","typeGuard":"const isBoolean = (v: unknown): v is boolean => typeof v === 'boolean'","tryCatchPattern":null,"preventionTips":["Always bind :show with the leading colon.","Initialize toggle refs as ref(false).","Coerce truthy values with !! before passing."],"tags":["headlessui","vue","transition","props","boolean"],"backgroundTag":"missing-required-prop","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}