Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

thestevemcniven's avatar

How do you get Data into the Vue files?

Sorry, new user to this...

I have my laravel migrations\data seeded. But just on a HelloWorld level, how do I get that data into the basic Welcome.vue to render on the page? Do I have to make an API route and GET it after the component is created\mounted?

0 likes
2 replies
drehimself's avatar
Level 35

No API routes necessary, that's the beauty of Inertia.

Route::get('/', function () {
    // Laravel way
    // return view('welcome', [
    //     'name' => 'Andre',
    // ]);

    // Inertia way
    return Inertia::render('Welcome', [
        'name' => 'Andre',
    ]);
});

Now, name should be available as a prop in your Welcome.vue page component. Depending on which version of Vue you're using, you can accept the prop and use it anywhere in that component. Here's an example with Vue 3 and script setup.

<script setup>
defineProps({
    name: String,
})
</script>

<template>
  <div>Hello, {{ name }}</div>
</template>

Be sure to checkout the Inertia series here on Laracasts: https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js/episodes/1

As well as the official demo app so you can play around with it: https://inertiajs.com/demo-application

2 likes
thestevemcniven's avatar

Oh my gosh, that’s so elegant. Thank you so much, I’ve been searching everywhere to figure this out.

Please or to participate in this conversation.