Nuxt：动态头部/元标题在 ssr 上未定义

Question

I have a nuxt project, where the meta title and description comes (from nuxt/content). The async fetch for the data is made in index and received in a sub component via a getter.

On generate, the meta tags are there but on ssr not:/

I tried it with async and await, but I still get the error "Uncaught (in promise) TypeError: seoTitle is undefined".

(I tried it with a useless await this.getArticle const, in hope that the whole thing waits, this stuff is there, but no)

Here my code:

 async head() {
    const article = await this.getArticle
    const seoTitle = await this.getArticle.seoTitle,
      title = await this.getArticle.title,
      seoDescription = await this.getArticle.description

    return {
      title: `"${
        seoTitle.length ? seoTitle : title
      }"`,
      meta: [
        {
          hid: "description",
          name: "description",
          content: `${
            seoDescription.length
              ? seoDescription.slice(0, 50)
              : seoDescription.slice(0, 50)
          }`,
        },
      ],
    };
  },

Answer 1

To my knowledge, you cannot use async on head because it is usually using some static values.

And looking at this github answer , it looks like you can use asyncData to have access to the values you want to input in head .

head() {
      return { title: this.info.title }
},
async asyncData ({ params }) {
    return axios.get(`/post/${params.id}/info`)
      .then((res) => {
        return {
          info: res.data.info
        }
      }).catch((err) => {
        console.log(err)
  })
},