NUXTでTypeScriptを使っているときにlayoutを使う方法

NXUTでTypeScriptを使っているときのlayoutの使い方は下記のとおり。

nuxt-class-componentまたはnuxt-property-decoratorを使用している前提。

またプロジェクトはnuxt-community/typescript-templateで作った想定。

  • プロジェクトルートのindex.d.tsに下記を追記する。
    index.d.ts
declare module 'vue/types/options' {
  export interface ComponentOptions<V extends Vue> {
    layout?: any
  }
}
  • layoutsフォルダに任意のレウアウトファイル(.vue)を配置

layouts/Sample.vue

<template>
  <div>
    <nuxt />
  </div>
</template>
  • pagesフォルダ内のページコンポーネント(.vue)で使いたいレイアウトファイルを指定する。

pages/Hoge.vue

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

@Component({
  layout: 'Sample'
})
export default class Hoge extends Vue {}
</script>