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

1 min read

環境

状況

こういった形で 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.

解決方法

targetstatic からデフォルトの server へ変更した。

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

Next Read

[Nuxt.js] nuxt generateのパフォーマンスを改善させる方法

背景 / nuxt-generate-cluster / 結果 / 追記

[Nuxt.js] hard-source-webpack-plugin導入時のエラー対処法

どんな問題が起きたか / 解決方法 / まとめ