Routing

Defining routes

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.

Generating URLs

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 used 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.js, it's helpful to make this function available as a custom $route property so you can use it directly in your templates.

Vue.prototype.$route = (...args) => route(...args).url()
<inertia-link :href="$route('users.create')">Create User</inertia-link>

For Ruby on Rails there is a similar library called JsRoutes.