Nuxt.js titleタグを各ページごとに「サイト名 + 任意の文字列」に設定

Nuxt.js titleタグを各ページごとに「サイト名 + 任意の文字列」に設定

共通のタイトルを設定して、 各ページごとに動的にタイトル設定したかったので、手順を記載します。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

nuxt.config.js編集

nuxt.config.jsのheadを編集すれば、動的にtitleの内容を変更することが可能になります。

ページ編集

今回は、pages配下にtitle.vueというファイルを下記のコード作成します。

ブラウザから http://プライベートIP:3000/title にアクセスして、titleタグを確認すると「サイト名 mebee」+ 「コード内で指定したtitle:の文字列」が表示されます。

また、titleTemplateが必要でないページの場合は、下記のようにコード内でtitleTemplateを上書きしてやれば表示されなくなります。

表示されなくなる。