People searching “Laravel slug route Vue” put the title in the URL and then a renamed post 404s every old link. Store a slug and bind that column.
TL;DR
- getRouteKeyName can return slug.
- The column has to be unique.
- The title is not a key.
- Do not use the title as
getRouteKeyName().
The fix#
public function getRouteKeyName(): string
{
return 'slug';
}Route::get('/posts/{post}', [PostController::class, 'show'])->name('posts.show');/posts/hello-world resolves where slug = hello-world. The Vue page still receives the post prop. Generate the slug once when the post is created, from the title, and keep it stable when the title changes. A unique index on slug is what makes the binding mean one row.
Validate the slug with a rule that allows lowercase letters, numbers, and hyphens, plus Rule::unique('posts', 'slug')->ignore($post->id) on update.
What to avoid#
Gotcha
Do not use the title as getRouteKeyName(). Spaces and renamed titles break the Wayfinder URL you already sent to the browser. Do not look the slug up in Vue from a list of every post.
FAQ#
How do I bind a public URL to a slug?
getRouteKeyName can return slug. The column has to be unique. The title is not a key.
What goes wrong with Laravel slug route Vue?
Many developers put the title in the URL and then a renamed post 404s every old link. Do not use the title as getRouteKeyName().
