Trying to set Vue Meta page title using string + variable

Question

I'm using Vue Meta as part of a blog application within a project using Nuxt JS 2.4.5

I'm having some trouble trying to set the title + a variable from data () and I'm not sure what I'm missing

I've tried multiple attempts at getting it to work, moving code around, using this setting it manually, nothing seems to work...

<script>
import BlogsFromJson from '~/static/articles/blogs.json';

export default {
  head: {
    title: 'My Website: Blog: ' + this.myBlogTitle, // or something else
    meta: [
      { hid: 'description', name: 'description', content: 'Read the latest news and articles from Flex Repay UK.' }
    ]
  },
  data () {
    return {
      title: this.$route.params.title,
      blog: BlogsFromJson,
      myBlogTitle: 'some title'
    }
  }
}
</script>

I've tried setting a variable within data () and using it statically.

Doing this should give me My Website: Blog: some title

What could I be missing here?

Answer 1

Try to use function instead of object for head. Change

head: {
  ...
},

to

head () {
  return {
    ...
  }
}