Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
It's an app with Laravel / VueJS / InertiaJS.
I have several Pages / Components which are nested together.
For example :
the training view (page) displays the units list (component) and the courses list (component).
the courses list displays the course modal form (component)
The controller displays the training view, so it sends all datas to the view (training with units and courses). When I open the course form to add / update a course, I send a request to the backend (axios request, not inertia) and I need to refresh the datas (or only a part of the datas, InertiaJS does this very well).
So the course form emits an event to the course list which emits an event to the training view and the training view sends an inertia request to refresh the datas.
I could effectively refresh the datas from the form, but the form is potentially used in other places, so it's not really a good idea to send the inertia request from the form.
I could have a same question in the other direction : the main parent pass a props to its child which passes the same props to its own child, ...
I probably need advice to better structure my VueJS components. I have seen the VueJS videos on Laracast, very useful, but when I have to pratice for a project, I encounter some other problems like child emits to parent emits to main parent, ...
Is there another way to proceed than the one where each child emits an event up to its parent until the main parent is informed and refreshes the datas ?
Thanks for your help ;).
Vincent
Hello @vincent15000, I may be wrong but if what you want is to easily communicate between a child and parent no matter how deep the child is, then I suggest you use Pinia. Then in case you need to persist state while using Pinia, try the package below. https://github.com/prazdevs/pinia-plugin-persistedstate
@kiri1101 Thank you, I effectively already thought about using the VueJS store to share data between components, but here my question was essentially about components nested the one to the others and communicate between them without any store.
What you say is interesting : no matter how deep is the child.
@vincent15000 No qualms, i read through your request again and if i get your question right, you want an efficient way to communicate between a parent and a nested child component. I maintain what i said earlier, you fire an event and save it in Pinia, then directly access this event in the parent. Then from the parent, you inject your data (Object) into Pinia and directly access this data in your child. As simple as that
If it's just two levels communication like the provided example and it's in one place in the app, it's totally fine to do that.
Otherwise you can you use state management like Pinia.
Or, if it's just for sending a request to the server, you can create service file that hold all requests methods and then use that method inside the child component.
@MohamedTammam Ok ... thank you ;). I had a first experience using VueJS store and I abused the store because it wasn't always useful, but it was new for me and I used it for all datas.
Now I wonder if it's useful to use the store ... but I speak about store and you about state ... it's the same, isn't it ?
@vincent15000 what do you mean by "VueJS store", do you mean Vuex?
@MohamedTammam Yes I mean VueX.
@vincent15000 Yes, Vuex and Pinia are both library for state management in Vue
@MohamedTammam Ok ... well ... I rather searched a way to do without a state, but it's probably better to use the state as soon as I need to access datas from several different components. It's another way than passing parameters as props.
Over at the tuto Learn Vue 3: Step by step, Episode 25, Jeffrey mentioned that Pinia is a better option than VueX and it's kinda adviceable to dump VueX altogether
@kiri1101 Thank you, I will have a look ... I have seen the VueJS videos on Laracast, but not yet the episode 25.
@vincent15000 Glad to be of help
Please or to participate in this conversation.