【typescript】vue.js(nuxt)でheadを使ってページ毎にタイトルタグの設定をする

こんにちは！

今回はtypescriptを利用したvue.js（Nuxt)でheadの設定をする短めのスニペットです。
headでhtmlのtitleタグを設定したい場合に使っています。
vue-property-decoratorやvue-class-componentを使って実装するサンプルです。

お役に立てると幸いです。

目次

1. サンプルコード
2. 説明
3. まとめ

サンプルコード

nuxt.config.js

export default {
  head: {
    titleTemplate:
      '%s | タイトルのデフォルト（サイト名など）',
  ]
}

pages/xxx.vue

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component({
  head: () => ({
    title: 'ページのタイトル（xxx一覧など）',
  }),
})
export default class Sample extends Vue {}
</script>

結果

以下の様にタイトルタグが生成されます。

ページのタイトル（xxx一覧など） | タイトルのデフォルト（サイト名など）

説明

まずはnuxt.config.jsでtitleのテンプレートを登録しています。

  head: {
    titleTemplate:
      '%s | タイトルのデフォルト（サイト名など）',
  ]

続いて、各ページのvue内で、vue-property-decoratorを使ってheadの設定をします。

@Component({
  head: () => ({
    title: 'ページのタイトル（xxx一覧など）',
  }),
})

まとめ

今回はこれだけです。
意外と日本語記事がみあたらなかったので簡単な内容ですが記事化しました。

どなたかのお役に立てれば幸いです。