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.

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/">Home</Link>

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

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as:
<button type="button">Logout</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.

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/logout" method="post">Logout</Link>

Data

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

import { Link } from '@inertiajs/inertia-vue3'

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

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.

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/endpoint" :headers="{ foo: bar }">Save</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.

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/" replace>Home</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.

import { Link } from '@inertiajs/inertia-vue3'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>Search</Link>

Preserve scroll

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

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/" preserve-scroll>Home</Link>

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.

import { Link } from '@inertiajs/inertia-vue3'

<Link href="/users?active=true" :only="['users']">Show active</Link>

For more information, see the partial reloads page.

Active states

It's often desireable to set an active state for navigation links based on the current page. This can be done in Inertia using the page object by doing string comparisons against the page.url and page.component properties.

import { Link } from '@inertiajs/inertia-vue'

// URL exact match
<Link href="/users" :class="{ 'active': $page.url === '/users' }">Users</Link>

// Component exact match
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)
<Link href="/users" :class="{ 'active': $page.url.startsWith('/users') }">Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)
<Link href="/users" :class="{ 'active': $page.component.startsWith('Users') }">Users</Link>

You can do exact matches (===), or startsWith() checks (useful for matching a subset of pages), or even more complex comparisons using regular expressions.

What's nice about this approach is that you're not limited to just setting class names. You can use this technique to conditionally render any markup on active state, such as different link text, or even an SVG icon.