How to load all server side data on initial Vue.js or Vue Router load?

Sometimes, we want to load all server side data on initial Vue.js or Vue Router load.

In this article, we’ll look at how to load all server side data on initial Vue.js or Vue Router load.

How to load all server side data on initial Vue.js or Vue Router load?

To load all server side data on initial Vue.js or Vue Router load, we can run the initialization code in the beforeCreate hook.

For instance, we write

<script>
//...
export default {
  //...
  beforeCreate() {
    store.dispatch("initialize", comms);
  },
  //...
};
</script>

to call store.dispatch with the 'initialize' action and load all the initialzation code in the iniitlaize action.

store is a Vuex store.

Conclusion

To load all server side data on initial Vue.js or Vue Router load, we can run the initialization code in the beforeCreate hook.