Shouldn't Nuxt update Vuex state before rendering and returning a page?

Question

Need some clarity regarding Vuex and SSR here. Don't know what concept I'm not getting right since this is my first time working with SSR. I'm trying to create breadcrumbs for my application using the store. The concept is that the parent component will show the breadcrumbs and children components will set the breadcrumbs in the store. Now, whenever the server renders, it is only rendering the initial state of the breadcrumb and only updating after hydration, resulting in wrong breadcrumbs for a few seconds.

In pseudocode:

Parent.vue

<template>
  <div>
    <div>{{ $store.breadcrumbs }}</div>
    <child />
  </div>
</template>

Child.vue

created() {
  console.log("Component created)
  $store.setBreadcrumbs("This / is / a / test / breadcrumb")
}

Shouldn't the parent component only render after all children have been created? How does that lifecycle work and how can I guarantee that the parent will be updated before sending the response from the server?

Edit:

Created an example that shows the behavior https://codesandbox.io/s/vuex-module-test-dmoe6?file=/pages/index.vue

You can see that the state userName is only updated after a few moments showing "NoName" the initialized state value before updating it to JohnDoe.

Answer 1

• Add wrapper for parent and child as templates must have a single root element.
• Yes, parent should be mounted after all children were created.
• Parent-child lifecycles
• Try to use getter instead of directly calling store