Vue.jsで作成したサイトで個別のページタイトルを設定する

案件詳細ページなど、ページ毎に個別のタイトルが必要なページで使用。
titleやmetaといった情報を設定（書き換える）ことが出来る

１、vue-headを追加
◯yarnでのインストール
yarn add vue-head

◯npmでのインストール
npm install vue-head –save

２、main.jsへの記述追加

// Vue.head
import VueHead from 'vue-head';
Vue.use(VueHead);

３、出力するコンポーネントでheadを設定

<script>
export default {
  head: {
    title() {
      return {
        inner: 'ページタイトル',
        separator: '|',
        complement: 'サイト名／ページの概要など'
      }
    }
  },
};
</script>

上記は、固定の値を入力する場合である。
titleに変数を使いたい場合には、function関数を使用した上で、別の場所で変数を設定する処理が必要になる。

例）タイトルタグを変数で指定する場合

<script>
export default {
  head: {
    title: function () {
      return {
        inner: this.pageTitle,
        separator: '|',
        complement: 'サイト名／ページの概要など'
      }
    }
  },
  data() {
    return {
      pageTitle: ''
    };
　},
　created() {
    this.getTitle();　//コンテンツ情報の取得などなんらかの処理
  },
　methods: {
　　this.getTitle() {
　　　～略～
      this.pageTitle = this.item.title;
　　　this.$emit('updateHead');　// 入力した内容をヘッダーに反映
    }
  }
};
</script>

ポイントはthis.$emit(‘updateHead’);でヘッダーの内容を更新する必要があることです。
これを知らなかったため、ヘッダーに変数の内容を反映させられずに悩みました。

参考サイト

親バカエンジニアのナレッジ帳

vue.jsでheadの要素を設定する時はvue-headが便利！

https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/21/104519

Qiita

【Vue.js】Vue CLIで作成したページのtitleとdescriptionを変更する方法

https://qiita.com/yuta-38/items/1fc2d1f5b4add2c0ed2c

Qiita

【Vue.js】vue-headの導入について

https://qiita.com/shin_moto/items/0755d1fa70c0431623e5