Nuxt.js: Duplicated meta tags on SSR

[gnuletik]

Version

v2.2.0

Reproduction link

https://github.com/gnuletik/nuxt-duplicate-meta

Steps to reproduce

Here is how to reproduce from the official template:

In layouts/default.vue

<script>
let tags = {
  meta: []
}

export default {
  name: 'app',
  head () {
    tags.meta.push({
      property: 'og:url',
      content: this.$router.history.current.path,
      hid: 'metaogurl'
    })
    return tags
  }
}
</script>

Then, refresh your pages several times or navigate through some pages.

In your browser's console, run:

document.querySelectorAll('meta[property="og:url"]')

1: <meta data-n-head="true" property="og:url" content="/" data-hid="metaogurl">​
2: <meta data-n-head="true" property="og:url" content="/" data-hid="metaogurl">
3: <meta data-n-head="true" property="og:url" content="/" data-hid="metaogurl">

The meta tag is duplicated.

I fixed it by making a copy of the arrays instead of pushing into it:

In src/layouts/default.vue

  head () {
    let tags = this.cms.tags() // Or whatever you use
    // clone is required to avoid duplicates
    let clone = {
      htmlAttrs: Object.assign({}, tags.htmlAttrs),
      link: tags.link.slice(0),
      meta: tags.meta.slice(0)
    }
    clone.meta.push({
          property: 'og:url',
          content: this.$router.history.current.path,
          hid: 'metaogurl',
    })
    return clone
  }

I don't know if this should be fixed by nuxt or vue-meta.

What is expected ?

Non duplicated meta tags

What is actually happening?

Duplicated meta tags

Additional notes

This bug report is a duplicate of https://cmty.app/nuxt/nuxt.js/issues/c2521 as the comments in this post are not anymore reported back to github.

_{This bug report is available on Nuxt community (#c8094)}

[manniL]

This is no a bug.
(Repro: https://codesandbox.io/s/527zv3no7k)

However:
As you define state outside of the component it will be persisted through every server-side rendering. You definitely should avoid doing that. instead, you might want to use VueX or similar.

[cmty[bot]]

This bug-report has been cancelled by @manniL.

[gnuletik]

I totally understand that the state is persisted through every server-side rendering.
However vue-meta shouldn't remove duplicates of meta entries who have the same hid ?

[manniL]

Whoops. You are right, if you set duplicates on SSR it won't clear them there (updated my sandbox). Investigating

[manniL]

I can confirm this only happens on SSR, not in SPA mode or on CSR.

[manniL]

So, after testing it with vue-meta itself (simple test case here) it looks like that functionality is not supported by vue-meta. Only information that are dupes in child components will be merged.

Please create an issue in the vue-meta repository or filter your info directly in your component.

[gnuletik]

Thanks for investigating !

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.