Extend Safḥa from a Local Directory

Extending Safḥa from a local directory has the advantage of having a single repo for your project. This makes it easier to manage and maintain your project. However it requires you to manage the dependencies of Safḥa yourself.

Steps

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

Download Safḥa from the git repository. Then extract the contents of the zip file to a subdirectory in your project. (let say safha). Your project structure should look like this:

my-nuxt-app/
├── safha/
├── package.json
├── nuxt.config.js
├── app.vue
├── ...

Edit the nuxt.config.js file in the root of your project and add the following code:

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

Install the dependencies of Safḥa by running the following command:

pnpm install --prefix safha
pnpm prepare --prefix safha

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

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

Run the following command to start the development server:

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.

Caveats

Dependencies

As stated earlier, one of the issues using this method is that you have to manage the underlying dependencies of Safḥa yourself. That is you have to keep track of the dependencies and update them manually. Unfortunately, there is no way to circumvent this issue when extending Safḥa from a local directory. You have to manage the dependencies yourself.