Vue.js Create Menu Querying Database

- 1 answer

based on the following VueSchool tuto I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.

For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...

I have a main.js an App.vue and a MenuApp.vue component for displaying the menu. My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.

Is there a way to load and init properly all data before displaying my vue.js menu component ???

Or could I reload my menu component after the mutation ?

Thanks for help ;-)



You could use a "loading" layout, before load the main layout. From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.

From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.