InertiaJS has an inbuilt component that we can use on the client-side to make 'href' links. The reason we need to use this is to get access to extra functionalities which will help a lot during the development.

This Link component helps our work in the post, patch, and put methods on the client-side. In the past, we had to create a form on the Front-End to be able to use these methods like the post, patch, put on the Back-End side. Now we do not have to do this with InertiaJS. Let's define them on the Back-End first and later on the Front-End.

Laravel get route and InertiaJS Link Component

// Note: All the route codes below will go to the routes/web.php file.
Route::get('/settings', function () {
    // The Vue Template name should be capital because of convention
    return Inertia::render('Settings');
});

The relevant Front-End code will not differ too much from a regular 'href 'link tag. But then why do we have to use the Link component? Well, the reason is quite simple. An anchor tag provides regular navigation that reloads the page. Because InertiaJS is for SPA-s we do not want to page reload but we want to stay on the same page or at least mimic that we are still on the same. To achieve this we need to use the Link component. So we need to define a link component like this in InertiaJS for the get method:

<Link type="button" class="btn btn-link" href="/settings">Settings</Link>

Laravel post route and InertiaJS Link Component

Now we have a dummy post route as you can see below. It would get the name input value from a form if it wasn't InertiaJS on the Front-End. But thanks to InertiaJS we do not need to define a form at all! It saves us a huge amount of time and at least three or four lines of code per endpoint.

// Note: All the route codes below will go to the routes/web.php file.
Route::post('/logout', function () {
    dd('We Log you Out: ' . request('user'));
});

<Link 
type="button" 
class="btn btn-link" 
href="/logout" method="post" :data="{user:'Mr.John Doe'}" 
as="button">Log out as post</Link>

Laravel put and patch route and InertiaJS Link Component

Similar to the previous InertiaJS post-implementation, the put and patch methods implementation is as simple as the post.

// Note: All the route codes below will go to the routes/web.php file.
// Update with patch
Route::patch('/update-user-data', function () {
    dd('Update user name: ' . request('user'));
});

// Update with put
Route::put('/update-user-data-2', function () {
    dd('Update user name: ' . request('user'));
});

<Link 
type="button" 
class="btn btn-link" 
href="/update-user-data" 
method="patch" 
:data="{user:'Miss.Janie Doe patch'}" 
as="button">Change user data as patch</Link>

<Link 
type="button" 
class="btn btn-link" 
href="/update-user-data-2" 
method="put" 
:data="{user:'Mrs.Jane Doe'}" 
as="button">
Change user data as put</Link>

Conclusion & Closing

Previously I detailed how we can pass data from Laravel to Vue.JS props through InertiaJS. In this part, I have written some notes and info on why we should use the Link component and what benefit they can provide for us. I hope these notes will be useful to others too.