Links

To create links within an Inertia app you'll need to use the Inertia link component. This is a light wrapper around a standard anchor link that intercepts click events and prevents full page reloads from occurring. This is how Inertia provides a single-page app experience.

Creating links

To create an Inertia link, use the Inertia link component. Note, any attributes you provide will be proxied to the underlying <a> tag.

<inertia-link href="/">Home</inertia-link>

Method

You can specify the method for an Inertia link request. The default is GET, but you can also use POST, PUT, PATCH, and DELETE.

<inertia-link href="/logout" method="post">Logout</inertia-link>

Data

You can add data using the data attribute. This can be an object, or a FormData instance.

<inertia-link href="/endpoint" method="post" :data="{ foo: bar }">Save</inertia-link>

Replace

You can specify the browser history behaviour. By default page visits push (new) state (window.history.pushState) into the history, however it's also possible to replace state (window.history.replaceState) by setting the replace attribute to true. This will cause the visit to replace the current history state, instead of adding a new history state to the stack.

<inertia-link href="/" replace>Home</inertia-link>

Preserve state

You can preserve a page component's local state using the preserve-state attribute. This will prevent a page component from fully re-rendering. This is especially helpful with forms, since you can avoid manually repopulating input fields, and can also maintain a focused input.

<input v-model="query" type="text" />
<inertia-link href="/search" :data="{ query }" preserve-state>Search</inertia-link>

Preserve scroll

By default page visits will automatically reset the scroll position back to the top of the page (and any scroll regions you've defined). You can use the preserve-scroll attribute to disable this behaviour.

<inertia-link href="/" preserve-scroll>Home</inertia-link>

Partial reloads

The only option allows you to request a subset of the props (data) from the server on subsequent visits to the same page. This feature is called partial reloads, and can be a helpful performance optimization if it's acceptable that some page data becomes stale. For partial reloads to be effective, be sure to use lazy evaluation server-side.

<inertia-link href="/" :only="['someProps']">Home</inertia-link>