Runable v1.0.0-alpha.20

Layouts

Share an interface structure across pages without duplicating templates.

A layout wraps page content. Use it for primary navigation, a sidebar, or a structure specific to one application area.

Create the default layout

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

Every page uses default unless it declares another layout.

Select a layout

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

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

Runable then looks for app/layouts/admin.vue.

Pass properties

Declare an object to pass props to the layout:

<script setup lang="ts">
definePageMeta({
  layout: {
    name: "dashboard",
    props: { compact: true },
  },
});
</script>
<!-- app/layouts/dashboard.vue -->
<script setup lang="ts">
defineProps<{ compact?: boolean }>();
</script>

<template>
  <div :class="{ compact }"><slot /></div>
</template>

Disable the layout

definePageMeta({ layout: false });

The page content is then rendered directly.

Report an issue Edit this page