Nuxt + TypeScript でページごとにhead()のTitleを書き換える

公式ガイドの通りに、NuxtをTypeScript化して少し躓いたのでメモ。
https://nuxtjs.org/guide/typescript/

結論から言うと、vue-property-decorator ではなく、 nuxt-property-decorator を使えば解決できました。

nuxt.config.ts

const config: NuxtConfiguration = {
  head: {
    titleTemplate: '%s | My Site'
  }
}

/page/index.vue

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

@Component
export default class PageIndex extends Vue {
  head() {
    return {
      title: 'My Site',
      titleTemplate: null
    }
  }
}
</script>

Nuxt Property Decorator

yarn add nuxt-property-decorator

Nuxt Property DecoratorのReedmeに書いてあるとおりに、
インストールしたら、nuxt.config.tsに下記を追加します。

nuxt.config.ts

build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    }
  }

これで完了です！

自分はコンポーネントでimport { Vue, Component } from 'vue-property-decorator' て書いてて動かなかったです。