Is there a way to reference MetaInfo in layouts for Gridsome?

Question

Using Gridsome, I want to reference any given page's MetaInfo like the following in the layout component:

 <h1 class="page-title">
   {{ metaInfo.title }}
 </h1>

In the page I do have the metaInfo defined like this (and that does fill the head correctly)

export default {
  metaInfo: {
    title: 'About'
  }
}

Answer 1

You must change your metaInfo Object to a function and return the title object.

Try this:

<h1 class="page-title">
  {{ $metaInfo.title }}
</h1>

And in your export default use this:

metaInfo() {
  return {
    title: 'About'
  };
}