diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts
index b9929c5b..0c895a6d 100644
--- a/apps/docs/docusaurus.config.ts
+++ b/apps/docs/docusaurus.config.ts
@@ -22,7 +22,40 @@ const config: Config = {
     locales: ["en"],
   },
 
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          path: "react",
+          routeBasePath: "react",
+          sidebarPath: "./sidebars.ts",
+          editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
+          remarkPlugins: [
+            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+          ],
+        },
+        theme: {
+          customCss: "./src/css/custom.css",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
   plugins: [
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        id: "vue",
+        path: "vue",
+        routeBasePath: "vue",
+        sidebarPath: "./sidebars.ts",
+        editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
+        remarkPlugins: [
+          [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+        ],
+      },
+    ],
     [
       "typedoc-api",
       {
@@ -44,24 +77,6 @@ const config: Config = {
     ],
   ],
 
-  presets: [
-    [
-      "classic",
-      {
-        docs: {
-          sidebarPath: "./sidebars.ts",
-          editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
-          remarkPlugins: [
-            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
-          ],
-        },
-        theme: {
-          customCss: "./src/css/custom.css",
-        },
-      } satisfies Preset.Options,
-    ],
-  ],
-
   themeConfig: {
     image: "img/social-card.png",
     navbar: {
@@ -75,7 +90,13 @@ const config: Config = {
         {
           type: "docSidebar",
           sidebarId: "docsSidebar",
-          label: "Docs",
+          label: "React",
+        },
+        {
+          type: "docSidebar",
+          sidebarId: "docsSidebar",
+          docsPluginId: "vue",
+          label: "Vue",
         },
         {
           to: "api",
diff --git a/apps/docs/docs/getting-started/_category_.json b/apps/docs/react/getting-started/_category_.json
similarity index 100%
rename from apps/docs/docs/getting-started/_category_.json
rename to apps/docs/react/getting-started/_category_.json
diff --git a/apps/docs/docs/getting-started/connect-wallets.mdx b/apps/docs/react/getting-started/connect-wallets.mdx
similarity index 100%
rename from apps/docs/docs/getting-started/connect-wallets.mdx
rename to apps/docs/react/getting-started/connect-wallets.mdx
diff --git a/apps/docs/docs/getting-started/mutation.md b/apps/docs/react/getting-started/mutation.md
similarity index 100%
rename from apps/docs/docs/getting-started/mutation.md
rename to apps/docs/react/getting-started/mutation.md
diff --git a/apps/docs/docs/getting-started/query.md b/apps/docs/react/getting-started/query.md
similarity index 100%
rename from apps/docs/docs/getting-started/query.md
rename to apps/docs/react/getting-started/query.md
diff --git a/apps/docs/docs/getting-started/setup.mdx b/apps/docs/react/getting-started/setup.mdx
similarity index 100%
rename from apps/docs/docs/getting-started/setup.mdx
rename to apps/docs/react/getting-started/setup.mdx
diff --git a/apps/docs/docs/guides/_category_.json b/apps/docs/react/guides/_category_.json
similarity index 100%
rename from apps/docs/docs/guides/_category_.json
rename to apps/docs/react/guides/_category_.json
diff --git a/apps/docs/docs/guides/multichain.md b/apps/docs/react/guides/multichain.md
similarity index 100%
rename from apps/docs/docs/guides/multichain.md
rename to apps/docs/react/guides/multichain.md
diff --git a/apps/docs/docs/guides/number-utility.md b/apps/docs/react/guides/number-utility.md
similarity index 100%
rename from apps/docs/docs/guides/number-utility.md
rename to apps/docs/react/guides/number-utility.md
diff --git a/apps/docs/docs/guides/usinng-papi.md b/apps/docs/react/guides/usinng-papi.md
similarity index 100%
rename from apps/docs/docs/guides/usinng-papi.md
rename to apps/docs/react/guides/usinng-papi.md
diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx
index 1e20987a..a92be47d 100644
--- a/apps/docs/src/pages/index.tsx
+++ b/apps/docs/src/pages/index.tsx
@@ -19,7 +19,7 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/getting-started/setup"
+            to="/react/getting-started/setup"
           >
             Get started
           </Link>
diff --git a/apps/docs/vue/getting-started/_category_.json b/apps/docs/vue/getting-started/_category_.json
new file mode 100644
index 00000000..98e9fab8
--- /dev/null
+++ b/apps/docs/vue/getting-started/_category_.json
@@ -0,0 +1,7 @@
+{
+  "label": "Getting started",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/docs/vue/getting-started/connect-wallets.mdx b/apps/docs/vue/getting-started/connect-wallets.mdx
new file mode 100644
index 00000000..d75e5eb4
--- /dev/null
+++ b/apps/docs/vue/getting-started/connect-wallets.mdx
@@ -0,0 +1,131 @@
+---
+sidebar_position: 3
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+# Connect wallets
+
+Wallets & accounts connection can by managed via [`useWallets`](/api/vue/function/useWallets), [`useConnectedWallets`](/api/vue/function/useConnectedWallets) & [`useAccounts`](/api/vue/function/useAccounts) composables.
+
+:::tip
+If you prefer not having to build a wallet connection UI from scratch, checkout [DOT Connect](https://dotconnect.dev/) for a quick and easy way to add a great wallet experience to your DApps.
+:::
+
+## Install optional dependencies
+
+Additional dependencies are required if you use any of be bellow wallet type.
+
+### [WalletConnect](https://walletconnect.com/)
+
+```bash npm2yarn
+npm install @reactive-dot/wallet-walletconnect
+```
+
+### [Ledger](https://www.ledger.com/)
+
+```bash npm2yarn
+npm install @reactive-dot/wallet-ledger
+```
+
+## Add wallets to the config
+
+```ts title="config.ts"
+import { defineConfig } from "@reactive-dot/core";
+import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
+import { LedgerWallet } from "@reactive-dot/wallet-ledger";
+import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
+
+export const config = defineConfig({
+  // ...
+  wallets: [
+    new InjectedWalletProvider(),
+    new LedgerWalet(),
+    new WalletConnect({
+      projectId: "WALLET_CONNECT_PROJECT_ID",
+      providerOptions: {
+        metadata: {
+          name: "APP_NAME",
+          description: "APP_DESCRIPTION",
+          url: "APP_URL",
+          icons: ["APP_ICON"],
+        },
+      },
+      chainIds: [
+        // https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-13.md
+        "polkadot:91b171bb158e2d3848fa23a9f1c25182", // Polkadot
+        // ...
+      ],
+    }),
+  ],
+});
+```
+
+## Connect to wallets
+
+```vue title="wallets.tsx"
+<script setup lang="ts">
+import {
+  useConnectedWallets,
+  useWallets,
+  useWalletConnector,
+  useWalletDisconnector,
+} from "@reactive-dot/vue";
+
+const { data: wallets } = await useWallets();
+const { data: connectedWallets } = await useConnectedWallets();
+
+const { execute: connectWallet } = useWalletConnector();
+const { execute: disconnectWallet } = useWalletDisconnector();
+</script>
+
+<template>
+  <section>
+    <header>
+      <h3>Wallet connection</h3>
+    </header>
+    <article>
+      <h4>Wallets</h4>
+      <ul>
+        <li v-for="wallet in wallets" :key="wallet.id">
+          <div>{{ wallet.name }}</div>
+          <div>
+            <button
+              v-if="connectedWallets.includes(wallet)"
+              @click="disconnectWallet(wallet)"
+            >
+              Disconnect
+            </button>
+            <button v-else @click="connectWallet(wallet)">Connect</button>
+          </div>
+        </li>
+      </ul>
+    </article>
+  </section>
+</template>
+```
+
+## Display available accounts
+
+```vue title="accounts.tsx"
+<script setup lang="ts">
+import { useAccounts } from "@reactive-dot/vue";
+
+const accounts = await useAccounts();
+</script>
+
+<template>
+  <section>
+    <header>
+      <h3>Accounts</h3>
+    </header>
+    <ul>
+      <li v-for="(account, index) in accounts" :key="index">
+        <div>{{ account.address }}</div>
+        <div>{{ account.name }}</div>
+      </li>
+    </ul>
+  </section>
+</template>
+```
diff --git a/apps/docs/vue/getting-started/mutation.md b/apps/docs/vue/getting-started/mutation.md
new file mode 100644
index 00000000..c4628956
--- /dev/null
+++ b/apps/docs/vue/getting-started/mutation.md
@@ -0,0 +1,111 @@
+---
+sidebar_position: 4
+---
+
+# Mutation
+
+The `useMutation` composable allow you to sign & submit transaction to a chain.
+
+## Connect wallet & accounts
+
+Follow the [Connect wallets](./connect-wallets.mdx) guide to get this set up.
+
+## Choose the signer
+
+There are multiple way to select the account used for signing.
+
+### 1. Via dependency injection
+
+```vue
+<script setup lang="ts">
+import { provideSigner } from "@reactive-dot/vue";
+
+provideSigner(someSigner);
+</script>
+```
+
+### 2. Passing signer to the composable
+
+```vue
+<script setup lang="ts">
+import { useAccounts, useMutation } from "@reactive-dot/vue";
+
+const accounts = await useAccounts();
+
+const { execute, status } = useMutation(
+  (tx) => tx.NominationPools.claim_payout(),
+  { signer: accounts.value.at(0)?.polkadotSigner },
+);
+</script>
+```
+
+### 2. Passing signer to the final submission
+
+```vue
+<script setup lang="ts">
+import { useAccounts, useMutation } from "@reactive-dot/vue";
+
+const accounts = await useAccounts();
+
+const { execute, status } = useMutation((tx) => tx.Identity.clear_identity());
+
+execute({ signer: accounts.value.at(0)?.polkadotSigner });
+</script>
+```
+
+## Submitting transaction
+
+```vue
+<script setup lang="ts">
+import { useMutation } from "@reactive-dot/vue";
+import { Binary } from "polkadot-api";
+
+const { execute, status } = useMutation((tx) =>
+  tx.System.remark({ remark: Binary.fromText("Hello from reactive-dot!") }),
+);
+</script>
+
+<template>
+  <div v-if="status === 'idle'">No transaction submitted yet</div>
+  <div v-else-if="status === 'pending'">Submitting transaction...</div>
+  <div v-else-if="status === 'error'">Error submitting transaction!</div>
+  <div v-else>
+    Submitted tx with hash: {{ status.txHash }}, with the current state of:
+    {{ remarkState.type }}
+  </div>
+</template>
+```
+
+## Watching transactions
+
+It’s common to watch for all transactions throughout the application to display an appropriate loading state or toast. This can be easily achieved with the [`useMutationEffect`](/api/vue/function/useMutationEffect) composable.
+
+```vue
+<script setup lang="ts">
+import { watchMutationEffect } from "@reactive-dot/vue";
+
+watchMutationEffect((event) => {
+  if (event.status === "pending") {
+    console.info("Submitting transaction", { id: event.id });
+    return;
+  }
+
+  if (event.status === "error") {
+    console.error("Failed to submit transaction", { id: event.id });
+    return;
+  }
+
+  switch (event.data.type) {
+    case "finalized":
+      if (event.data.ok) {
+        console.info("Transaction succeeded", { id: event.id });
+      } else {
+        console.error("Transaction failed", { id: event.id });
+      }
+      break;
+    default:
+      console.loading("Transaction pending", { id: event.id });
+  }
+});
+</script>
+```
diff --git a/apps/docs/vue/getting-started/query.md b/apps/docs/vue/getting-started/query.md
new file mode 100644
index 00000000..29478e74
--- /dev/null
+++ b/apps/docs/vue/getting-started/query.md
@@ -0,0 +1,166 @@
+---
+sidebar_position: 2
+---
+
+# Query
+
+The [`useQuery`](/api/vue/function/useQuery) composable allow you to read any data from chain, while maintaining updates, concurrency, caching & deduplication behind the scene for you.
+
+## Async handling
+
+[`useQuery`](/api/vue/function/useQuery) utilize Vue's Suspense API for data fetching & error handling.
+
+```vue title="async-component.vue"
+<script setup lang="ts">
+const { data: activeEra } = await useQuery((builder) =>
+  builder.readStorage("Staking", "ActiveEra", []),
+);
+</script>
+
+<template>
+  <div>Active era: {{ activeEra.toLocaleString() }}</div>
+</template>
+```
+
+```vue title="app.vue"
+<script setup lang="ts">
+import AsyncComponent from "./async-component.vue";
+import { onErrorCaptured } from "vue";
+
+onErrorCaptured((error) => console.log(error));
+</script>
+
+<template>
+  <Suspense>
+    <AsyncComponent />
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+```
+
+## Fetching multiple data
+
+Fetching multiple data can be done by chaining queries together, [`useQuery`](/api/vue/function/useQuery) (with TypeScript) will automatically infer that you want to fetch multiple data concurrently & will return an array of data instead.
+
+```vue
+<script setup lang="ts">
+import { useQuery } from "@reactive-dot/vue";
+import { computed } from "vue";
+
+const { data } = await useQuery((builder) =>
+  builder
+    .getConstant("Babe", "ExpectedBlockTime")
+    .getConstant("Babe", "EpochDuration")
+    .readStorage("Treasury", "ProposalCount", []),
+);
+
+const expectedBlockTime = computed(() => data.value[0]);
+const epochDuration = computed(() => data.value[1]);
+const proposalCount = computed(() => data.value[2]);
+</script>
+```
+
+Multiple queries of the same type can also be fetched using [`callApis`](/api/core/class/Query#callApis) & [`readStorages`](/api/core/class/Query#readStorages).
+
+```vue
+<script setup lang="ts">
+import { useQuery } from "@reactive-dot/vue";
+
+const { data } = await useQuery((builder) =>
+  builder
+    .callApis("NominationPoolsApi", "pending_rewards", [
+      [ADDRESS_1],
+      [ADDRESS_2],
+      [ADDRESS_3],
+    ])
+    .readStorages("NominationPools", "Metadata", [
+      [POOL_ID_1],
+      [POOL_ID_2],
+      [POOL_ID_3],
+    ]),
+);
+</script>
+```
+
+## Conditional query
+
+Use a falsy value (`undefined`, `null` or `false`) to conditionally fetch data. If the query builder returns a falsy value, ReactiveDOT will not execute the query.
+
+```vue
+<script setup lang="ts">
+import { useQuery } from "@reactive-dot/vue";
+
+const { status } = await useQuery((builder) =>
+  address.value === undefined
+    ? undefined
+    : builder.callApi("NominationPoolsApi", "pending_rewards", [address.value]),
+);
+
+// Status will be "idle" if the query hasn't been executed
+if (status === "idle") {
+  console.log("The query is in idle state");
+}
+</script>
+```
+
+## Refreshing queries
+
+Certain query, like runtime API calls & reading of storage entries doesn't create any subscriptions. In order to get the latest data, they must be manually refreshed.
+
+```vue
+<script setup lang="ts">
+import { useQuery } from "@reactive-dot/vue";
+
+const {
+  data: pendingRewards,
+  refresh,
+  status,
+} = await useQuery((builder) =>
+  builder.callApi("NominationPoolsApi", "pending_rewards", [ACCOUNT_ADDRESS]),
+);
+</script>
+
+<template>
+  <div>
+    <p>{{ pendingRewards.toLocaleString() }}</p>
+    <button @click="refresh()" :disabled="status === 'pending'">Refresh</button>
+  </div>
+</template>
+```
+
+## Retry failed query
+
+Error from queries can be reset using `ErrorBoundary` & [`useQueryErrorResetter`](/api/vue/function/useQueryErrorResetter) composable.
+
+```vue
+<script setup lang="ts">
+import { useQueryErrorResetter } from "@reactive-dot/vue";
+import { onErrorCaptured, ref } from "vue";
+
+const hasError = ref(false);
+
+const { execute: resetError } = useQueryErrorResetter();
+
+onErrorCaptured(() => (hasError.value = true));
+</script>
+
+<template>
+  <article v-if="hasError">
+    <header>
+      <strong>Oops, something went wrong!</strong>
+    </header>
+    <button
+      @click="
+        resetError();
+        hasError = false;
+      "
+    >
+      Retry
+    </button>
+  </article>
+  <Suspense v-else>
+    <MyDApp />
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+```
diff --git a/apps/docs/vue/getting-started/setup.mdx b/apps/docs/vue/getting-started/setup.mdx
new file mode 100644
index 00000000..a5cf9e40
--- /dev/null
+++ b/apps/docs/vue/getting-started/setup.mdx
@@ -0,0 +1,182 @@
+---
+sidebar_position: 1
+---
+
+import Admonition from "@theme/Admonition";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+# Setup
+
+This walks you through the process of creating a simple ReactiveDOT application.
+
+<Admonition type="warning" icon="🚧" title="Work-in-progress">
+  This project is under active development, and the API may change at any time.
+</Admonition>
+
+## Installation
+
+First add ReactiveDOT, along with required packages as dependencies to your Vue project.
+
+```bash npm2yarn
+npm install @reactive-dot/vue polkadot-api
+```
+
+## Download & sync metadata
+
+Next, download the latest metadata from the chain you want to connect to and generate the types.
+
+```sh
+# `papi add` is the command
+# `dot` is the name we're giving to this chain (can be any JS variable name)
+# `-n polkadot` specifies to download the metadata from the well-known chain polkadot
+npx papi add dot -n polkadot
+# Wait for the latest metadata to download, then generate the types:
+npx papi
+```
+
+:::info
+
+For more information on metadata syncing and type generation, please refer to this [documentation](https://papi.how/codegen) provided by [Polkadot-API](https://papi.how/).
+
+:::
+
+## Create config
+
+{/* prettier-ignore-start */}
+
+<Tabs>
+  <TabItem value="light-client" label="Light client" default>
+
+{/* prettier-ignore-end */}
+
+```ts title="config.ts"
+// `dot` is the name we gave to `npx papi add`
+import { dot } from "@polkadot-api/descriptors";
+import { defineConfig } from "@reactive-dot/core";
+import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
+import { chainSpec } from "polkadot-api/chains/polkadot";
+import { getSmProvider } from "polkadot-api/sm-provider";
+import { startFromWorker } from "polkadot-api/smoldot/from-worker";
+
+const smoldot = startFromWorker(
+  new Worker(new URL("polkadot-api/smoldot/worker", import.meta.url), {
+    type: "module",
+  }),
+);
+
+export const config = defineConfig({
+  chains: {
+    // "polkadot" here can be any unique string value
+    polkadot: {
+      descriptor: dot,
+      provider: getSmProvider(smoldot.addChain({ chainSpec })),
+    },
+  },
+  wallets: [new InjectedWalletProvider()],
+});
+```
+
+{/* prettier-ignore-start */}
+
+  </TabItem>
+  <TabItem value="ws" label="WebSocket">
+
+{/* prettier-ignore-end */}
+
+```ts title="config.ts"
+import { dot } from "@polkadot-api/descriptors";
+import { getWsProvider } from "@polkadot-api/ws-provider/web";
+import { defineConfig } from "@reactive-dot/core";
+import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
+
+export const config = defineConfig({
+  chains: {
+    polkadot: {
+      descriptor: dot,
+      provider: getWsProvider("wss://polkadot-rpc.publicnode.com"),
+    },
+  },
+  wallets: [new InjectedWalletProvider()],
+});
+```
+
+{/* prettier-ignore-start */}
+
+  </TabItem>
+</Tabs>
+
+{/* prettier-ignore-end */}
+
+## Add type information
+
+The type declarations extension here will be used to provide you with the right type definitions when using composables.
+
+```ts title="reactive-dot.d.ts"
+import type { config } from "./config.js";
+
+declare module "@reactive-dot/core" {
+  export interface Register {
+    config: typeof config;
+  }
+}
+```
+
+## Install the plugin
+
+```tsx title="index.ts"
+import App from "./app.vue";
+import { config } from "./config.js";
+import { ReactiveDotPlugin } from "@reactive-dot/vue";
+import { createApp } from "vue";
+
+createApp(App).use(ReactiveDotPlugin, config).mount("#root");
+```
+
+## Provide the target chain ID
+
+```vue title="app.vue"
+<script setup lang="ts">
+import MyComponent from "./my-component.vue";
+import { provideChain } from "@reactive-dot/vue";
+
+provideChain(selectedChainId);
+</script>
+
+<template>
+  <MyComponent />
+</template>
+```
+
+## Use ReactiveDOT
+
+```vue title="my-component.vue"
+<script setup lang="ts">
+import { useQuery, useAccounts } from "@reactive-dot/vue";
+
+const { data: accounts } = await useAccounts();
+const { data: queryResult } = await useQuery((builder) =>
+  builder
+    .readStorage("Timestamp", "Now", [])
+    .readStorage("Balances", "TotalIssuance", []),
+);
+</script>
+
+<template>
+  <div>
+    <ul>
+      <li v-for="account in accounts" :key="account.address">
+        <div>Address: {{ account.address }}</div>
+        <div v-if="account.name !== undefined">Name: {{ account.name }}</div>
+      </li>
+    </ul>
+    <section>
+      <div>
+        Latest block timestamp:
+        {{ new Date(Number(queryResult[0])).toLocaleString() }}
+      </div>
+      <div>Total issuance: {{ queryResult[1].toString() }}</div>
+    </section>
+  </div>
+</template>
+```
diff --git a/apps/docs/vue/guides/_category_.json b/apps/docs/vue/guides/_category_.json
new file mode 100644
index 00000000..b07efb99
--- /dev/null
+++ b/apps/docs/vue/guides/_category_.json
@@ -0,0 +1,7 @@
+{
+  "label": "Guides",
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/docs/vue/guides/multichain.md b/apps/docs/vue/guides/multichain.md
new file mode 100644
index 00000000..eecf2e5c
--- /dev/null
+++ b/apps/docs/vue/guides/multichain.md
@@ -0,0 +1,193 @@
+---
+sidebar_position: 1
+---
+
+# Multichain
+
+## Setup
+
+Multichain setup can be done by adding extra chain configurations, after having followed this guide [here](../getting-started/setup.mdx).
+
+### Download & sync metadata
+
+Download the latest metadata from all chains you want to connect to and generate the types.
+
+```sh
+npx papi add dot -n polkadot
+npx papi add ksm -n ksmcc3
+npx papi add wnd -n westend2
+npx papi
+```
+
+### Add type information
+
+```ts title="reactive-dot.d.ts"
+import type { config } from "./config.js";
+
+declare module "@reactive-dot/core" {
+  export interface Register {
+    config: typeof config;
+  }
+}
+```
+
+### Configure chains
+
+```ts title="config.ts"
+import type { dot, ksm, wnd } from "@polkadot-api/descriptors";
+import { defineConfig } from "@reactive-dot/core";
+
+export const config = defineConfig({
+  chains: {
+    polkadot: {
+      descriptor: dot,
+      // ...
+    },
+    kusama: {
+      descriptor: ksm,
+      // ...
+    },
+    westend: {
+      descriptor: wnd,
+      // ...
+    },
+  },
+  //...
+});
+```
+
+## Chain selection
+
+Chain selection can be done either at the Context or Composable level.
+
+### Dependency injection
+
+```vue
+<script setup lang="ts">
+import type { ChainId } from "@reactive-dot/core";
+import { provideChain } from "@reactive-dot/vue";
+import { ref } from "vue";
+
+const currentChainId = ref<ChainId>("polkadot");
+
+provideChain(currentChainId);
+</script>
+
+<template>
+  <!-- It's a good idea to re-mount upon switching chain to ensure data consistency -->
+  <MyDApp :key="currentChainId" />
+</template>
+```
+
+### Composable
+
+All composables provide an option to specify which chain to target.
+
+```vue
+<script setup lang="ts">
+import { useBlock } from "@reactive-dot/vue";
+
+const { data: polkadotBlock } = await useBlock({ chainId: "polkadot" });
+const { data: kusamaBlock } = await useBlock({ chainId: "kusama" });
+const { data: westendBlock } = await useBlock({ chainId: "westend" });
+</script>
+```
+
+## Chain narrowing
+
+By default, ReactiveDOT merges type definitions from all the chains in the config. For instance, if your DApp is set up to work with Polkadot, Kusama, and Westend, the following code will fail because the Bounties pallet is available only on Polkadot and Kusama, not on Westend:
+
+```vue
+<script setup lang="ts">
+import { useQuery } from "@reactive-dot/vue";
+
+// Since the `Bounties` pallet doesn't exist on Westend, this will:
+// 1. Trigger a TypeScript error
+// 2. Cause a runtime error if Westend is selected
+const { data: bountyCount } = await useQuery((builder) =>
+  builder.readStorage("Bounties", "BountyCount", []),
+);
+
+// ...
+</script>
+```
+
+To resolve this, you can explicitly specify the chain to query, which will override the chain ID provided by context:
+
+```vue
+<script setup lang="ts">
+import { useQuery } from "@reactive-dot/vue";
+
+const bountyCount = useQuery(
+  (builder) => builder.readStorage("Bounties", "BountyCount", []),
+  { chainId: "polkadot" },
+);
+
+// ...
+</script>
+```
+
+Alternatively, if you want to keep using the chain ID provided by context, you can use the following pattern:
+
+```vue
+<script setup lang="ts">
+import { useQuery, useChainId } from "@reactive-dot/vue";
+import { computed } from "vue";
+
+function useBountiesChainId() {
+  const chainId = useChainId();
+
+  computed(() => {
+    switch (chainId.value) {
+      case "polkadot":
+      case "kusama":
+        return chainId;
+      default:
+        throw new Error("This chain does not support bounties", {
+          cause: chainId,
+        });
+    }
+  });
+}
+
+const { data: bountyCount } = await useQuery(
+  (builder) => builder.readStorage("Bounties", "BountyCount", []),
+  {
+    // This will:
+    // 1. Throw an error if the chain ID does not support bounties
+    // 2. Restrict the possible chain types for better intellisense
+    chainId: useBountiesChainId(),
+  },
+);
+</script>
+```
+
+Finally, if your application primarily uses a few chains but interacts with many other supporting chains, you can use the `targetChains` option:
+
+```ts
+import { defineConfig } from "@reactive-dot/core";
+
+const config = defineConfig({
+  chains: {
+    polkadot: {
+      // ...
+    },
+    polkadot_asset_hub: {
+      // ...
+    },
+    polkadot_people: {
+      // ...
+    },
+    polkadot_collectives: {
+      // ...
+    },
+    polkadot_bridge_hub: {
+      // ...
+    },
+  },
+  // This will restrict the default chain types used by composables
+  // to just Polkadot when no explicit `chainId` is provided
+  targetChains: ["polkadot"],
+  // ...
+});
+```
diff --git a/apps/docs/vue/guides/number-utility.md b/apps/docs/vue/guides/number-utility.md
new file mode 100644
index 00000000..f5a24d28
--- /dev/null
+++ b/apps/docs/vue/guides/number-utility.md
@@ -0,0 +1,92 @@
+---
+sidebar_position: 2
+---
+
+# Number utility
+
+## Denominated number
+
+To handle complexity around [planck unit](https://wiki.polkadot.network/docs/learn-DOT#the-planck-unit) used in Polkadot, a utility class [`DenominatedNumber`](/api/utils/class/DenominatedNumber) is provided by [`@reactive-dot/utils`](https://reactivedot.dev/api/utils).
+
+```ts
+import { DenominatedNumber } from "@reactive-dot/utils";
+
+// Denominated numbers are created with a planck value and a decimal places number
+
+const numberFromPlanck = new DenominatedNumber(10_000_000_000n, 10);
+
+console.log(numberFromPlanck.valueOf()); // 10
+
+// Denominated number can also be created from number instead of planck
+
+const numberFromNumber = DenominatedNumber.fromNumber(10, 10);
+
+console.log(numberFromNumber.planck); // 10000000000n
+
+// A string denomination can optionally be added for locale string conversion capability
+
+const numberWithDenomination = DenominatedNumber.fromNumber(10, 10, "DOT");
+
+console.log(numberWithDenomination.toLocaleString("en-NZ")); // DOT 10.00
+
+console.log(numberWithDenomination.toLocaleString("de-DE")); // 10,00 DOT
+
+// Arithmetics
+
+let dotAmount = DenominatedNumber.fromNumber(10, 10, "DOT");
+
+// Arithmetic operations can be performed using the number's planck value
+
+dotAmount = dotAmount.mapFromPlanck((planck) => planck + 5_000_000_000n);
+
+console.log(dotAmount.toLocaleString()); // DOT 10.50
+
+// Arithmetic operations can also be carried out with the number value
+// instead of planck if possible lost of precision is acceptable
+
+dotAmount = dotAmount.mapFromNumber((number) => (number * 2) / 4);
+
+console.log(dotAmount.toLocaleString()); // DOT 5.25
+```
+
+## Native token
+
+The [`useNativeToken`](/api/vue/function/useNativeToken) composable is also provided for easy conversion from planck and/or number value to native token amount.
+
+```vue
+<script setup lang="ts">
+import { useNativeToken } from "@reactive-dot/vue";
+
+const { data: nativeToken } = await useNativeToken();
+
+console.log(
+  nativeToken.value.amountFromPlanck(10_000_000_000n).toLocaleString("en-NZ"),
+); // DOT 1.00
+// Or
+console.log(nativeToken.value.amountFromNumber(1).toLocaleString("en-NZ")); // DOT 1.00
+</script>
+```
+
+## Spendable balance
+
+The [`useSpendableBalance`](/api/vue/function/useSpendableBalance) composable can be used to get the [spendable balance](https://wiki.polkadot.network/docs/learn-account-balances) of an account(s).
+
+```vue
+<script setup lang="ts">
+import { useSpendableBalance } from "@reactive-dot/vue";
+
+const { data: spendableBalance } = await useSpendableBalance(ACCOUNT_ADDRESS);
+
+console.log(spendableBalance.toLocaleString("en-NZ")); // DOT 10.00
+
+const { data: spendableBalances } = await useSpendableBalance([
+  ACCOUNT_ADDRESS_1,
+  ACCOUNT_ADDRESS_2,
+  ACCOUNT_ADDRESS_3,
+]);
+
+console.log(
+  spendableBalances.map((balance) => balance.toLocaleString("en-NZ")),
+); // ["DOT 10.00", "DOT 20.00", "DOT 30.00"]
+</script>
+```
diff --git a/apps/docs/vue/guides/usinng-papi.md b/apps/docs/vue/guides/usinng-papi.md
new file mode 100644
index 00000000..fcb0e730
--- /dev/null
+++ b/apps/docs/vue/guides/usinng-papi.md
@@ -0,0 +1,59 @@
+---
+sidebar_position: 3
+---
+
+# Using Polkadot-API (PAPI)
+
+ReactiveDOT is designed as a convenient layer over [PAPI](https://papi.how/) for enhanced developer quality of life. For more advanced use cases and data manipulation, it's recommended to use [PAPI](https://papi.how/) directly. You can access PAPI APIs through two composables: [`useClient`](/api/vue/function/useClient) and [`useTypedApi`](/api/vue/function/useTypedApi).
+
+## Polkadot client
+
+`PolkadotClient` interface shapes the top-level API for `polkadot-api`. You can find the full documentation [here](https://papi.how/client).
+
+```vue
+<script setup lang="ts">
+import { useClient } from "@reactive-dot/vue";
+import { watchEffect } from "vue";
+
+const { data: client } = await useClient();
+
+watchEffect(() => {
+  client.value._request<string>("system_version", []).then(console.log);
+});
+</script>
+```
+
+## Typed API
+
+The `TypedApi` allows easy interaction with the runtime metadata, with a great developer experience. You can find the full documentation [here](https://papi.how/typed).
+
+```ts
+import { useTypedApi } from "@reactive-dot/vue";
+
+function Component() {
+  const typedApi = useTypedApi();
+
+  useEffect(() => {
+    typedApi.event.Balances.Burned.watch(({ amount }) => amount > 10n ** 10n)
+      .pipe(take(5))
+      .forEach(console.log);
+  }, [typedApi]);
+}
+```
+
+```vue
+<script setup lang="ts">
+import { useClient } from "@reactive-dot/vue";
+import { useTypedApi } from "vue";
+
+const { data: typedApi } = await useTypedApi();
+
+watchEffect(() => {
+  typedApi.value.event.Balances.Burned.watch(
+    ({ amount }) => amount > 10n ** 10n,
+  )
+    .pipe(take(5))
+    .forEach(console.log);
+});
+</script>
+```