Blog Detail


Add View-Composer-Like Feature to Inertia.js Laravel Adapter cover image

arrow_back Add View-Composer-Like Feature to Inertia.js Laravel Adapter

Kinetic is a package that adds a view-composer-like feature to the Inertia.js Laravel adapter. It is used to share props based on the Inertia component name.


composer require ambengers/kinetic


This should be very intuitive if you are already familiar with how view and composers work in Laravel.

You can use Inertia::composer() in any service provider to register composers for specific components. The first argument accepts either a string or an array of Inertia components, and the second argument accepts either a class string or a closure.

use Inertia;
use Inertia\ResponseFactory;
use App\Composers\UserComposer;

class AppServiceProvider extends ServiceProvider
    public function boot()
        // Class-based composer..
        Inertia::composer('User/Profile', UserComposer::class);

        // Closure-based composer..
        Inertia::composer('User/Profile', function (ResponseFactory $inertia) {

Class-based composers

You can generate your composer class using this command:

php artisan kinetic:composer UserComposer

Then you can call the $inertia->with() method within the compose method to set the composed props, like so:

class UserComposer
    public function compose(ResponseFactory $inertia)
        $inertia->with('list',  ['foo' => 'bar', 'baz' => 'buzz']);

Closure-based composers

If you opt for a closure-based composer, your closure must accept an instance of Inertia\ResponseFactory class as the first argument. Then you can call the with() method from the factory class to set the composed props like so:

Inertia::composer('User/Profile', function (ResponseFactory $inertia) {
        'post' => [
            'subject' => 'Hello World!', 'description' => 'This is a description.'

Multiple composers

You can also set multiple composers to components using an array, like so:

Inertia::composer(['User/Profile', 'User/Index'], [
    function (ResponseFactory $inertia) {

The array will be automatically merged with any existing composers for the components.

When you call the Inertia::render(‘User/Profile’) the props should now include the composed data.

For more details, you can visit Github

Published at : 05-07-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project