Nuxt: Dynamic head / meta title is undefined on 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)
          }`,
        },
      ],
    };
  },

@TimothyAlexisVass why would it not? I don't use them neither and ESlint does it job perfectly. Also, what do you mean by On generate, the meta tags are there but on ssr not. You do have target: static and ssr: true, right? How can they be there on generate? — kissu
– kissu, Commented May 21, 2021 at 8:47
Yeah, thanks. I might have not expressed it detailed enough. Actually it happens in dev mode. I get data already wih asyncDate. When I export it into static files (via generate --modern) it adds the meta tags correctly. So that is fine. But I am wondering how to archive that in ssr mode? Or will it just work, once I run build? And if not, how to have conditional meta tags, like I want to have them by: seoTitle.length ? seoTitle : title — Ehrlich_Bachman
– Ehrlich_Bachman, Commented May 25, 2021 at 13:25
My first question is still valid. Also, try building your app locally to debug this. — kissu
– kissu, Commented May 25, 2021 at 13:27
Yes @kissu target is statis, ssr is not at all in the config file. (Currently the project is supposed to be static only. But my next project wont be) — Ehrlich_Bachman
– Ehrlich_Bachman, Commented May 25, 2021 at 13:33
ssr: true is the default and with target: static, you should be good. Does it work when you're yarn generate + yarn start, do you see your meta? — kissu
– kissu, Commented May 25, 2021 at 13:52

kissu · Accepted Answer · 2021-12-17 10:37:12Z

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)
  })
},

edited Dec 17, 2021 at 10:37

answered May 21, 2021 at 8:50

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Simpson Over a year ago

if the above doesn’t work out check out stackoverflow.com/questions/70328833/…

Collectives™ on Stack Overflow

Nuxt: Dynamic head / meta title is undefined on ssr

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related