Updating meta related data just after hydration is ignored

[ktsn]

Looks like vue-meta ignores the update for data that will affect meta info when it is just after SSR hydration.

Example:

export default {
  metaInfo () {
    return {
      meta: [
        {
          vmid: 'description',
          name: 'description',
          content: this.mounted
            ? 'updated'
            : 'not updated yet'
        }
      ]
    }
  },

  data () {
    return {
      mounted: false
    }
  },

  mounted () {
    this.mounted = true
  }
}

In the above example, it is expected that the meta[name="description"] has content updated but it actually be not updated yet.

The complete reproduction is here (using Nuxt): https://github.com/ktsn/vue-meta-repro

I briefly looked into the code and seems that the issue is caused by batchUpdate - since It delays the actual update to DOM by requestAnimationFrame, it accidentaly treats normal data update as SSR hydration phase.

Workaround is wrapping the data update with requestAnimationFrame so that it will be processed after hydration phase. But it seems a little hacky.

mounted () {
  requestAnimationFrame(() => {
    this.mounted = true
  })
}

I guess this is a bit hard problem to solve 😞 . Maybe we should state about this behavior in the docs?

[Ovyerus]

I'm experiencing this as well (I think, could be something else) when trying to set htmlAttrs with a value from Vuex that gets hydrated on the client side.

[atinux]

Well actually I am not the author of this doc but if you could help me on it @ktsn it would be great.

Please mention me so I can receive an email when you answer.

[Lord-Y]

Same thing for me and the title part is also weird. In the browser I can see the right title when the webpage is fully loaded but when you check the page html code, you'll see the old title. Here's the code:

metaInfo() {
  return {
    title: this.meta.title,
    meta: [
      { vmid: "description", name: "description", content: this.meta.description }
    ]
  }
},
data() {
  return {
    meta: {
      title: "Page title",
      description: "Yolooo"
    }
  }
},
mounted() {
  this.meta.title = "New page title"
}

In my template file,I'm using

{{{ meta.inject().title.text() }}} {{{ meta.inject().meta.text() }}}

[pimlie]

This seems to be resolved by the fix for issue #283 which just forces vue-meta to run once when the page has loaded

[pimlie]

Closing as changes for this issue are included in the v2 release candidate. Please help us testing the release candidate and report any follow-ups in a new issue