AuthLayout

The AuthLayout component is a layout component that is used to wrap the login and register pages. It provides a simple layout with a logo and a footer.

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

<template>
    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-skin-fill">
        <div>
            <Link href="/">
                <img class="h-9 w-auto" src="/img/logo.png" alt="" />
            </Link>
        </div>

        <div 
            class="w-full sm:max-w-md mt-6 px-6 py-4 bg-skin-secondary shadow-md overflow-hidden sm:rounded-lg"
        >
            <slot />
        </div>
        <footer class="relative shrink-0 pt-4">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

import AuthLayout from "@/Layouts/AuthLayout.vue";