Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
Yet discovering InertiaJS.
I have a select options VueJS component to include inside a view. When I had only VueJS without InertiaJS, I retrieved the data to fill the options from an API.
Now with InertiaJS, I can do the same way, but there is perhaps another way ?
I thought about this : as InertiaJS can refresh (partially) a component, is there any way to tell InertiaJS to send a query to the backend in order to retrieve the data when the component is loading ?
Thanks for your help.
Vincent
The data should be inside the page response. You can then get it from any component by using usePage()
import { usePage } from '@inertiajs/inertia-vue3'
//in your code
usePage().props.value.foo.bar
Ignore that it says shared data. For some reason it is the only place in the docs that the helper is mentioned. It works with regular data as well. https://inertiajs.com/shared-data#accessing-shared-data
If that isnt a possibility you can still just make a regular ajax request with axios as you would before inertia :) I do this in some places in my app
Thank you @sinnbeck ... what do you mean when you say that the data should be inside the page response ?
Do you mean that I don't have to share the datas like explained in the documentation ?
https://inertiajs.com/shared-data#sharing-data
So how is it possible to put the data inside the page response ? I don't see any other way as passing them like the sessions in return Inertia::render('Sessions/Index', compact('sessions')); so that I can use them as props in VueJS.
@vincent15000 exactly like that yes
return Inertia::render('Sessions/Index', compact('sessions','dataForSomeComponent'));
If you need it on all pages, you can use the shared data method instead
@Sinnbeck Well it's a bit confused in my mind. If I pass the datas like this, I don't need the usePage helper.
But you said : The data should be inside the page response. You can then get it from any component by using usePage(). => I understand that I pass the data to the component and then I can get it from any component.
What you mean is perhaps that if I have already loaded my component, I can then access to its datas via the helper from any other component ?
So the question is perhaps : how is it possible to load a component inside another component ?
@Sinnbeck If I load shared datas, does this mean that a lot of memory will be used ? Or will the data be loaded dynamically from the server when needed in a page ?
@vincent15000 Think of it as blade. Its exactly the same. You pass down data to the page.. That's it.
usePage() just lets your get the data in any component no matter the nesting. Not quite sure what you mean by loading a component inside another? I Assume you are already doing that? Maybe you can already get it in any component without usePage() (I dont use vue myself, but in react you need to either pass it down manually or use usePage())
Only use shared data when you actually need the data on all pages. The user might be a good example. Passing down something you only need in 2 pages is a bad idea (its the same as this https://laravel.com/docs/9.x/views#sharing-data-with-all-views )
@Sinnbeck Ok ... but the only way to pass down data is from the controller to the view, isn'it ?
To display component 1 with component 2 inside component 1, I need to send data to fill component 1 and component 2.
What I try to know is : is it possible to send only data to fill component 1 ? And then to fill component 2, I could use usePage() to retrieve the additional data to fill component 2 ?
@Sinnbeck When I read the documentation again, it is possible to use usePage() only for datas that are already loaded in memory. For example, the example code retrieves the authenticated user from the auth property because this data is already loaded into memory.
but the only way to pass down data is from the controller to the view, isn'it ?
Exactly. Or via shared data (which is the same but for all page)
To display component 1 with component 2 inside component 1, I need to send data to fill component 1 and component 2.
This is where usePage() comes in. As long as the data comes from the controller, you dont need to pass it down.
What I try to know is : is it possible to send only data to fill component 1 ? And then to fill component 2, I could use usePage() to retrieve the additional data to fill component 2 ?
Both are possible. If you find it easier to pass down data, then do that. If you dont want to pass it down use usePage()
datas that are already loaded in memory
usePage() is only for data that comes from the controller/shared data. In other words, data that laravel provides.
But as I said, you can still just use regular ajax to get some extra data in some component.
@Sinnbeck Ok I think I have understood. My datas need always to be sent to the view by the controller, so I cannot send only the datas for component 1, I have to send the datas for component 2 too, if not the datas for component 2 will not be accessible.
return Inertia::render('Sessions/Index', compact('sessions', 'dataForSomeComponent'));
Then I can use these datas in component 1 (props) and in component 2 (usePage()).
// Component 1
<template>
<component-2></component-2>
</template>
Can you confirm it's ok please ? Because it's not easy to understand for me.
@vincent15000 That is correct :) This of the data as page data, not component data. Inertia handles pages not components
@Sinnbeck Ok thank you very much. I will try all this.
Please or to participate in this conversation.