Nuxt.jsでのタイトルの設定について

Question

Nuxt.jsでタイトルを設定する際、各ページのheadでページタイトルが設定されていたら〇〇 | サイト名とし、ページタイトルが設定されていない場合はサイト名とだけ表示したいと思っております。

現状以下のようになっており、もしindex.jsでtitleを記述しなかったら| サイト名となってしまいます。

もちろんtitleTemplateを使用せず、全てtitleに書くようにすれば表示的には大丈夫なのですが、もし他の方法があれば教えていただきたいです。

何卒よろしくお願い致します。

// nuxt.config.js

  head: {
    titleTemplate: '%s | ' + 'サイト名',
    title: ''
  },

// pages/index.js

<script>
export default {
  head() {
    return {
      title: 'トップページ'
    }
  },
</script>

Answer 1

titleTemplate は title を受けとる関数にすることができますので、以下のようにできます。

head: {
  titleTemplate(title) {
    return (title ? `${title} | ` : '') + 'サイト名'
  }
}

参考：https://vue-meta.nuxtjs.org/api/#titletemplate

Comments

[Khy]

ご回答ありがとうございます。
titleTemplateを関数にできるとは知りませんでした！
お陰様で解決できました、ありがとうございました！