InertiaLink and Link in Laravel Inertia

To create links within an Inertia application, you will need to use the Inertia link component. This is a lightweight wrapper around a standard <a> anchor link that intercepts click events and prevents full page reloads from occurring. This is how Inertia provides a single page app experience.

We are going to talk about an important change that we have in the last updates of Inertia in Laravel, and it is a change of internal organization of Inertia; specifically renaming a Vue module:

https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13

Ahora nuestros InertiaLink se llaman como Link:

<inertialink method="DELETE" :href="route('user.destroy', { customer: u })">Borrar</Link>

Apart from this, we have to register to be able to use

import { Link } from '@inertiajs/vue3' // vue 3

or

import { Link } from '@inertiajs/vue' // vue 2
components: {
    ...
    Link
},

And we can use it without problems in the same way; in this aspect, we have no change:

<Link  method="DELETE" :href="route('user.destroy', { customer: u })">Borrar</Link>

Methods

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

import { Link } from '@inertiajs/vue3'

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

Header

Just like including headers:

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>

Replace battery when browsing

You can specify the behavior of the browser history. By default, page views push the (new) state (window.history.pushState) into the history; however, it is also possible to replace the 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/vue3'

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

Preserve scroll

Another very interesting option is to prevent the scroll from restarting when browsing, to do this:

import { Link } from '@inertiajs/vue3'

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

Conclusions

So that's it, now we have a new scheme to work with the links whose changes is JUST a name, to refer our routes that is now shorter; otherwise, you can do exactly the same.

These are just some options that you can use, and remember that you have more information in the official documentation.

Remember that this material is part of my complete course in Laravel Inertia.

31-03-2023 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• InertiaLink and Link in Laravel Inertia