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 ?
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/