Extend Safḥa from module dependency

Using Safḥa as a module dependency is the easiest and most straightforward way to extend it. This method is recommended for most users because it is simple and easy to set up.

One of the great benefits of this method is that you don't have to manage the underlying dependencies of Safḥa.

Steps

Download Safḥa from the git repository. Then extract the contents of the zip file to a directory on your computer.

Create a new Nuxt project if you don't have one already. You can create a new Nuxt project using the following command:

pnpx create-nuxt-app my-nuxt-app
cd my-nuxt-app

Edit the package.json file in the root of your project and add the following code:

"devDependencies": {
	// ... other packages
	"@kalimah-apps/safha": "file:../path/to/safha"
}

Add the following code to your nuxt.config.js file:

export default defineNuxtConfig({
	extends: ['@kalimahapps/safha'],
	/// ... other nuxt config
});

Modify app.vue and replace it with the following code:

<template>
	<SafhaApp>
		<SafhaLoadingIndicator />
		<SafhaToaster />
		<SafhaLayout />
	</SafhaApp>
</template>

In some cases you might have issues with installing the dependencies. Create a .npmrc file in the root of your project and add the following code:

shamefully-hoist=true

Run the following commands to install the dependencies and start the development server:

pnpm install
pnpm dev

That's it! You have successfully extended Safḥa in your project. You can now start building your application using Safḥa components and pages.