[2660] How to properly initialize app under SPA mode?

Also posted there: https://github.com/nuxt/nuxt.js/issues/1768#issuecomment-358845534

I have an initialization issue using Nuxt on SPA mode.

Context

I have initialization in layout default.vue and pageindex.vue. In default.vue, I load from the server all the global information used by all pages, then each page should load its own specific information.

The thing is that index.vue page needs the data from default.vue loaded before loading itself. On SPA mode, the ways to load I am aware of are the following:

1. middleware (executes on each routing AND first load (SPA mode specificity))
2. plugins (execute once before app loads)
3. fetch (to init $store with server data, has to be on a page, called before Vue creates the component)
4. asyncData (to init data with server data, has to be on a page, called before Vue creates the component)

That's it. Correct me if I am wrong.

Question

How do I load global app data FIRST and specific page data THEN?

Now the problem is: 1. I don't want to load my app global information on each routing obviously, so out of my way. 2. Yes that should work! But I feel weird loading store global information from here... Isn't it supposed to be used for external libraries? Caution: Actually doesn't work, plugins are called before middlewares. I have an auth middleware, so no server call goes through in my plugins. 3. Yes, but no. It would work if I could fetch on default.vue(layout) and use beforeCreate on pages, but it's exactly the opposite of what is available. I can only call fetch on a page, not on a layout. And I need a global load for each page, whatever which page is requested first by the user (F5 use case). So I need something above the page load, to get application state and page state. 4. Nop, I want to load the store initial states.

More (After some trials and thoughts)

I first thought that under universal mode (instead of SPA), you'd use a middleware to load your data on the server side. And it seems like under spa mode, plugins comes first to mind...

The problem with this idea: I want to load once and for all. A middleware is going to be executed on each routing, for SPA or universal mode. How am I supposed to load only once my store initial state? Specify the middleware on a page? Yes, but that doesn't work! I need something before any page loads and for any first load, whichever the page requested.

Maybe I am doing too many things in my layout and I should load everything outside of it. I don't really use layouts. I only have the two default ones: default.vue and error.vue. I'm not a fan of it, I feel it is an unnecessary layer that is only useful to avoid repeating the Navbar component on every page.

I am thinking of storing any store action promises in the store so that I can do something like: this.$store.state.auth.onLoad.then(), so I can wait for a Vuex module to be loaded before loading more. Or init the app on a global middleware and each store module should have a boolean alreadyLoaded... But I am thinking Nuxt should have a solution to this.

Maybe I am misunderstanding something. Any help/thoughts is appreciated ! :wink: