Level 2
I think you could fix this problem by wrapping the variables in the @json directive but, as an alternative i would suggest you using inertia, with Inertia u have a section dedicated to shared props inside the middleware section, and components will get their props directly from the backend, so u will have your logged in user by default without the need of passing it directly to the app component in your blade.
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Inertia\Middleware;
use Tightenco\Ziggy\Ziggy;
class HandleInertiaRequests extends Middleware
{
/**
* The root template that is loaded on the first page visit.
*
* @var string
*/
protected $rootView = 'app';
/**
* Determine the current asset version.
*/
public function version(Request $request): string|null
{
return parent::version($request);
}
/**
* Define the props that are shared by default.
*
* @return array<string, mixed>
*/
public function share(Request $request): array
{
return array_merge(parent::share($request), [
'auth' => [
'user' => $request->user(),
],
'flash' => function () use ($request) {
return [
'success' => $request->session()->get('success'),
];
},
'ziggy' => function () use ($request) {
return array_merge((new Ziggy)->toArray(), [
'location' => $request->url(),
]);
},
]);
}
}