Laravel + Vue + Inertia.jsでVueのレイアウトを設定する

はじめに

この記事はLaravel、Vue、Inertia.jsの構成でVueのレイアウトを設定する方法について書いています。
いくつかファイルを作成するのですが、最終的に下記のようなディレクトリ構成になります。

resources
    ┗js
      ┣Layouts
      ┃     ┗DefaultLayout.vue
      ┃     ┗CustomLayout.vue
      ┗Pages
          ┗index.vue

前提

• Laravel、Vue、Vite、Inertia.jsで環境構築ができている
• サンプルコードには<script setup>構文を使う

デフォルトのレイアウトの設定方法

デフォルトのレイアウトは各ページファイルで自動的に適用されるレイアウトになります。ページファイル内でレイアウトを指定している場合はそちらが優先して適用されます。

設定方法について説明していきます。
まずはレイアウトファイルを作成します。

resources/js/Layouts/DefaultLayout.vue

<template>
  <header>
    <h2>Header</h2>
  </header>
  <slot />
</template>

<style scoped>
header {
  height: 70px;
  width: 100%;
  background-color: #cfd8dc;
  display: flex;
  align-items: center;
}
h2 {
  margin-left: 30px;
}
</style>

次にapp.jsを下記のように修正します。

resources/js/app.js

import { createApp, h } from "vue/dist/vue.esm-bundler"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"
import DefaultLayout from "./Layouts/DefaultLayout.vue"

createInertiaApp({
    resolve: (name) => {
        const page = resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/**/*.vue")
        )
        page.then((module) => {
            // ここで設定する
            module.default.layout = module.default.layout || DefaultLayout
        })

        return page
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

最後にページファイルを作成します。

resources/js/Pages/index.vue

<template>
  <div style="padding: 10px;">
    index.vue
  </div>
</template>

表示されたページでレイアウトが適用されます。

各ページのレイアウトの設定方法

先ほどはデフォルトのレイアウトの設定でしたが、ページごとにレイアウトを指定して設定する方法もあります。
まずは新たにレイアウトファイルを作成します。

resources/js/Layouts/CustomLayout.vue

<template>
  <header>
    <h2>Header</h2>
  </header>
  <slot />
</template>

<style scoped>
header {
  height: 70px;
  width: 100%;
  background-color: #1E88E5;
  display: flex;
  align-items: center;
  color: #fff;
}
h2 {
  margin-left: 30px;
}
</style>

先ほど作成したページファイルを修正します。

resources/js/Pages/index.vue

<!-- ここから追加 -->
<script setup>
import CustomLayout from "/resources/js/Layouts/CustomLayout.vue"
defineOptions({ layout: CustomLayout }) // ここでレイアウトファイルを指定する
</script>
<!-- ここまで追加 -->
<template>
  <div style="padding: 10px;">
    index.vue
  </div>
</template>

下記のようにCustomLayout.vueが適用されます。

以上になります。
最後まで見ていただきありがとうございました。

参考