I'm looking at creating an mvc app with vue js with 'mini spas'.
Each page would be a mini spa.
I'd like to know how best to get data onto the page.
should the controller action render empty views with no model, then in vue call a web api to fetch the model and assign to data - is this the correct way to load a page seems like an extra request is required?
First of all, I highly advice against using one SPA per page. I've actually worked in a project that used that approach and it's been a nightmare for frontend developers to maintain on the long run. There are two ways you can and should use vue and the "mini SPA" approach is the worst of both worlds.
You can either
Use vue to only render single components for interactivity and let your backend framework do the rest of the rendering and data gathering and pass that data via static property bindings to the used components.
Or use vue as a SPA that communicates asynchronously with an backend api. In either of these cases you have a clear seperation of concerns, which you'll lose when doing 'mini SPAs'.
If you still chose to do it: pretty much the only way is what you've already mentioned, with your backend controller returning one compound vue component that renders the rest of the page and uses asynchronous calls to fill itself with data. Le me say it again though: This will be a nightmare when it comes to state management and maintainability.
In my opinion, the cleanest way to go is seperate frontend into a vue SPA with vuex as state management and backend into an HTTP (REST) API.
