Layouts

MainLayout.vue

<template>

    <Link href="/">Home</Link> <br>
    <Link href="/about">About</Link>

    <slot></slot>

</template>

<script setup>
import {Link} from "@inertiajs/vue3";
</script>

Index.vue

<template>
    <MainLayout>
        <h1>Home Page</h1>
        <p>hey {{ message }} </p>

    </MainLayout>
</template>
<script setup>
 import {Link} from "@inertiajs/vue3";
 import MainLayout from "@/Pages/Layout/MainLayout.vue";


 defineProps({
     message: String
 })
</script>

About.vue

<script setup>
import { Link} from "@inertiajs/vue3";
import MainLayout from "@/Pages/Layout/MainLayout.vue";
</script>

<template>

    <MainLayout></MainLayout>
<h1>About Page</h1>


</template>

<style scoped>

</style>