Config

The mono-repo also comes with a config file that handles cookies, JWT state, and deployment.

The config lives in a single file:

mono-vue-remote/
├── mono.config.ts
└── ...etc/

Setup

Start by creating a file named mono.config.ts with a default config like this:

import { defineConfig, JWTCompleteTokenTypes } from "mono-utils/runtime";

export default defineConfig({
    name: 'mono-remote',
});

Then, inside your src/main.ts, register the config when you create the Vue app:

import { createMono } from 'mono-utils/runtime'
import monoConfig from '../mono.config'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(createMono(monoConfig))
app.mount('#app')

Now you're good to go and can use any feature inside mono.config.ts.

Cookie

Handling a cookie is simple. Say you have a cookie called JWT_Token that's already set, and you want to use it across your app — here's a small example.

import { defineConfig, JWTCompleteTokenTypes } from "mono-utils/runtime";

export default defineConfig({
    name: 'mono-remote',
    cookie: [
        {
            name: 'JWT_Token',
        },
    ],
});

Then use it like this — it returns the exact value of your token:

import { monoState } from 'mono-utils/state';

const token = monoState().cookie.JWT_Token

console.log(token)

JWT

What if you need to decode the JWT_Token cookie to read the JWT payload inside? Set it up like this:

//@unocss-include
import { defineConfig, JWTCompleteTokenTypes } from "mono-utils/runtime";

export default defineConfig({
    name: 'mono-remote', // your app name
    jwt: {
        token: {
            name: 'JWT_Token',
        },
    },
});

Then use it like this — the token returns the decoded value:

import { monoState } from 'mono-utils/state';

const { jwt } = monoState()

console.log(jwt.token)

Deployment

Deployment is fully handled by the Host, so the Host needs to know which Remote pages to deploy.

For example, a Remote has a page called budget.vue:

mono-vue-remote/
└── src/
    └── pages/
        └── budget.vue

To have the Host deploy it, define it in the config. You can use any icon from Icones.

import { defineConfig, JWTCompleteTokenTypes } from "mono-utils/runtime";

export default defineConfig({
    name: 'mono-remote',
    menu: [
        {
            title: 'Budget',
            url: '/budget',
            icon: 'i-mdi-wallet-bifold',
        }
    ]
});