app/layouts

A layout wraps page content. default.vue is used when a page does not explicitly select another layout.

<!-- app/layouts/default.vue -->
<template>
  <div>
    <header>My application</header>
    <main><slot /></main>
  </div>
</template>

Create a named layout for a specific area:

<!-- app/pages/admin.vue -->
<script setup lang="ts">
definePageMeta({ layout: "dashboard" });
</script>

<template>
  <h1>Administration</h1>
</template>

The dashboard name maps to app/layouts/dashboard.vue. Runable generates the registry and related types in .app/layouts.d.ts.

Layouts can use composables, auto-imported components, and RouterLink like the rest of the application.