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

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

Webrandum

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

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

Vue CLIを使ってウェブサイトを実装するとき、デフォルトだとVue.jsのアイコンがfaviconとして登録されています。「public」フォルダの直下に「favicon.ico」があるので、それを差し替えればいいのかと思っていましたが、反映されなかったので、備忘録として残しておきます。入れ替える画像favicon.icoの入れ替えまずは「public/favicon.ico」をデフォルトから変更します。icoファイルは下記で作成できるので、作成して入れ替えます。しかし、これを入れ替えただけだとサイトを表示しても変更されません。実際にサイトを見ると、「favi...

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">のタグはないため、用意しておく必要があるからです。