Meta plugin - dynamic properties



  • Hi,

    I’m trying to use meta plugin to dynamically inject description and title from components.
    For both of these there are additional meta tags that should get the same values:
    og:title, og:description, twitter:title, twitter:description
    I would like to define in the layout component that og:title (as example) should be the same as the title, and in the page component I just want to override the title itself.
    E.g.

    // MainLayout.vue
    <script>
    export default {
      meta () {
        return {
          title: ' My awesome site',
          meta: {
            ogTitle: { name:'og:title', content: this.meta.title }
          }
        }
      }
    }
    </script>
    
    // Page1.vue
    <script>
    export default {
      meta () {
        return {
          title: ' Page 1',
        }
      }
    }
    </script>
    

    This doesn’t work because this.meta is undefined while I’m still running meta() function.
    How can I make og:title tag match title tag that is defined on each page, without repeating its definition on each page?



  • The meta plugin will override the properties with the same name up the DOM heirarchy. You don’t need to do the overriding. You will however, need the meta method in each component defining the title. And, you’ll need to define in your components the data element (for reactivity/ dynamic values) of the meta prop. So:

    data () {
      return {
        title: 'some title'
      }
    }
    

    Scott



  • Thanks for the answer. But I think it’s not exactly what I’m looking for.
    In your solution I’d still have to define the meta tag og:title in each page, right?
    I.e

    meta () {
        return {
          title: this.title,
          meta: {
            ogTitle: { name:'og:title', content: this.title }
          }
        }
      }
    

    I was looking for a way that the pages will not have to define og:title at all.
    The reason is that there are many such social meta tags, and I don’t want to repeat their template on each page. og:title is just one example



  • @danbars said in Meta plugin - dynamic properties:

    I was looking for a way that the pages will not have to define og:title at all.
    The reason is that there are many such social meta tags, and I don’t want to repeat their template on each page. og:title is just one example

    maybe mixins will help you:

    https://vuejs.org/v2/guide/mixins.html

    … and router meta fields:

    https://router.vuejs.org/guide/advanced/meta.html



  • Or Vuex…

    Scott



  • @qyloxe @s-molinari - good ideas, thanks. I will check these directions.


Log in to reply