Nuxt で子ページ共通の layout を使う

/foo/:param みたいにあるディレクトリ配下でいろんなページを表示する場合に、そこだけ共通の layout を使いたいときの方法。と言ってもやることはめっちゃ簡単なんですが。

まずはディレクトリ構成から。

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

ユーザー関連のページがあったとして、/users はトップページ。/users/:id は各ユーザーの詳細ページとする。このとき、/users 共通の layout を使いたいときは、同じディレクトリ階層に親ファイル users.vue を用意すればいいです。

<template>
 <nuxt-child />
</template>

<script lang="ts" scoped>
import Vue from "vue";
export default Vue.extend({
 layout: "users"
});
</script>

そして、layout/users.vue に書きたい共通のビューを書けば OK です。割と簡単。

nuxtjs.org