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

URL: https://webrandum.net/vue-cli-title-meta-settings/
公開日: 2021-10-05
更新日: 2021-10-05
カテゴリー: コーディング
タグ: Vue CLI, Vue Router, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

Vue CLIでのfaviconの変更方法は[過去に記事](https://webrandum.net/vue-cli-favicon/)にしましたが、titleタグについて触れていませんでした。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/01/eyecatch-6.jpg)Vue CLI 3でfaviconの設定をする方法https://webrandum.net/vue-cli-faviconVue CLIを使ってウェブサイトを実装するとき、デフォルトだとVue.jsのアイコンがfaviconとして登録されています。「public」フォルダの直下に「favicon.ico」があるので、それを差し替えればいいのかと思っていましたが、反映されなかったので、備忘録として残しておきます。入れ替える画像favicon.icoの入れ替えまずは「public/favicon.ico」をデフォルトから変更します。icoファイルは下記で作成できるので、作成して入れ替えます。しかし、これを入れ替えただけだとサイトを表示しても変更されません。実際にサイトを見ると、「favi...](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">`のタグはないため、用意しておく必要があるからです。