i want to pass users from Inertia render to vue component:
routes/web.php
Route::get('/', function () {
return Inertia::render('Dashboard',['users'=> DB::table('users')->get()]);
})->middleware(['auth', 'verified'])->name('dashboard');
i recieve users as props in my vue component:
resources/Pages/Dashboard.vue
<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
defineProps({
users: {
type: Array,
},
});
console.log(users); //error
import Nav from "../Components/Nav.vue";
import Header from "../Components/Header.vue";
import Content from "../Components/Content.vue";
</script>
<template>
<Head title="Dashboard" />
<AuthenticatedLayout>
<template #header>
<Header />
</template>
<template #nav>
<Nav />
</template>
<template #content>
<Content />
</template>
</AuthenticatedLayout>
</template>
however Dashboard component doesn't receive users, it gives me error Uncaught (in promise) ReferenceError: users is not defined, why is that happening?
As per the documentation here, the properties are returned from the function call.
On a sidenote: always group imports together.
This should work: