Inertia

What Is Inertia.js in Laravel Jetstream?

Introduction

Inertia.js is an innovative library that bridges the gap between classic server-side frameworks and modern client-side JavaScript frameworks. In the context of Laravel Jetstream, Inertia.js provides seamless integration with Vue.js as the templating language. This approach allows developers to create modern, single-page applications (SPAs) while maintaining a traditional Laravel backend.

How Inertia Works

Inertia acts as a connector between the client and server, allowing you to render Vue components directly from Laravel's routes. This eliminates the need for complex client-side routing and state management solutions that come with conventional SPAs. When using Inertia, Laravel handles routing, while Vue.js handles the view layer.

To illustrate, consider the following example of a Laravel controller that returns an Inertia "page":

use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

/**
 * Display the profile settings page.
 */
public function show(Request $request): Response
{
    return Inertia::render('Profile/Show', [
        'sessions' => $this->sessions($request)->all(),
    ]);
}

In this example, Inertia::render() is used to return a Vue component called Profile/Show, and the data is passed as props, similar to the way Blade views receive data.

Benefits of Using Inertia in Laravel Jetstream

1. Seamless Integration with Laravel: Inertia allows you to use Laravel’s server-side routing, eliminating the need for a client-side router like Vue Router.
2. Simplified SPA Development: You can build SPAs without setting up complex front-end frameworks and API layers.
3. Consistent Data Handling: Data can be passed to Vue components as props directly from Laravel controllers, ensuring consistent and predictable data flow.

Jetstream's Built-in Inertia Components

Jetstream's Inertia stack comes with a variety of pre-built Vue components for rapid UI development, such as buttons, panels, inputs, and modals. These components are located in resources/js/Components and are designed to be easily customizable.

To see examples of these components in action, you can explore resources/js/Pages, where Jetstream’s pages are defined using these components.

Customizing Inertia Page Rendering

Some pages provided by Jetstream, like Teams/Show and Profile/Show, are internally rendered by Jetstream. However, developers often need to pass additional data to these pages. This can be done using the Jetstream::inertia()->whenRendering() method, allowing you to modify the props sent to the page.

Example of customizing the data passed to a page:

use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Jetstream::inertia()->whenRendering(
        'Profile/Show',
        function (Request $request, array $data) {
            return array_merge($data, [
                // Add custom data here...
            ]);
        }
    );
}

Modals in Inertia

Jetstream’s Inertia stack includes DialogModal and ConfirmationModal components to simplify modal usage. The ConfirmationModal is specifically used for confirming potentially destructive actions, such as deleting an account, while DialogModal can be used for general purposes.

Example of using a ConfirmationModal:

<ConfirmationModal :show="confirmingUserDeletion" @close="confirmingUserDeletion = false">
    <template #title>
        Delete Account
    </template>

    <template #content>
        Are you sure you want to delete your account? All data will be permanently deleted.
    </template>

    <template #footer>
        <SecondaryButton @click="confirmingUserDeletion = false">
            Nevermind
        </SecondaryButton>

        <DangerButton @click="deleteUser" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
            Delete Account
        </DangerButton>
    </template>
</ConfirmationModal>

Routing with Ziggy

Jetstream includes Tighten's Ziggy library, which allows you to use Laravel’s route names within JavaScript. This makes it easier to reference routes in Vue templates:

<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
    Dashboard
</NavLink>

Conclusion

Inertia.js in Laravel Jetstream is a powerful tool that merges the best of server-side and client-side development. It simplifies the process of building single-page applications without the overhead of complex client-side routing and data handling. By integrating seamlessly with Vue.js and Laravel, Inertia provides an efficient development experience for those familiar with these technologies.