@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

then in the package.json of your Vue app add the following peerDependencies:

"peerDependencies": {
  "@leanjs/core": "*",
  "@leanjs/vue": "*"
}

If your Vue app is not in a monorepo, then run the following command instead of the above:

yarn add @leanjs/vue @leanjs/core

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 } = createRuntimeBindings(createRuntime);

:::info

Read @leanjs/core if you have not already created your own createRuntime function

:::

2 . Provide a runtime at the root of your app, e.g.

import { createApp } from "vue";
import { createRuntime } from "./runtime-vue";

const runtime = createRuntime({ context: { appName: "VueShell" } });
const app = createApp(App);

app.provide("runtime", runtime);
app.mount(document.getElementById("#app"));

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>

Composables

To use any of the following composables, you must first call createRuntimeBindings. Read the basic usage section above for more info.

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]>>;