1

I am using the net Nuxt boilterplate for NetlifyCMS and it all works good, but I have a hard time figuring out how to set meta description on a blog post.

My _blog.vue template has this

<template>
  <article>
    <h1>{{ blogPost.title }}</h1>
    <div v-html="$md.render(blogPost.body)" />
  </article>
</template>
<script>
export default {
  async asyncData({ params, payload }) {
    if (payload) {
      this.blogPost = payload
      return {
        blogPost: payload
      }
    } else {
      return {
        blogPost: await require(`~/assets/content/blog/${params.blog}.json`)
      }
    }
  }
}
</script>

I can't figure out how to set the

head () {
    return {
      title: blogPost.metatitle,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        { hid: 'description', name: 'description', content: blogPost.metadescription }
      ]
    }
  }

It obviously doesn't work as blogPost is undefined inside the head function. But I'm unsure where to place it, so it blogPost.metadescription has a value.

Morten Hagh
  • 2,055
  • 8
  • 34
  • 66

1 Answers1

0

This worked for me on a Nuxt/Netlify CMS project - note that I'm using Nuxt in conjunction with nuxt/content

async asyncData({ $content, params, error }) {
  const project = await $content('projects', params.slug).fetch()
  return {
    project
  }
},
head() {
  return {
    title: this.project.title,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.project.description
      }
    ]
  }
}

I'm pulling all page content in from markdown files in the standard directory structure: content/projects

At first I was following a similar structure to what you were doing - I added this to the path and it falls into place and from there I can use whichever property is relevant.

redplanet
  • 158
  • 4
  • 17