People searching “Inertia 404 page” render an empty Vue page when the id is wrong. Laravel already did this. A type-hinted model that does not exist throws ModelNotFoundException, and the app returns 404. The CRUD guide uses that type-hint.
TL;DR
- A missing post already 404s through route model binding.
- Do not build a second Inertia error page for it.
- Do not catch the exception and return
Inertia::render('Errors/404')with a 200. - Do not redirect a missing post to the index and flash “not found”.
The fix#
public function show(Post $post): Response
{
return Inertia::render('posts/Show', [
'post' => $post->only(['id', 'title']),
]);
}/posts/99999 never mounts Show. A v-if="post" on that page does not run. You do not need a custom error component for a missing row.
Post::findOrFail($id) is the same 404 when you are not using the route parameter.
What to avoid#
Gotcha
Do not catch the exception and return Inertia::render('Errors/404') with a 200. The status would be wrong, and the stack guide does not need a second error app. Do not redirect a missing post to the index and flash “not found”. The 404 is the honest response.
FAQ#
How do I let a missing Vue page 404?
A missing post already 404s through route model binding. Do not build a second Inertia error page for it.
What goes wrong with Inertia 404 page?
Many developers render an empty Vue page when the id is wrong. Do not catch the exception and return Inertia::render('Errors/404') with a 200.
