[SOLVED] Inertia Vue 3 - Vue component not receiving props

Inertia Vue 3 - Vue component not receiving props

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?

Solution

As per the documentation here, the properties are returned from the function call.

On a sidenote: always group imports together.

This should work:

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
import Nav from "../Components/Nav.vue";
import Header from "../Components/Header.vue";
import Content from "../Components/Content.vue";

const props = defineProps({
    users: {
        type: Array,
    },
});
console.log(props.users);
</script>