Nuxt.js + TypeScript（Class-based）にはnuxt-property-decorator

目次

1. 1. Nuxtにはvue-property-decoratorじゃなくてnuxt-property-decoratorってのがある
2. 2. vue-property-decoratorをnuxt-property-decoratorに入れ替える
3. 3. nuxt.config.jsを編集する
4. 4. 【サンプルソース】contentfulからblogのポストを取得する記述です。

Nuxtにはvue-property-decoratorじゃなくてnuxt-property-decoratorってのがある

ちょっとブログをNuxt + contentfulでの構築を試しているときに最初は vue-property-decorator を使ってましたがどこかの記事で nuxt-property-decorator があることを知って最終的にはそっちを使ってます。
TypeScriptでクラスベースでVue（Nuxtも含む）を記述しようとすると vue-property-decorator を基本的には使ったほうがよいと思います。

vue-class-component を使っても良いですがどちらかというと vue-property-decorator の情報の方が今は多い印象です。

この記事ではわかりやすく vue-class-component と vue-property-decorator の違いを整理してくれています。
TypeScriptでクラススタイルコンポーネントを実装する方法

構築した環境では実際のところ、とくに vue-property-decorator でもエラーや不具合が出ませんでした。

Nuxtにはトップレベルのコンポーネント単位で head タグ内での要素を記述したり上書きしたりする機能があるのですが、ネットで散見される記事ではその機能が vue-property-decorator ではうまく動かないという情報もありましたので念のために nuxt-property-decorator を使ったほうが良さそうです。

head(){
  return {
    title: 'ページやサイトのタイトル'
  }
}

vue-property-decoratorをnuxt-property-decoratorに入れ替える

vue-property-decorator を削除しましょう。

yarn remove vue-property-decorator

npmの場合

npm uninstall --save vue-property-decorator

nuxt-property-decorator を追加します。

yarn add nuxt-property-decorator

npmの場合

npm install --save nuxt-property-decorator

nuxt.config.jsを編集する

nuxt.config.jsに追記しましょう。

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

【サンプルソース】contentfulからblogのポストを取得する記述です。

Nuxtでは asyncData というコンポーネントのデータをセットする前に非同期の処理が実行できる便利なメソッドがあります。

API: asyncData メソッド - NuxtJS

でこの asyncData ですがどこに記述するのかというと @Component デコレータに記述しておきます。

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import client from '~/plugins/contentful.js'

@Component({
  components: {
    Card: () => import('~/components/Card.vue')
  },
  async asyncData ({ env, params }) {
    return await client.getEntries({
      'content_type': 'blogPost',
      'fields.slug': params.slug,
    }).then(entries => {
      return {
        post: entries.items[0],
      }
    })
    .catch(console.error)
  },
  head(this): object {
    return {
      titleTemplate: null,
      title: this.post.fields.title,
    }
  }
})

export default class Slug extends Vue {
  mounted() {}
}
</script>

head メソッドも @Component デコレータに記述できるのですがcontentfulから取得したデータは head の引数に this が渡されてくるのでそれを利用します。 asyncData 内の以下の記述での post は props 扱いになるため this から参照できます。

return {
  post: entries.items[0],
}

Nuxtはこれに代表されるような便利な機能がけっこうあります。