What does Laravel return for InertiaJS in the methods?

In a method of a Laravel Controller where we would return the blade view template we ask InertiaJS to render a client-side view as a response:

        return Inertia::render('Organizations/Index', [
            'filters' => Request::all('search', 'trashed'),
            'organizations' => Auth::user()->account->organizations()
                ->orderBy('name')
                ->filter(Request::only('search', 'trashed'))
                ->paginate(10)
                ->withQueryString()
                ->through(fn ($organization) => [
                    'id' => $organization->id,
                    'name' => $organization->name,
                    'phone' => $organization->phone,
                    'city' => $organization->city,
                    'deleted_at' => $organization->deleted_at,
                ]),
        ]);

The second parameter of Inertia:render is an array that passes the data as props to the Front-End:

Anyway, what are props?

In Vue, props (or properties), are the way that we pass data from a parent component down to it’s child components. When we build our applications out of components, we end up building a data structure called a tree.

By Google

Do we define a regular web route in Laravel?

Yes! We need to declare a regular route in the web.php file of the Laravel Framework to provide data to InertiaJS and have some kind of routing. InertiaJS is an adapter and we use Laravel with VueJS. What is useful in this is the fact that we can write Vue code on the Front-End without needing to think about Vue routing because Laravel handles that for us.

Route::get('organizations', [OrganizationsController::class, 'index'])
    ->name('organizations')
    ->middleware('auth');

Because of the Inertia JS rendering, we get a structured JSON response without defining a REST API endpoint in the Laravel API routing file. Due to this approach, we load data through an AJAX call that provides much faster page loads. For example, the main component gets these default data on the first rendering:

What is Vue Devtools?

VueJS Devtools is a debugger for Vue applications. The previous screenshot shows it in work. It is quite a useful tool and this is what google says about it as an ‘official’ definition:

Devtools is a set of utility tools that help a developer in developing and debugginf applications.

By Google

Conclusion & closing

Previously I wrote about the installation and a simple InertiaJS dummy test. In this post, I went through the data rendering from Laravel to Vue.js using the help of InertiaJS.