Vue – Vue でページタイトルを設定する方法

概要

Vue を使ったアプリケーションでページタイトルを設定する方法について解説します。

Vue Meta

Vue Meta は Vue アプリケーションに title タグや meta タグで設定する HTML のメタ情報を管理するためのプラグインです。ページタイトルも Vue Meta を使うことで設定できます。

使い方

インストール

npm i vue-meta

プロジェクトのディレクトリは、vue-cli の vue create コマンドで作成した階層構造になっているものとします。

main.js に以下の記述を追加します。

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

ページタイトルの設定

.vue ファイルに metaInfo の title プロパティを追加することで、以下のようにタイトルを設定できます。

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  metaInfo: {
    title: "Default Title",
  },
};
</script>

ページタイトルに共通の接頭辞、接尾辞を入れる

ページタイトル - サイト名 のように各ページのタイトルに共通の接頭辞や接尾辞を入れたい場合は、titleTemplate プロパティで設定します。親子関係にあるコンポーネントで metainfo の同じプロパティが設定されていた場合、子コンポーネントのプロパティが優先されます。 そのため、以下のように親コンポーネントで titleTemplate プロパティを設定し、子コンポーネントではそれぞれのタイトルを title プロパティで設定します。

App.vue: 親コンポーネント

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    metaInfo: {
      title: 'Default Title',
      titleTemplate: '%s | My Awesome Webapp'
    }
  }
</script>

Home.vue: 子コンポーネント

<template>
  <div id="page">
    <h1>Home Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    metaInfo: {
      title: 'Home Page',
    }
  }
</script>

About.vue: 子コンポーネント

<template>
  <div id="page">
    <h1>About Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'About',
    metaInfo: {
      title: 'About Page',
    }
  }
</script>