零弐壱蜂

[Nuxt.js] asyncDataの値をhead()から取得するとundefinedになる問題

環境

状況

こういった形で head() から this.post.title を参照する。

{
  async asyncData() {
    // データをAPI経由で取得する
    const data = await fetch('https://example.com/postdata').then(response => response.json());

    return {
      post: { title: data.title },
    };
  },
  head() {
    return {
      title: this.post.title,
    };
  }
}

nuxt (yarn dev) では問題ないが、nuxt generate で出力すると下記のようにアクセスができない。

this.post.title is undefined.

解決方法

target を static からデフォルトの server へ変更した。

// nuxt.config.js
export default {
  target: 'server',
};