MENU

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

Vue
Javascript Vue
  1. ホーム
  2. Web
  3. Vue
  4. Vue – Vue でページタイトルを設定する方法
目次
  1. 概要
  2. Vue Meta
  3. 使い方
    1. インストール
    2. ページタイトルの設定
    3. ページタイトルに共通の接頭辞、接尾辞を入れる

概要

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

Vue Meta

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

使い方

インストール

npm i vue-meta
Bash

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

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

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

ページタイトルの設定

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

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

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

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

ページタイトル - サイト名 のように各ページのタイトルに共通の接頭辞や接尾辞を入れたい場合は、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>
JavaScript

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

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

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

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

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

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

コメント

コメントする

目次
  1. 概要
  2. Vue Meta
  3. 使い方
    1. インストール
    2. ページタイトルの設定
    3. ページタイトルに共通の接頭辞、接尾辞を入れる