The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

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

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

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

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

ページ1のタイトル

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

ページ2のタイトル

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

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

nuxt.config.jsにtitleTemplateを追加

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

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

ja.nuxtjs.org


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

各ページでのタイトル定義

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

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

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

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

となります。

ja.nuxtjs.org


以上です。