People searching “Vue prop default Inertia” set a default and still crash on null. withDefaults fills undefined. JSON null is a present value. The TypeScript guide types the props. This page is the default.
TL;DR
- withDefaults fills a prop that is missing.
- A prop that arrives as null stays null.
- Do not default
postto{}so a missing record renders an empty editor.
The fix#
<script setup lang="ts">
const props = withDefaults(defineProps<{ search?: string }>(), {
search: "",
});
</script>If the controller always sends search, the default never runs. Send the key only when you mean it, or send '' from Laravel when the query string is empty:
'search' => $request->string('search')->trim()->toString(),That is a string, including an empty one. The default is then unnecessary, which is the better fix.
What to avoid#
Gotcha
Do not default post to {} so a missing record renders an empty editor. A missing record should 404 in the controller. The page should not pretend there is a post.
FAQ#
How do I default a prop an Inertia page did not get?
withDefaults fills a prop that is missing. A prop that arrives as null stays null.
What goes wrong with Vue prop default Inertia?
Many developers set a default and still crash on null. Do not default post to {} so a missing record renders an empty editor.
