@leanjs/vue
Installationβ
If your Vue app is in a monorepo (recommended) execute the following command at the root of your repository:
yarn add -W @leanjs/vue @leanjs/core @leanjs/vue-router
then in the package.json
of your Vue app add the following peerDependencies
:
"peerDependencies": {
"@leanjs/core": "*",
"@leanjs/vue": "*",
@leanjs/vue-router: "*"
}
If your Vue app is not in a monorepo, then run the following command instead of the above:
yarn add @leanjs/vue @leanjs/core @leanjs/vue-router
Basic usageβ
createRuntimeBindings
β
1 . First, you have to create your Vue bindings for your runtime
.
// shared-runtime.ts
// You need to configure your runtime
const defaultState = { locale: "en" }; // this is just an example
export const { createRuntime } = configureRuntime(defaultState)({
onError: () => {},
});
// Then create your Vue bindings for your runtime
export const { useSharedState, HostProvider } =
createRuntimeBindings(createRuntime);
Read @leanjs/core if you have not already created your own createRuntime
function
2 . Add a HostProvider
to the root of your app tree
<template>
<div>
<h1>Nuxt Host</h1>
<HostProvider :runtime="runtime" origin="http://localhost:56500">
<NuxtPage />
</HostProvider>
</div>
</template>
<script setup lang="ts">
import { createRuntime, HostProvider } from "./runtime-vue";
const runtime = createRuntime({ context: { appName: "VueShell" } });
</script>
3 . Use your useSharedState
in your app, e.g.
<template>
<h1>Locale is {{ locale }}</h1>
</template>
<script>
import { useSharedState } from "./runtime-vue";
export default {
name: "App",
setup() {
return useSharedState("locale");
},
};
</script>
useSharedState
β
Composable to get the current state of one or many shared state properties. Types:
type useSharedState = <
MyState extends Record<string, any>,
Prop extends keyof MyState
>(
...props:
| Prop[]
| {
prop: Prop;
loader?: () => MyState[Prop] | Promise<MyState[Prop]>;
deep?: boolean;
}
) => Record<Prop, Ref<MyState[Prop]>>;
ComposableAppsβ
To use any of the following composables, you must first call createRuntimeBindings
. Read the basic usage section above for more info.
createApp
β
Arguments:
App: Component
- requiredoptions: { appName: string }
- required.
Create a file called index.ts|js
in the src
directory where your composable app is. For example:
Create a file called index.ts|js
in the src
directory where your composable app is. For example:
my-monorepo/
β- apps/
β ββ vue-host/
ββ composable-apps/
β ββ vue-app-1/
β β ββ package.json
β β ββ src/
β β β ββ VueApp1.vue
β β β ββ index.ts π
ββ package.json
Read the recommended setup in our getting started page if you want to create a similar monorepo structure
Call createApp
with the root component of your app, for example:
// my-monorepo/composable-apps/vue-app-1/src/index.ts
import { createApp } from "@leanjs/vue-router";
import RemoteVue1 from "./RemoteVue1.vue";
export default createApp(RemoteVue1, { appName: "RemoteVue1" });
Hello world example of the RemoteVue1
imported above
<template>
<div>
<h1>Hello Vue composable-app 1</h1>
</div>
</template>
Create a file called selfHosted.ts|js
in the src
directory where your composable app is, for example:
my-monorepo/
β- apps/
β ββ vue-host/
ββ composable-apps/
β ββ vue-app-1/
β β ββ package.json
β β ββ src/
β β β ββ VueApp1.vue
β β β ββ index.ts π
β β β ββ selfHosted.ts π
ββ package.json
Export a createRuntime
function from the selfHosted.ts|js
file. This is the runtime that will be used when the app runs in isolation, meaning without a host.
// my-monorepo/composable-apps/vue-app-1/src/selfHosted.ts
export { createRuntime } from "@my-org/runtime-vue";
Read @leanjs/core if you have not already created your own createRuntime
function
Componentsβ
HostProvider
β
You have to call createRuntimeBindings to create a HostProvider
component before you use it. HostProvider
stores in a Vue context values that are shared across apps hosted in the same component tree. Props:
runtime
prop - requiredβ
Your Lean runtime.
origin
prop - optionalβ
Origin where your remote composable apps are. During development, use the address where you run your Lean proxy dev server. Use the address of your CDN in production, e.g. https://cdn.example.com
.
Example
<template>
<HostProvider :runtime="runtime" :origin="origin">
<NuxtPage />
</HostProvider>
</template>
<script setup lang="ts">
import { createRuntime, HostProvider } from "./shared-runtime";
const runtime = createRuntime({
context: { appName: "AppExample" },
});
const origin = process.env.MICROFRONTENDS_ORIGIN;
</script>
Host
β
It hosts a composable app in a Vue host.
You can read more about this in @leanjs/nuxt