[Nuxt.js] asyncDatahead()から取得すると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",
};

このページをシェアする

関連記事

[Vue.js] Vuexの使い方を知る

Flux のアーキテクチャを知る / Vuex とは / Vuex の構成要素とデータの流れ / Vuex 使用所管

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

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

稼働中のWordPressをGridsomeで構築してみる

背景 / Gridsome を使ってみる / GraphQL / Vue SFC / WordPress(WP-API)を調整 / 最後に

Vue Fes Japan 2018 に参加してきました

キーノート / Platinum スポンサーセッション / セッション / まとめ