How to individually set title and meta descriptions for dynamic pages in NuxtJS

You will probably already have page titles and meta descriptions hard coded in either your nuxt.config.js file or views. And may be wondering how you can give access to a CMS user to set these titles and descriptions themselves as well as setting those tags in your views, especially for dynamic pages such as blog posts.

I’m going to focus on showing how to set titles and meta descriptions for individual blog posts. If you are using Netlify CMS like me then here is an example of what I place in the config.yml for my blog collection post fields, I do use this for pretty much every view. You could build upon this to include other meta tags as you wish.

- label: "SEO"
  name: "seo"
  widget: "object"
  collapsed: true
  summary: '{{fields.title}}: {{fields.description}}'
  fields:
    - { label: "Page Title", name: "title", widget: "string" }
    - { label: "Page Description", name: "description", widget: 'markdown' }

You will probably already have something similar to the following in your _post.vue file to retrieve the correct data for the post that matches the URL param.

async asyncData({ params, payload }) {
  if (payload) return { post: payload };
  else
  return {
    post: await require(`~/assets/content/posts/${params.post}.json`)
  }
}

In the data I am setting the post variable.

data () {
  return {
    post: {}
  }
}

Lastly, in the head I am retrieving the title and description that I had set in the CMS for the blog post seo field. That is all to it, really simple, straightforward thing to set up.

head() {
  return {
    title: this.$data.post.seo.title,
    meta: [
      {
        hid: 'post-desc',
        name: 'description',
        content: this.$data.post.seo.description
      }
    ]
  }
}

The only thing that is slightly different in other views is retrieving the seo field data. In the data I’d only set the seo variable.

data () {
  return {
    seo: {}
  }
}

In the created hook I am calling a getSEO method.

created() {
  this.getSEO();
}

Finally, within the getSEO method, I am retrieving the seo field data for the relevant page and setting the seo variable.

methods: {
  getSEO() {
    this.seo = this.$store.state.allPages.filter(page => page.slug == 'blog')[0].seo;
  }
}

Then I would be getting the data from the seo variable like so

title: this.$data.seo.title