Inertia, pass simple props ?!?

I heard so much hype about Inertia, and I said let's try it, but I was immediately frustrated

I have an error artists is not defined

Route::get('/', function () {

    $artists = Http::get('https://foo.api ...

    //dd($artists); and there is array of data

    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'artists' => $artists,
    ]);
});

<script setup>
import { Head, Link } from '@inertiajs/vue3'

defineProps({
    canLogin: {
        type: Boolean
    },
    canRegister: {
        type: Boolean
    },
    artists: {
        type: Array
    }
})

console.log(artists)
</script>

ramonrietdijk

2 years ago

Level 30

You should assign your props to a variable in order to use them within the script tag. This is not required in the template itself. See the Vue documentation for more information.

<script setup>
import { Head, Link } from '@inertiajs/vue3'

const props = defineProps({
    canLogin: {
        type: Boolean
    },
    canRegister: {
        type: Boolean
    },
    artists: {
        type: Array
    }
})

console.log(props.artists)
</script>

Please or to participate in this conversation.