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

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

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

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

2、main.jsへの記述追加

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

3、出力するコンポーネントで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