stack/v1/packages/mosaic/framework/skills/slidev/references/layout-global-layers.md

name, description

name	description
global-layers	Create components that persist across slides like footers and backgrounds

Global Layers

Create components that persist across slides.

Layer Files

Create in project root:

• global-top.vue - Above all slides (single instance)
• global-bottom.vue - Below all slides (single instance)
• slide-top.vue - Above each slide (per-slide instance)
• slide-bottom.vue - Below each slide (per-slide instance)
• custom-nav-controls.vue - Custom navigation controls

Z-Order (top to bottom)

1. NavControls / custom-nav-controls.vue
2. global-top.vue
3. slide-top.vue
4. Slide Content
5. slide-bottom.vue
6. global-bottom.vue

Example: Footer

<!-- global-bottom.vue -->
<template>
  <footer class="absolute bottom-0 left-0 right-0 p-2">Your Name</footer>
</template>

Conditional Rendering

<!-- Hide on cover layout -->
<template>
  <footer v-if="$nav.currentLayout !== 'cover'" class="absolute bottom-0 p-2">
    {{ $nav.currentPage }} / {{ $nav.total }}
  </footer>
</template>

Export Note

Use --per-slide export option when global layers depend on navigation state.