Edited at 2019-07-23

NuxtとTypescriptで任意なlayoutの設定方法

はじめに

通常の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

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

ここに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>