How to define article properties like meta tags for SEO?

Hi!

I have developed a blog with nuxt and vue-meta with a database solution, so I ask for every meta tags for each page. But this git-based solution is very elegant and simple.

I would like to know which is the right mechanism for share meta info between content articles and component head method.

After reading nuxt/content docs I tried defining meta info like author near to title property like this:

// content/home.md
---
title: Home
author: Juan Manuel López Pazos
---

# Welcome to my blog

Then I load that info in asyncData method:

// views/_slug.vue
async asyncData ({ $content, params }) {
    const articles = await $content('articles').fetch()

    const path = params.slug ? `articles/${params.slug}` : 'home'
    const doc = await $content(path).fetch()

    return {
      articles,
      doc
    }
  },

And finally use doc.author property as author meta tag in head method:

// views/_slug.vue
head () {
  return {
    title: this.doc.title,
    meta: [
      {
        hid: 'author',
        name: 'author',
        content: this.doc.author
      }
    ]
  }
}

This solution works and the author meta tag is added to document. However I don’t know if this is the right and cleaner way.

In case that this solution is right, I think properties section in .md files can turned into a garbage. Is developer’s responsibility to keep it clean? Or is nuxt/content going to offer a more sophisticated mechanism for this stage?

Thank you so much.

[pablomuro]

Hi guys, I found a “solution”, since we like to just read the data from the article variable you can use the ‘$data’ object from the ‘this’ vue instance

description: this.$data.article.description,

[jessequinn]

@jackdomleo7 i also ran into this error with TS.