vue-meta

vue-meta copied to clipboard

A beforeChange hook would be super useful. Right now I'm using the following code in my app to set og and twitter meta properties equal to the title/description. Seems to work fine with the downside that it calls twice each update, as setting the data properties within the changed() function causes it to update again. If we had a beforeChange where we could manipulate info, it would be a lot cleaner. Thanks!

  metaInfo () {
    return {
      title: 'Home',
      titleTemplate: '%s | My App',
      meta: [
        { vmid: 'og:title', name: 'og:title', content: this.title },
        { vmid: 'twitter:title', name: 'twitter:title', content: this.title },
        { vmid: 'description', name: 'description', content: this.description },
        { vmid: 'og:description', name: 'og:description', content: this.description },
        { vmid: 'twitter:description', name: 'twitter:description', content: this.description }
      ],
      changed: (info) => {
        this.title = info.titleChunk
        this.description = info.description || 'some default description'
      }
    }
  },
  data () {
    return {
       this.title: '',
       this.description: ''
   },
}

and then in other components:

  metaInfo: {
    title: 'Page Title',
    description: 'page description.'
  },

with a beforeChange hook I could do something like this instead, and it wouldn't render multiple times:

  metaInfo () {
    return {
      title: 'Home',
      titleTemplate: '%s | My App',
      beforeChange: (info) => {
        info.meta = [
          { vmid: 'og:title', name: 'og:title', content: info.title },
          { vmid: 'twitter:title', name: 'twitter:title', content: info.title },
          { vmid: 'description', name: 'description', content: info.description },
          { vmid: 'og:description', name: 'og:description', content: info.description },
          { vmid: 'twitter:description', name: 'twitter:description', content: info.description }
        ]
      }
    }
  },