Global Layers

Global layers allow you to have custom components that persist across slides. This could be useful for having footers, cross-slide animations, global effects, etc.

Slidev provides three layers for this usage, create global-top.vue, global-bottom.vue, or custom-nav-controls.vue under your project root and it will pick up automatically.

There are also layers for each slide: slide-top.vue and slide-bottom.vue. The usage is similar to the global layers, but they are applied to every slide, so there may be more than one instance of them.

TIP

If you are using global-top.vue or global-bottom.vue depending on the current navigation state, when exporting, the --per-slide option should be used to ensure the correct state is applied to each slide. Or you can use slide-top.vue and slide-bottom.vue instead.

Layers relationship

At z-axis, from top to bottom:

• NavControls
  • Customized Navigation Controls (custom-nav-controls.vue)
• Global Top (global-top.vue) - single instance
• Slide Top (slide-top.vue) - instance per slide
• Slide Content
• Slide Bottom (slide-bottom.vue) - instance per slide
• Global Bottom (global-bottom.vue) - single instance

Example

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

The text Your Name will appear on all your slides.

<!-- custom-nav-controls -->
<template>
  <button class="icon-btn" title="Next" @click="$nav.next">
    <div class="i-carbon:arrow-right" />
  </button>
</template>

The button Next will appear in NavControls.

To enable it conditionally, you can use the 📖 Global Context

<!-- hide the footer from Page 4 -->
<template>
  <footer
    v-if="$nav.currentPage !== 4"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Your Name
  </footer>
</template>

<!-- hide the footer from "cover" layout -->
<template>
  <footer
    v-if="$nav.currentLayout !== 'cover'"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Your Name
  </footer>
</template>

<!-- an example footer for pages -->
<template>
  <footer
    v-if="$nav.currentLayout !== 'cover'"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    {{ $nav.currentPage }} / {{ $nav.total }}
  </footer>
</template>

<!-- custom-nav-controls -->
<!-- hide the button in Presenter model -->
<template>
  <button v-if="!$nav.isPresenter" class="icon-btn" title="Next" @click="$nav.next">
    <div class="i-carbon:arrow-right" />
  </button>
</template>