Як передати дані з контролера Laravel у Vue-сторінку через Inertia::render?

Inertia::render() приймає назву компонента сторінки й масив props - даних, які отримає компонент.

use Inertia\Inertia;

public function show(Post $post)
{
    return Inertia::render('Posts/Show', [
        'post' => PostResource::make($post->load('author')),
        'comments' => $post->comments()->latest()->limit(20)->get(['id', 'body', 'created_at']),
        'canEdit' => request()->user()?->can('update', $post) ?? false,
    ]);
}

<script setup>
const props = defineProps({
  post: Object,
  comments: Array,
  canEdit: Boolean,
});
</script>

<template>
  <h1>{{ post.title }}</h1>
  <button v-if="canEdit">Редагувати</button>
</template>

Як перетворюються дані:

• моделі й колекції - через toArray() (з урахуванням $hidden і $appends);
• API Resources - через toResponse(), тож PostResource дає контрольований формат;
• замикання (fn () => ...) обчислюються лише тоді, коли prop справді потрібен (часткові перезавантаження);
• назва компонента може бути backed enum - для типобезпечних посилань на сторінки.

Головне правило безпеки: усі props видно в браузері. Вони потрапляють у JSON сторінки, який будь-хто бачить у вихідному коді чи вкладці Network. Модель, передана цілком, віддасть усі свої поля: email, телефон, службові прапорці, хеш токена, якщо його забули сховати.

Тому:

• передавати лише потрібні поля: ->only(['id', 'name']), get(['id', 'title']) чи API Resource;
• не покладатися на те, що «Vue це не показує» - не показаний у шаблоні prop все одно є в JSON;
• права передавати готовими булевими значеннями (canEdit), а перевіряти - на сервері в кожній дії.

Сторінка без контролера: Route::inertia('/about', 'About').

Докладніше в документації: Inertia: відповіді