Layouts

Creating layouts

While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a <Layout> component. Here's an example of such a component:

<script setup lang="ts">
import { Link, type LayoutProps } from '@inertiajs-revamped/vue'

defineProps<LayoutProps>()
</script>

<template>
  <main>
    <header>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </header>
    <article>
      <slot />
    </article>
  </main>
</template>

As you can see, there is nothing Inertia specific within this template. This is just a typical Vue component.