modulax

Modulax - universal modulator

This modulator supported ts and provide 100% typed module-manager. Easy start with react, vue2/3, angular, svelte and other.

Install modulax

npm: npm install modulax

yarn: yarn add modulax

Module example

Simple module example on vue3:

// @src/modules/auth/AuthModule.ts
import { Module } from "modulax"
import routes from "@/modules/auth/routes"

// stor-maneger based on storax. @see https://git.devoptions.tech/published/storax
import authStore, { AuthStore } from "@/modules/auth/store/AuthStore"

export default new Module({
    name: authStore.name,
    store: authStore,
    routes
})

export type { AuthStore }

Use as Modulator

Simple example of using modulator in vue3 app

//@src/modules/modulator.ts
import Modulator from "modulax"
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
import AuthModule, { AuthStore } from "@/modules/auth/AuthModule"

// declare store types
declare module "@vue/runtime-core" {
    interface ComponentCustomProperties {
        $store: {
            auth: AuthStore
        };
    }
}

// add module
Modulator.addModule(AuthModule)

//  mount stores of added modules for vue3 as plugin
const modules = {
    install: (_app:any): void => {
        _app.config.globalProperties.$store = Modulator.getModules
    }
}

// mount modules routes for vue3 as plugin
const pages = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes: Modulator.getRoutes as RouteRecordRaw[]
})

export { modules, pages }

How use it in main.ts

import { createApp, Component } from "vue";
import { modules, pages } from '@/modules/Modulator'

import App from "@/App.vue"

createApp(App)
    .use(modules)
    .use(pages)
    .mount('#app')