Today I would like to write about the active link and pagination functionality of InertiaJS. We use them almost everywhere. An active link is an inside tool of InertiaJS but we will need to set a few things in Laravel to make the pagination work. Let’s dive into the details.

Active link functionality of InertiaJS:

There are three types of approaches that are worth mentioning when we want to talk about active link handling. 

• URL method
• Start With method
• Component method

We need to use all of these methods on the $page object. You can see the details about this object here.

The URL method in InertiaJS

The URL method will return the current URL of the page so we can make a comparison in the HTML code like this:

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

The Start With method

This method is not related to any framework. It is a JavaScript method that we can use to make comparisons on the URL method of the page object if this is what we need. See below the definition of the method or read more on the link under here.

“This method lets you determine whether or not a string begins with another string. This method is case-sensitive.”

mozilla.org

<Link
type="button"
class="btn btn-link"
:class="{'font-bold': $page.url.startsWith('/settings')}"
href="/settings">
Settings
</Link>

The Component method

This third method returns the name of the component. In my opinion, this is the most elegant way. Stakeholders could change their minds about an URL. But the component name is up to us. We can use the component names in an app as constant values from the beginning.

<Link
type="button"
class="btn btn-link"
:class="{'font-bold': $page.component === 'Users'}"
href="/users">
Users
</Link>

The pagination

There are some pre-requirements on the Laravel side that we need to set.

• Routing

• InertiaJS render method

The latter should use the pagination method of Laravel with the record number as a parameter.

Route::get('/users', function () {
// The Vue Template name should be capital because of convention
return Inertia::render('Users', [
'time' => now()->toTimeString(),
'users' => User::paginate(10)
]);
});

Due to the paginate method, the data and the extra metadata will be available for the InertiaJS component like so:

The pagination will have two main sections on the Front-End. One section is for the data loop and the other for the paginations link. We need to loop over the data with a VueJS first. We used the name property of the user’s data object and added an edit link to the row.

        <div class="row">
            <div class="col-12">
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Username</th>
                        <th scope="col">Edit</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="user of users.data" :key="user.id">
                        <th scope="row">{{ user.id }}</th>
                        <td v-text="user.name"></td>
                        <td>
                            <Link :href="`/users/${user.id}/edit`">
                                <i class="bi bi-pen-fill"></i>
                            </Link>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

Here, in the code section below will be two different approaches. One approach will use a Component. The other will use the v-if, v-else VueJS one.

• https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

<template v-for="link in users.links">
    <li class="page-item"
        :class="{ 
		active: users.current_page == link.label, 
		disabled: !link.url
	}">
        <Component
            :is="link.url ? 'Link' : 'span'"
            class="page-link"
            :href="link.url"
            v-html="link.label"/>
    </li>
</template>

<template v-for="link in users.links">
    <li class="page-item"
        :class="{ active: users.current_page == link.label}"
        v-if="link.url">
        <Link
            class="page-link"
            :href="link.url"
            v-html="link.label">
        </Link>
    </li>
    <li class="page-item disabled" v-else>
        <a class="page-link"
           href="#" tabindex="-1" aria-disabled="true" v-html="link.label"></a>
    </li>
</template>

Conclusion & Closing

In the last post, I wrote about the link components. Today’s topic was about data management with links and paginator. All three active links approaches are valid and viable options. We should use it with the pagination when we need it.