App Context Module

Separate your nuxt app into multiple different apps. It also provides multi-tenancy support per app instance. It's for monolithic architectures.

It provides components and composables to manage and store the current app context, the user is at the moment client and server side.

Architecture

One app have his own business logic. It has his own reason why it exists. An app configured as multi tenancy means, that this app in every instance does the same things but keeps its data, users, permissions etc. separated from other instances. But the business logic of all instances is the same.

Example app architecture:

• Cockpit for system-wide administration
• End user App (multi tenancy)

TODO

• [ ] Docs
• [ ] Types for useAppContext server side
• [ ] Make it extendable from outside for other modules which need additional data in app configuration.
• [ ] Add helper components to switch between apps.

Usage

Set app context

Set an app context client side, to store it in browser for the session.

import {useAppContext} from '#app-context-module';

// Set a specific one
useAppContext().value.setContext('my-app', 'my-tenant-id');

// or clear it
useAppContext().value.clearContext();

Get app context client side

import {useAppContext} from '#app-context-module';

// Get it from composable
const {appId, tenantId} = useAppContext().value.context;

// or from plugin
const {$appContextModule} = useNuxtApp();
const {appId, tenantId} = $appContextModule.context;

Get app context server side

import {
	useAppContext, isValidAppContextHandler, type AppContext
} from '#app-context-module';

// Validate the context and get it
const context: AppContext = isValidAppContextHandler(event);

// or get it without validation
const context: AppContext | null = useAppContext(event);

Custom validation server side

import {appContextValidator} from '#app-context-module';

const {appId, tenantId} = appContextValidator.validate(getQuery(event));

if (appContextValidator.hasErrors()) {
	// Handle errors here
}

Installation

pnpm i @antify/app-context-module

Add it to your nuxt.config.ts:

export default {
	modules: [
		'@antify/app-context-module'
	]
}

Configuration

export default defineNuxtConfig({
	modules: [
		'@antify/app-context-module',
	],
	appContextModule: {
		apps: [
			{
				id: 'one-app',
			},
			{
				id: 'another-app',
				isMultiTenant: true
			}
		]
	}
});

Development

• Run pnpm run dev:prepare to generate type stubs.
• Use pnpm run dev to start playground in development mode.