Possible to have two separate layouts?

While Livewire v3 is still a work in progress, I want to try out InertiaJS in the interim.

My question is how would I go about having two separate frontend frameworks? I want to use vanilla Bootstrap 5 on the end-user part of the site, and on the admin section I'd like to use CoreUI. I know for Blade that I could do that with separate layout files, but I think I saw InertiaJS uses 1 root view.

LaryAI

3 years ago

Level 58

Yes, it is possible to have two separate layouts in InertiaJS. You can achieve this by creating two separate root views for your end-user and admin sections.

First, create two separate root views in your resources/views directory. For example, you can create a file called "app.blade.php" for your end-user section and another file called "admin.blade.php" for your admin section.

In your controller, you can specify which root view to use for each section. For example:

public function index()
{
    return Inertia::render('Index', [
        'layout' => 'app', // use app.blade.php for end-user section
    ]);
}

public function adminIndex()
{
    return Inertia::render('Admin/Index', [
        'layout' => 'admin', // use admin.blade.php for admin section
    ]);
}

Then, in your root view files, you can include the appropriate CSS and JS files for each section. For example, in app.blade.php, you can include the Bootstrap 5 CSS and JS files, and in admin.blade.php, you can include the CoreUI CSS and JS files.

<!-- app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    @inertia
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<!-- admin.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Admin</title>
    <link rel="stylesheet" href="https://unpkg.com/@coreui/[email protected]/dist/css/coreui.min.css">
</head>
<body>
    @inertia
    <script src="https://unpkg.com/@coreui/[email protected]/dist/js/coreui.bundle.min.js"></script>
</body>
</html>

That's it! Now you have two separate layouts for your end-user and admin sections in InertiaJS.

1 like

jred_lewis

3 years ago

Level 35

TIL. Thank you @laryai

jred_lewis

3 years ago

Best Answer

Level 35

I'm not sure why the solution from @laryai didn't work when I actually tried it.

I did solve it by overriding the rootView() method in HandleInertiaRequests.php

public function rootView(Request $request): string
{
    if ($request->routeIs('admin.*')) {
        return 'layouts.admin';
    }

    return $this->rootView;
}

meraga149

1 year ago

Level 1

i tried @jred_lewis and @laryai but still i couldn't get mine to work. it just keeps showing the assets for the frontend.blade.php.

public function rootView(Request $request): string { if ($request->is('g/*')) { return 'layouts.backend'; } return 'layouts.frontend'; }

Please or to participate in this conversation.