Layouts

Layouts are used to create consistent and reusable page structures. To add a layout, create a Vue component in the project's layouts directory.

Example

Here is an example of a page layout that restricts the use of specific blocks on a page:

# layouts/blog.vue

<template>
  <div>
    <PageHeader />
    <PostTitle />
    <div class="space-y-12 ph:space-y-8">
      <slot />
    </div>
    <PageFooter />
  </div>
</template>

<script lang="ts" setup>
import { defineLayout } from '#pruvious'

defineLayout({
  label: 'Blog post',
  allowedBlocks: ['Container', 'Image', 'Prose', 'Video'],
  allowedRootBlocks: ['Container'],
})
</script>

Each layout can have an optional default <slot> where the page blocks will be nested. The layout file name should follow the kebab-case naming strategy (e.g., some-layout.vue).

Definition

Layouts can be defined using the defineLayout macro, which can be imported from the #pruvious alias. The macro is compiled away when <script setup> is processed.

You can define the following properties using defineLayout:

Caveat: Make sure to place the defineLayout macro before your component logic and other Vue macros, like defineProps.