typescriptでnuxt.jsのerror.vueのlayoutを指定するには

目的

• typescriptで書いたnuxt.jsの layouts/error.vue でレイアウトを指定したい

前提

• nuxt: 2.3.4
• typescript: 3.1.6

実装

static プロパティで文字列でレイアウト名を定義するかレイアウト名を返す関数を定義します

layouts/error.vue

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

@Component
export default class Error extends Vue {
  public static layout = 'CustomErrorLayout';

  // ctxはNuxt Contextです．　型定義は割愛
  public static layout = (ctx: NuxtContext) => {
    return 'CustomErrorLayout';
  };
}
</script>

公式ドキュメント に記載されているのを参考にtypescriptで実装する際，単純にインスタンスのプロパティとして定義しても正しく動きません

layouts/error.vue

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

@Component
export default class Error extends Vue {
  // ------------ これは動かない
  // staticプロパティで定義しないとnuxt-property-decoratorによってdata() としてデコレートされてしまう
  public layout = 'CustomErrorLayout';
}
</script>

これはビルドすると生成される .nuxt/server.js を読んでみると NuxtError.layout と呼び出しているのが分かります