Mono

Getting Started ​

Mono-repo is a way to build a large-scale, modular front-end on top of the Vue ecosystem. The goal is a maintainable, clean, complex project that takes minimum effort to grow.

Concept ​

Vue gives every project the same predictable shape:

  • src/pages — routing
  • src/layouts — layouts

Inside a layout you usually find the same generic pieces: Sidebar, Navbar, Login, Logout, Middleware. Every normal website needs them.

Mono-repo makes this simple. Those generic pieces live once in the Host, and every Remote can use them without rebuilding.

A Remote only adds its own modules. It does not re-create Login, Logout, or any of the generic things — the Host already handles all of that.

Because of this modular concept, the Host can have many Remotes, and all of them live inside the Host. Think about a house that have many rooms.

Visual Example ​

Host — owns the shell of the app.

host/
└── src/
    ├── pages/         # login, logout, etc.
    ├── layouts/       # sidebar, navbar, etc.
    └── ...etc/

Remote — just adds modules, for example a Budget module.

remote/
└── src/
    ├── pages/         # budget module
    └── ...etc/

Install ​

Before we getting started, there is package that required to install. Place this below code inside your package.json after that just install with pnpm i. You'll need a GitHub token.

json
{
     "dependencies": {
        "jwt-decode": "^4.0.0",
     },
    "devDependencies": {
        "mono-utils": "git+https://<GITHUB_CLASSIC_TOKEN>@github.com/EJI-ICT/libs#path:/packages/mono-utils"
    }
}

Templates ​

Starter projects for Host and Remote: