KF_UI_KIT Template

This template should help get you started developing with Vue 3 in Vite with Alkfaeel Module Federation.

How To Start

First You Should Change The Name Property Inside The package.json File Into Your Current Feature Name

	//package.json
{
	//From
	"name": "template",
	//TO
	"name": "feature_1",
    //..
    //other props
}

Second You Must Also Do This Inside of The .env File And Change The APP_NAME.

Exporting Components

To Export Components. simply go to vite.config.mts and heading to loader variable. and add which component(s) you wish to export. please note this support Wildcard characters * ex to load every vue component inside the src folder and excluding tests

	const exported = await Loader([
		"./src/**/*.vue",
	],
		[
			"./src/components/__tests__/*",
		])

Exporting Routes

There's 2 files that need to be changed when it come to exporting your routes. src/router/routes.ts and src/router/nav.ts. you most export a single route in routes.ts and have Passthrough.vue as its component and have child routes as feature routes. There will be NO empty path child. Use "home" Instead

ex:

import PassThrough from "@/components/PassThrough.vue";

const routes = {
	// Name will be used in 18n. ensure proper naming scheme
	name:"feature1",
	path:"feature1",
	component:PassThrough,
	children:[{
		//child route names Should Also be 18n Friendly
		//feature1/home
		name:"feature1-home",
		path:"home",
		component:HomeView
	},
	{
		//feature1/about
		name:"feature1-About",
		path:"about",
		component:AboutView
	}]
} as RouteRecordRaw
export default routes;

And for the nav.ts file. it should serve as application catalog. with one SideBarNav Object with every feature section present as SideBarNavChild ex

import type { SideBarNav } from "@t/routeTypes";
export default {
	//Title Name will be used in 18n. ensure proper naming scheme
	title: "feature1.title",
	//Only Add if There's no child sections. 
	route: "/feature1/home",
	icon: "mdi-star-circle-outline",
	children: [
		//child nav bar object title Should Also be 18n Friendly 
		{ title: 'feature1.home', route: "/feature1/home", icon: "mdi-bullet-point" },
		{ title: 'feature1.home', route: "/feature1/about", icon: "mdi-bullet-point" }
	],
} as SideBarNav

I18n

Ensure every language locale file have a root element for the name of the feature you working on.

ex

{
	"feature1":{
		"home":"ميزة رقم واحد",
		"about":"عنا",
	}
}

Settings

Ensure You Have A Keybinding for typescript.restartTsServer So Whenever You Add New Types You Referesh With The Hotkey Instead of Closing and Re-Opening VSCODE.