CODEWITHSUNDEEP
wordpressvue.jsnuxt.jsfacebook-opengraph
Nicolas Gruwe
Nicolas Gruwe

Reputation: 25

NuxtJS load component Open graph meta with json response

I'm working on a nuxt.js project, and I have a page loading content (basically a text) from a WordPress post, with an $http request on create() Hook.

I'd like to use the title as og:title meta, but I can't use it since the data is not loaded when the head method is executed.

How can I use the WordPress post title loaded by $http request as a oh:title meta ?

Upvotes: 0

Views: 172

Answers (1)

Riyaz Khan
Riyaz Khan

Reputation: 3268

Don't use the created hook, use the asyncData for the cases where you want to render things from the server-side.

Example code:

async asyncData({$axios, params }) {
    const post = ($axios.get(`/api/posts/${params.id}`)).data
    return {
      post
    }
  }

After that, just use the variable title inside the head() {} that provided by nuxt.js.

Example Code:

head() {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'og:title',
            content: this.post.title,
            property: 'og:title'
          },
        ]
      }
    }

Here is one article, it may help you:

https://dripcoder.com/posts/how-to-add-open-graph-meta-tags-to-your-blog-post-in-nuxtjs/

Upvotes: 1

Related Questions