How to load all server side data on initial vue.js / vue-router load?

Question

I'm currently making use of the WordPress REST API, and vue-router to transition between pages on a small single page site. However, when I make an AJAX call to the server using the REST API, the data loads, but only after the page has already rendered.

The vue-router documentation provides insight in regards to how to load data before and after navigating to each route, but I'd like to know how to load all route and page data on the initial page load, circumventing the need to load data each time a route is activated.

Note, I'm loading my data into the acf property, and then accessing it within a .vue file component using this.$parent.acfs.

main.js Router Code:

const router = new VueRouter({     routes: [         { path: '/', component: Home },         { path: '/about', component: About },         { path: '/tickets', component: Tickets },         { path: '/sponsors', component: Sponsors },     ],     hashbang: false });  exports.router = router;  const app = new Vue({     router,     data: {         acfs: ''     },     created() {         $.ajax({             url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',             type: 'GET',             success: function(response) {                 console.log(response);                 this.acfs = response.acf;                 // this.backgroundImage = response.acf.background_image.url             }.bind(this)         })     } }).$mount('#app') 

Home.vue Component Code:

export default {     name: 'about',     data () {         return {             acf: this.$parent.acfs,         }      }, } 

Any ideas?

Answer 1

My approach is to delay construction of the store and main Vue until my AJAX call has returned.

store.js

import Vue from 'vue'; import Vuex from 'vuex'; import actions from './actions'; import getters from './getters'; import mutations from './mutations';  Vue.use(Vuex);  function builder(data) {   return new Vuex.Store({     state: {       exams: data,     },     actions,     getters,     mutations,   }); }  export default builder; 

main.js

import Vue from 'vue'; import VueResource from 'vue-resource'; import App from './App'; import router from './router'; import store from './store';  Vue.config.productionTip = false;  Vue.use(VueResource);  Vue.http.options.root = 'https://miguelmartinez.com/api/';  Vue.http.get('data')   .then(response => response.json())   .then((data) => {     /* eslint-disable no-new */     new Vue({       el: '#app',       router,       store: store(data),       template: '<App/>',       components: { App },     });   }); 

I have used this approach with other frameworks such as Angular and ExtJS.