Layouts

A layout is a reusable component that defines the structure of a page. It can contain headers, footers, sidebars, and other elements that are common across multiple pages. Layouts help you maintain a consistent look and feel across your website.

Safḥa comes with few layouts that you can use out of the box. The default layout is used for front-end pages (like SASS applications, landing pages, etc.), while the dashboard layouts are used for back-end pages (like admin panels, account settings, etc.).

Adding a layout to a page

To add a layout to a page, you need to specify the layout in the page's script section using definePageMeta function. Here is an example of how to add a layout to a page:

<template>
  <div>
	<h1>My Page</h1>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
	layout: 'dashboard',
});
</script>

You can leave the layout field empty to use the default layout. Also, you can specify dashboard or dashboard-app to use the dashboard layout. Additionally, you can specify a custom layout if you have created one.

Creating a custom layout

To create a custom layout, you need to create a new Vue component in the <root>/layouts/ directory. Here is an example of a custom layout:

WARNING

Creating a layout with the same name as a built-in layout will override the built-in layout.

<!-- MyCustomLayout.vue -->
<template>
  <div>
	<Header />
	<slot />
	<Footer />
  </div>
</template>

Then you can use this layout in your page by specifying the layout name in the page's script section.

<template>
  <div>
	<h1>My Page</h1>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
	layout: 'my-custom-layout',
});
</script>