Vue CLIのtitleタグやmetaタグの設定方法

Vue CLIでのfaviconの変更方法は過去に記事にしましたが、titleタグについて触れていませんでした。

Webrandum

Vue CLI 3でfaviconの設定をする方法

https://webrandum.net/vue-cli-favicon

Vue CLIはデフォルトだとプロジェクト名が全ページ共通でついてしまいます。
今回はtitleタグやmetaタグの設定方法についてまとめておきます。

Vue Routerを使用して各記事に設定する

Vue Routerを使っている場合はroutesに新たにタイトルとディスクリプションの情報を追加します。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: 'ページタイトル', desc: 'ディスクリプションを記述' }
  }
]

あとはこの情報を引っ張ってきて、App.vueでページが変更するたびにセットするように処理を追加します。

export default {
  methods : {
    setMeta(route){
      // タイトルを設定
      if(route.meta.title){
        let setTitle = route.meta.title;
        document.title = setTitle;
      }
      // ディスクリプションを設定
      if(route.meta.desc){
        let setDesc = route.meta.desc;
        document.querySelector("meta[name='description']").setAttribute('content', setDesc)
      }
    }
  },
  mounted(){
    let route = this.$route;
    this.setMeta(route);
  },
  watch: { 
    '$route' (route, from) {
      this.setMeta(route);
    }
  }
}

やっていることはsetMetaという先ほど追加したタイトルとディスクリプションを取ってきてセットするメソッドを作り、mountedで初回、watchの'$route' (routeInstance, from)でVue Routerを使って遷移した時に発火させているだけです。

あとはpublic/index.htmlを開いて、下記のmetaタグを追加します。

<meta name="description">

<title>タグはデフォルトであるのですが、<meta name="description">のタグはないため、用意しておく必要があるからです。