Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

通常の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であれば改善している模様。

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

MikihiroSaito
Javascript好きな人。ボホール在住エンジニア。 技術関連の記事をメインに情報を発信します。 Tyepscript、React、Vue(Nuxt)、Git、Docker等
https://blog.boholabo.com
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away