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の内容を変更することが可能になります。

head: {
    //title: process.env.npm_package_name || '',
    titleTemplate:  'サイト名 mebee | %s',

ページ編集

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

<template>
  <div>
    <p>title test</p>
  </div>
</template>

<script>
export default {
  head() {
    return {
      // nuxt.config.jsの%sに反映される内容
      title: 'タイトルタグのテストページ'
    }
  }
}
</script>

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

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

<script>
export default {
  head() {
    return {
      title: 'タイトルタグのテストページ',
      titleTemplate: ''
    }
  }
}
</script>

表示されなくなる。