GuestLayout

The GuestLayout is a layout that is used for pages that are not protected by authentication. It is used for the landing page and should be used for new pages that are not protected by authentication e.g. if you decide to make a /faq route. 

<script setup>
import { Head, router, usePage } from '@inertiajs/vue3';
import Footer from '@/Components/Footer.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import NavBar from '@/Components/NavBar.vue';
import { computed } from 'vue';

const props = defineProps({
    title: {
        type: String,
        required: true,
    },
    navbarClass: {
        type: String,
        required: false,
    },
});

const navigation = [
    { name: 'Features', href: '/#features' },
    { name: 'Pricing', href: '/#pricing' },
    { name: 'FAQ', href: '/#faq' },
    { name: 'Blog', href: '/blog' },
];

const authenticatedUser = computed(() => usePage().props.auth?.user);
</script>

<template>
    <div class="bg-skin-fill scroll-smooth">
        <Head :title="props.title" />

        <NavBar :navigation="navigation" :class="[navbarClass]">
            <template #end>
                <div class="hidden lg:flex lg:flex-1 lg:justify-end">
                    <a v-if="!authenticatedUser" href="/login" class="text-sm font-semibold leading-6 text-skin-muted">
                        Log in <span aria-hidden="true">&rarr;</span>
                    </a>
                    <div v-else>
                        <PrimaryButton @click="router.visit(route('dashboard'))"> Dashboard </PrimaryButton>
                    </div>
                </div>
            </template>
        </NavBar>

        <main>
            <slot />
        </main>

        <Footer />
    </div>
</template>

<style scoped></style>



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