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

こんにちは。
今回はNuxt + TypeScript + SSRでnuxt-property-decoratorを使っている構成で、asyncDataやfetchなどでapi callして取得した値をhead内のtitleタグに動的に設定する方法のメモです。
簡単な内容ですが自分は静的解析の解決にハマったので、だれかの助けになれば幸いです。
目次
- 環境
- サンプルコード
- 説明
- まとめ
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と相性が良いとは言えないので、こういうどうでも良い所で時間かかってしまいがちです。
誰かの助けになれば幸いです。