Change InertiaJS-Laravel default RootView

Question

I am using Laravel 8 and I have installed InertiaJS, but in my directory resources/views/ I have a single file called index.blade.php which I plan to use with InertiaJS.

By default, InertiaJS looks for a file inside that directory called app.blade.php. I know writing the following statement:

\Inertia\Inertia::setRootView('index');

Change the rootView and allow me to use the file I have created. It may seem like a stupid question, but as far as I see it, I can do 2 things ..

Rename file index.blade.php to app.blade.php
Write the previous sentence .. in one of the ServiceProviders that I have

I wonder the following:

InertiaJS-Laravel does not allow publishing a ServiceProvider with the command php artisan vendor:publish? (the output of this command does not show me anything to publish regarding this package)
To solve my problem I should create a ServiceProvider like: php artisan make:provider InertiaServiceProvider and then register it?
Or just add the previous statement to one of the ServiceProvider that already exist? Like in app/Http/Providers/RouteServiceProvider.php

What do you recommend that would be better?

I want to seek the largest possible organization in my project. Thank you very much in advance...

Sidney Gijzen · Accepted Answer · 2021-02-14T12:07:42.460

Update; after my initial answer (on 20-09-2020), Inertia introduced middleware to handle your Inertia requests.

As described in the answers below, you can use the command php artisan inertia:middleware to generate this middleware. You can set the root index with:

// Set root template via property
protected $rootView = 'app';

// OR
// Set root template via method
public function rootView(Request $request)
{
    return 'app';
}

You can find more info in the docs.

score 8 · Answer 2 · answered Jan 16 '21 at 18:37

Even tighter, just override the rootView method in App\Http\Middleware\HandleInertiaRequests like this...

public function rootView(Request $request)
{
    if ($request->route()->getPrefix() == 'admin') {
       return 'layout.admin';
    }

    return parent::rootView($request);
}

score 5 · Answer 3 · answered Dec 26 '20 at 09:16

5

You can do this inside your controller on the fly.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Inertia\Inertia;

class NewsController extends Controller
{
    public function index()
    {
        Inertia::setRootView('layouts.news');
        $users = User::all();

        return Inertia::render('News/Index', compact('users'));
    }
}

answered Dec 26 '20 at 09:16

Saifur Rahman

445
5
11

I have no Idea what type of problem you are facing. But in this example I have tried to show how you can control your inertia root view from your controller. – Saifur Rahman Mar 15 '21 at 01:35
This looks like the better approach for my use cases, where I want to have several pages. We already have routing in the route files; the middleware approach seems like it will create a shadow router there. But if you set the root in each controller action just before returning the view, that makes it just part of serving each route and keeps all your routing in one place. – Fred Polli Dec 08 '22 at 12:26

score 5 · Answer 4 · edited Sep 20 '22 at 18:38

5

Replace in the App\Http\Middleware\HandleInertiaRequests

protected $rootView = 'app';

with:

public function rootView(Request $request): string
{
    if ($request->route()->getPrefix() === '/admin') {
        return 'admin.app';
    }
    
    return 'app';
}

edited Sep 20 '22 at 18:38

ericmp

1,163
4
18

answered Jan 27 '21 at 09:31

nekooee

142
2
9

The `rootView` worked when the page refreshes. because the `HandleInertiaRequests` worked when the page refreshes and gets the master layout from the root! if after first load you change the page with ajax, the master blade layout not reloaded. if you need to change the master layout, should create your master layout with vue and handle it with vue. – nekooee Mar 10 '21 at 10:49
To do this, you need to work through the API and create master layers with vue. – nekooee Mar 10 '21 at 19:01

score 3 · Answer 5 · answered Dec 05 '20 at 16:07

I think it would be easier to change it in App\Http\Middleware\HandleInertiaRequests.

Be sure to run php artisan inertia:middleware during inertia server-side installation. Also include it in your web middleware group.

Then go to App\Http\Middleware\HandleInertiaRequests and change the $rootView property to the name of the blade file you want to use. Example:

protected $rootView = 'index';

score 3 · Answer 6 · answered Dec 11 '20 at 05:47

Extended @Olu Udeh answer

overwrite handle method of App\Http\Middleware\HandleInertiaRequests middleware

public function handle(Request $request, Closure $next)
{
    if($request->route()->getPrefix() == 'admin'){
        $this->rootView = 'layouts.admin';
    }

    return parent::handle($request, $next);
}

score 1 · Answer 7 · answered Sep 14 '21 at 09:29

In laravel 8 this work for me

App\Http\Middleware\HandleInertiaRequests

Code

public function rootView(Request $request)
{
    if(request()->is('admin/*') or request()->is('admin'))
    {
        return 'admin';
    }

    return parent::rootView($request);
}

Change InertiaJS-Laravel default RootView

7 Answers7

Linked