On this page


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


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

# layouts/blog.vue

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

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

  label: 'Blog post',
  allowedBlocks: ['Container', 'Image', 'Prose', 'Video'],
  allowedRootBlocks: ['Container'],

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).


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:



A label displayed in the layout picker within the dashboard. If not specified, the layout label is auto-generated from the Vue component name. For example, some-layout.vue will be transformed into Some layout.


An array of allowed blocks for the layout. If not specified, all blocks are allowed.


An array of allowed top-level blocks for the layout. If not specified, all allowedBlocks can be used as root blocks.

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

Last updated on February 10, 2024 at 24:34