How to add custom HTML inside <div id="app"></div>?

[sarukomine]

I would like to add the HTML element inside <div id="app"></div>, e.g. loading element like this:

<div id="app" data-page="...">
    <div id="loading">
        <!-- ... -->
    </div>
</div>

So it will start showing loading until the Vue app is ready. Any way to do that?

[hdwong]

You can define your blade directive yourself, and use it instead of @inertia in file app.blade.php.

@see web\vendor\inertiajs\inertia-laravel\src\Directive.php
@see https://laravel.com/docs/10.x/blade#extending-blade