A simple layout component might look like this

<script>
    import ApplicationLogo from '@/Components/ApplicationLogo.svelte';
    import { inertia } from '@inertiajs/svelte';

    let { children } = $props();
</script>

<div
    class="flex min-h-screen flex-col items-center bg-uiGray-100 pt-6 sm:justify-center sm:pt-0 dark:bg-uiGray-900"
>
    <div>
        <a use:inertia href="/">
            <ApplicationLogo class="h-20 w-20 fill-current text-uiGray-500" />
        </a>
    </div>

    <div
        class="mt-6 w-full overflow-hidden bg-white px-6 py-8 shadow-md sm:max-w-xl sm:rounded-lg dark:bg-uiGray-800"
    >
        {@render children()}
    </div>
</div>

The {@render children()} can be seen as a ‘slot’, in which we can render other contents.

When we use such a layout component, we don’t use a self-closing tag, but we usually put content between the opening and closing tag. This wraps our content in the GuestLayout layout;

<GuestLayout>
	<div> content for slot goes here</div>
</GuestLayout>

You can also define fallback content, in case there is no content;

{@render ...} • Docs • Svelte

(used AuthenticiatedLayout exclusively, and created some authenticication logic there, because the website looks almost the same for logged in and logged out users, except for some extra options. But this of course all depends on your own goals for the website.)

Next up: Inertia/svelte basics (importing data from back-end and using this in components):