Nuxt.jsでページタイトルに共通文言を使用する

f:id:duo-taro100:20160218004611p:plain

今回はNuxt.jsの各ページでタイトルを設定する際に、それぞれのページで共通の文言を入れる方法をご紹介します。
言葉で説明するのが難しいですが、以下のような例です。

ページ1 | ここが共通の文言です。

ページ2 | ここが共通の文言です。

このように、「 | ここが共通の文言です。」を各ページのタイトルに共通で入るようにする方法です。
各ページでベタ書きすることも可能ですが、修正などがある場合に大変なのでできれば共通化したいです。
早速実装方法をご紹介します。

nuxt.config.jsのheadプロパティーにtitleTemplateを追加します。

module.exports = {
  head: {
    title : 'タイトルです'
    titleTemplate: '%s | ここが共通の文言です',
  }
}

「%s」が各ページで定義するtitleが入るようになります。
ページにtitleの定義がない場合は、nuxt.config.jsで定義しているtitleの値（ここでは「タイトルです」）が入ります。
各ページでの定義方法は次の通りです。

pagesディレクトリ配下の各ファイルに以下の記述を追加します。

export default {
   head() {
     return {
       title: 'ページ1'
     }
   }
 }

headメソッドでtitleを定義できます。上記のように「ページ1」とすれば、ページタイトルは

ページ1 | ここが共通の文言です

となります。

以上です。

Techvenience