Vue-meta: Is there any way to get data from vue-meta?

[Bigdragon13th]

This might be stupid question, but I can't find anyone mention it.

Is there any way to get data from vue-meta and display on template?
My scenario is I'm using nuxt and head() method (which using vue-meta) to display the title on browser. This is done from my page component. Now, in my layout component, I have to display the same information on it as a title of the page, can I somehow sync that data together?

Example Codes:
MyPage.vue

<template>
<!-- nothing fancy here -->
</template>
<script>
export default {
  layout: 'myLayout',

  head() {
    return {
      title: this.categoryDetail.title,
    };
  },
}
</script>

myLayout.vue

<template>
  <div id="app" class="app">
    <h1>{{ /* I want to display title here */ }}</h1>
    <div class="page-container">
      <nuxt />
    </div>
  </div>
</template>

[pimlie]

You can use the changed callback to keep track of the latest meta info used (and thus the title).

This might trigger a re-render of your title tag on any meta info change though, if so pass it trhough a computed prop first.

[Bigdragon13th]

@pimlie Thank you! Your method seems to work, but I cannot get my data to update from the changed callback. I don't know why.

This is my current code.

head() {
  return {
    changed(info) {
      this.title = info.title;
      console.log(info, info.title); // This works fine
    },
  };
},
data() {
  return {
    title: '',
  };
},

If I console.log both info.title and this.title in changed function, it works fine, but the title I updated in there doesn't update on template.

[Bigdragon13th]

Okay, after investigation, it seem like Nuxt done something behind the scene, and it bind this context inside changed with the newInfo. Change it to arrow function make it works.

changed: (info) => {
  this.title = info.title;
  console.log(info, info.title);
},

[Bigdragon13th]

Although this method work on client-side, it's not working when render from server-side :(

[pimlie]

That could be because server-side there is no reactivity: https://ssr.vuejs.org/guide/universal.html#data-reactivity-on-the-server

[kvanska]

How can I get the "final" version of the title on server and client side? If I set

nuxt.config.js:

head: {
    titleTemplate: '%s - mywebsite'
}

pages/index.vue

mounted() {
    console.log("page mounted", { metaTitle: this.$metaInfo.title, documentTitle: document.title })
},
head() {
  return {
    title: "first page"
  }
}

console:

{
  documentTitle: "first page - mywebsite",
  metaTitle: "first page"
}

I want to send GTM event with page title on every page. Not sure if the document.title is the right way to go or if there's a way to get current (full) title for example from the store?

[stale[bot]]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.

[Zzombiee2361]

Okay, after investigation, it seem like Nuxt done something behind the scene, and it bind this context inside changed with the newInfo. Change it to arrow function make it works.

This is not Nuxt specific issue. I'm not using Nuxt and the same thing happened, but unfortunately using arrow function set this to undefined. Vue meta should bind this to the vue instance