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 <a> 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 tag.

<inertia-link href="/">Home</inertia-link>
The <inertia-link> component is automatically registered by the Inertia plugin.

By default Inertia renders links as anchor <a> elements. However, you can change the tag using the as attribute.

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

// Renders as:
<button type="button">Logout</button>
Creating POST/PUT/PATCH/DELETE anchor <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues. Instead, consider using a more appropriate element, such as a <button>.

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>
The <inertia-link> component is automatically registered by the Inertia plugin.

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>
The <inertia-link> component is automatically registered by the Inertia plugin.

Headers

The headers option allows you to add custom headers to an Inertia link. Do note that Inertia's headers take priority and therefore cannot be overwritten.

<inertia-link href="/endpoint" :headers="{ foo: bar }">Save</inertia-link>
The <inertia-link> component is automatically registered by the Inertia plugin.

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>
The <inertia-link> component is automatically registered by the Inertia plugin.

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>
The <inertia-link> component is automatically registered by the Inertia plugin.

Preserve scroll

You can use the preserve-scroll attribute to prevent Inertia from automatically resetting the scroll position when making the visit.

<inertia-link href="/" preserve-scroll>Home</inertia-link>
The <inertia-link> component is automatically registered by the Inertia plugin.

For more information, see the scroll management page.

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.

<inertia-link href="/users?active=true" :only="['users']">Show active</inertia-link>
The <inertia-link> component is automatically registered by the Inertia plugin.

For more information, see the partial reloads page.