Pages

Pages represent the content of your website that is displayed to the user. They are created using Vue components and can be organized into a hierarchy of nested pages.

Creating a page

You can create a page by creating a file in the <root>/pages/ folder. For example, if you want to create a page called about, you can create a file called about.vue in the <root>/pages/ folder.

Here is an example of a simple page:

<template>
  <div>
	<h1>About Us</h1>
	<p>Welcome to our website!</p>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
	title: 'About Us',
});
</script>

Routing

Pages are automatically routed based on their file name. For example, a page named about.vue will be accessible at /about. You can also create nested pages by organizing them into subfolders. For example, a page named contact.vue inside a folder named about will be accessible at /about/contact.

For more information on routing, refer to the Nuxt documentation.

Provided pages

Safḥa comes with pre-built pages that you can customize to fit your needs. These pages are located in the path/to/safha/demos/ directory. You can copy these pages to your project and modify them as needed. You can view a live demo of these pages here Safḥa Demo Pages.