How set uploaded avatar in this.$page.props.user with inertiajs?

In Laravel 8 app with inertiajs/inertia-vue 0.7/vuejs2 with fortify (but without jetstream)

I use "spatie/laravel-medialibrary": "^9.9" for avatar uploading like

$loggedUser = auth()->user();
$avatar_file_path = $avatarImageUploadedFile->getPathName();
$loggedUser->addMedia( $avatar_file_path )->toMediaCollection('avatar');

and it works, but in which way can I use avatar in on client part when I use

this.$page.props.user

in vue components properties to check which user is logged and show his info?

Thanks!

You can do this with the 'Shared data' feature via the HandleInertiaRequests middleware.

For example, to share user info you can do the following:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'user' => function () {
                return Auth::user() ? [
                    'id' => Auth::user()->id,
                    'name' => Auth::user()->name,
                    'email' => Auth::user()->email,  
                    // get path to avatar
                    'avatar' => Storage::url('avatar-of-the-user.jpg'),
                ] : null;
            },
        ]);
    }
}

Client side you can then access the avatar's URL with this.$page.props.user.avatar.