[Nuxt + TypeScript + SSR] nuxt-property-decoratorでタイトルタグを動的に設定する

こんにちは。
今回はNuxt　+ TypeScript + SSRでnuxt-property-decoratorを使っている構成で、asyncDataやfetchなどでapi callして取得した値をhead内のtitleタグに動的に設定する方法のメモです。

簡単な内容ですが自分は静的解析の解決にハマったので、だれかの助けになれば幸いです。

目次

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

1. 環境

• node: 16.4.0
• @nuxt/core: 2.15.7
• nuxt-property-decorator: 2.9.1
• vue: 2.6.12

2. サンプルコード

asyncData内で取得した値を元にtitleタグを設定する方法をご紹介します。
以下は商品詳細ページで商品名をtitleタグに設定場合を想定したサンプルです。

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { Product } from '~/types/product'

@Component({
  // asyncDataでは通常通りaxiosでAPIサーバーからfetchするだけ
  async asyncData({ $axios, params }: Context): Promise<void> {
    try {
      const { data } = await $api.get(`/products/${params.product_id}`)
      // data.productに商品の情報が入っている
      return data
    } catch (e) {
      console.log('error: ', e)
    }
  },
  // headの引数がポイント
  head(this: ProductsShow) {
    return { title: this.product.name }
  },
})
export default class ProductsShow extends Vue {
  product!: Product
}
</script>

3. 説明

サンプルに記載したとおり、headの引数にPage自体のクラスを受け取る設定にしておけば大丈夫でした。

head(this: ProductsShow) {
  return { title: this.product.name }
},

Page自体のクラスを引数を受け取れるとは知らず、contextとか受け取れるのかな？とか四苦八苦しました。

4. まとめ

vueはなかなかtypescriptと相性が良いとは言えないので、こういうどうでも良い所で時間かかってしまいがちです。
誰かの助けになれば幸いです。