はじめに

通常のJSで書かれたnuxtプロジェクトにおいてlayoutは以下のように書くことができる

index.vue
<script>
export default {
  layout: 'default',
}
</script>

以下のようにlayouts内のディレクトリ内にレイアウトコンポーネントを書く。そしてnuxtタグをラップしてあげると共通のレイアウトを適用させることができる。

default.vue
<template>
  <div>
    <Header />
    <nuxt />
    <Footer />
  </div>
</template>

それではtypescriptのnuxtプロジェクトではどうなるか紹介していく。

実装

今回はこちらのnuxt communityより公開されているtypescriptスターターを利用させてもらう。

Nuxt TypeScript Starter

初期画面は以下のようになっている。

screencapture-localhost-3000-2019-07-23-12_27_50.png

ここにheaderとfooterを追加する

初期設定ではdefaultのlayoutが適用されている。ここではuser画面時のレイアウトを作成していこう。

UserLayout.vueというコンポーネントをlayoutsディレクトリ内に作成する。以下ではシンプルにHeaderとFooterとう文字が表示されるようにしている。

UserLayout.vue
<template>
  <div>
    <header>Header</header>
    <nuxt/>
    <footer>Footer</footer>
  </div>
</template>

次にpages/index.vueにUserLayoutのコンポーネントを指定する

<script lang="ts">
import {
  Component,
  Vue
} from "nuxt-property-decorator"
import { State } from "vuex-class"
import { Person } from "~/types";
import Card from "~/components/Card.vue"

@Component({
  layout: 'UserLayout',
  components: {
    Card
  }
})
export default class extends Vue {
  @State people!: Person
}
</script>

これで表示された。

screencapture-localhost-3000-2019-07-23-13_10_35.png

まとめ

記事によってはlayoutを型宣言しなければならないようなことが書いてあるがtypescript-starterであれば改善している模様。

これで自由にレイアウトを書き換えることができるようになる