Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating meta related data just after hydration is ignored #224

Closed
ktsn opened this issue Jun 7, 2018 · 5 comments
Closed

Updating meta related data just after hydration is ignored #224

ktsn opened this issue Jun 7, 2018 · 5 comments
Labels

Comments

@ktsn
Copy link

@ktsn ktsn commented Jun 7, 2018

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
Copy link

@Ovyerus Ovyerus commented Jun 18, 2018

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 Atinux self-assigned this Jul 5, 2018
@Atinux
Copy link
Member

@Atinux Atinux commented Jul 5, 2018

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
Copy link

@Lord-Y Lord-Y commented Aug 7, 2018

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
Copy link
Member

@pimlie pimlie commented Mar 7, 2019

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
Copy link
Member

@pimlie pimlie commented Apr 20, 2019

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

@pimlie pimlie closed this Apr 20, 2019
@Atinux Atinux removed their assignment Jul 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants