# Nuxtjs titleTemplate の設定

Nuxtjs では、head プロパティを使用してページの title meta script style などのヘッダー情報を管理します。ページごとに head プロパティを設定することもできます。一部違いがありますが、Nuxtjs は、vue-meta を内部で使用しており、ページのヘッダー情報は、実際には vue-meta を介して操作されます。

titleTemplate タイプ

type string | Function

{
  head: {
    title: 'Hapicode',
    titleTemplate: '%s - Hpaicode'
  }
}

nuxt.config.jsの設定ファイルで titleTemplate を修正して、%s がある場合に|を表示するようにするには、次のように変更します。

    titleTemplate: (titleChunk) => {
      return titleChunk ? `Hapicode | ${titleChunk}` : 'Hapicode'
    },

レンダリングされる前に titleTemplate 内の %s プレースホルダーに title の値が注入されます。元の title は、metaInfo.titleChunk で利用可能

# Nuxtjs head config

nuxt.config.js 設定ファイルの一部抜粋

  head: {
    title: '',
    titleTemplate: (titleChunk) => {
      return titleChunk ? `Hapicode | ${titleChunk}` : 'Hapicode'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

# 動的 head タグの設定

export default {
  head() {
    return {
      title: this.dynamicTitle,
      meta: [
        { hid: "og:title", property: "og:title", content: this.dynamicTitle },
      ],
    };
  },
  data() {
    return {
      dynamicTitle: "動的タイトル",
    };
  },
};