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.
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>
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>
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>
.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>
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 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>
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>
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>
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>
For more information, see the scroll management page.
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>
For more information, see the partial reloads page.