Pass variable from the back end Take our team members and create a php array (i've added in Shirley here). Pass and array of properties in after the view we want to render.

Route::get('/team', function () {
    $teamMembers = [
        [
            'name' => 'Alan Shore',
            'email' => '[email protected]',
            'title' => 'Associate',
        ],
        [
            'name' => 'Denny Crane',
            'email' => '[email protected]',
            'title' => 'Senior Partner',
        ],
        [
            'name' => 'Shirley Schmidt',
            'email' => '[email protected]',
            'title' => 'Senior Partner',
        ],
    ];

    return Inertia::render('Team', ['teamMembers' => $teamMembers]);
});

Update our Vue

This is a simple update, just remove our previously hardcoded data and add in the props we want to accept and thats all we need to do.

props: ['teamMembers']

Check our output again All we should see is our new team member.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4152d1d4-c77a-48a7-bd4b-40ca17a8b705/4._Inertia_Full_Team.png

Closing Remarks

The data we pass back can come from anywhere. I've just hard coded that for an example. You will ideally get it from your database and you can pass multple properties back as well.

$teamMembers = Team::all();
$projects = Project::due()->active();

return Inertia::render('Team', [
	'teamMembers' => $teamMembers,
	'projects' => $projects
]);

I hope you find this useful and if you have any queries or comments @ me on twitter @PierceMcGeough