With Inertia all routing is defined server-side. Meaning you don't need Vue Router or React Router. Simply create routes using your server-side framework of choice.
If you have a page that doesn't need a corresponding controller method, like an FAQ or about page, you can route directly to a component.
Route::inertia('/about', 'AboutComponent');
Some server-side frameworks allow you to generate URLs from named routes. However, you will not have access to those helpers client-side. Here are a couple ways to still use named routes with Inertia.
The first option is to generate URLs server-side and include them as props. Notice in this example how we're passing the edit_url
and create_url
to the Users/Index
component.
class UsersController extends Controller
{
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all()->map(function ($user) {
return [
'id' => $user->id,
'name' => $user->name,
'email' => $user->email,
'edit_url' => URL::route('users.edit', $user),
];
}),
'create_url' => URL::route('users.create'),
]);
}
}
Another option is to make your route definitions available client-side as JSON, and then use this to generate URLs from your named routes.
<script>
let routes = {{ json_encode($routes) }}
</script>
If you're using Laravel, the Ziggy library does this for you automatically via a global route()
function. If you're using Ziggy with Vue, it's helpful to make this function available as a custom $route
property so you can use it directly in your templates.
app.config.globalProperties.$route = route
<Link :href="$route('users.create')">Create User</Link>
For Ruby on Rails there is a similar library called JsRoutes.