레이아웃 설정법

# What?

기본틀 잡는법

 

# Why?

헤더, 푸터같은건 공통으로 가져가야 편함(매번 작성 x)

 

# How?

@ Pages/Layout.vue

<template>
    <div>
        <header>header</header> // 공통부분
        <slot /> // 이 자리에 페이지 내용이 들어감
        <footer>footer</footer> // 공통부분
    </div>

</template>
<script>

export default {

}
</script>

 

@app.js(내가 만든 Layout.vue를 default Layout으로 사용하게 하기)

import Layout from "./Pages/Layout";
createInertiaApp({
    resolve: name => {
    	// 해당 페이지에서 layout를 따로 설정안했다면 기본으로 내가 만든 Layout 컴포넌트 사용
        const page = require(`./Pages/${name}`).default;
        page.layout = page.layout || Layout;
        return page;
    },
    ...
});