From 4211f1476bd7fb6bcdd963a5387947d56536a51c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 09:21:39 +0000
Subject: [PATCH 1/4] docs(vue): Add DataClientPlugin API page

Vue-only page covering the managers, initialState, Controller and
gcPolicy options, the $dataClient global property, and why awaited
composables need <script setup>. Listed in the Vue API sidebar and
linked from pages that mention DataClientPlugin.

Also exports GCPolicy from @data-client/vue (as @data-client/react
does) and points the missing-plugin error message at the new page.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LHNQGac8kwCPEnyPLRYfZu
---
 .changeset/vue-export-gcpolicy.md             |  16 ++
 docs/core/api/Actions.md                      |   2 +-
 docs/core/api/DataClientPlugin.vue.md         | 204 ++++++++++++++++++
 docs/core/api/DataProvider.md                 |   3 +-
 docs/core/api/DevToolsManager.md              |   2 +-
 docs/core/api/Manager.md                      |   2 +-
 docs/core/api/getDefaultManagers.md           |   6 +-
 docs/core/api/mockInitialState.md             |   2 +-
 docs/core/api/useController.md                |   4 +-
 docs/core/concepts/managers.md                |   2 +-
 docs/core/shared/_installation.mdx            |   2 +
 .../__snapshots__/context.test.ts.snap        |   4 +-
 packages/vue/src/__tests__/context.test.ts    |   2 +-
 packages/vue/src/context.ts                   |   4 +-
 packages/vue/src/index.ts                     |   7 +-
 website/sidebars.json                         |   4 +
 16 files changed, 249 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/vue-export-gcpolicy.md
 create mode 100644 docs/core/api/DataClientPlugin.vue.md

diff --git a/.changeset/vue-export-gcpolicy.md b/.changeset/vue-export-gcpolicy.md
new file mode 100644
index 000000000000..be01e9cd5664
--- /dev/null
+++ b/.changeset/vue-export-gcpolicy.md
@@ -0,0 +1,16 @@
+---
+'@data-client/vue': patch
+---
+
+Export `GCPolicy` from `@data-client/vue`
+
+```ts
+// Before
+import { GCPolicy } from '@data-client/core';
+// After
+import { GCPolicy } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  gcPolicy: new GCPolicy({ intervalMS: 60 * 1000 * 10 }),
+});
+```
diff --git a/docs/core/api/Actions.md b/docs/core/api/Actions.md
index c00ff253791a..110b654fe65c 100644
--- a/docs/core/api/Actions.md
+++ b/docs/core/api/Actions.md
@@ -11,7 +11,7 @@ Actions are minimal descriptions of store updates.
 
 They are [dispatched by Controller methods](./Controller.md#action-dispatchers) ->
 [read and consumed by Manager middleware](./Manager.md#reading-and-consuming-actions) -> 
-processed by [reducers](https://react.dev/reference/react/useReducer) registered with :react[[DataProvider](./DataProvider.md)]:vue[[DataClientPlugin](../getting-started/installation.md)]
+processed by [reducers](https://react.dev/reference/react/useReducer) registered with :react[[DataProvider](./DataProvider.md)]:vue[[DataClientPlugin](./DataClientPlugin.md)]
 to update the store's state.
 
 Many actions use the same meta information:
diff --git a/docs/core/api/DataClientPlugin.vue.md b/docs/core/api/DataClientPlugin.vue.md
new file mode 100644
index 000000000000..3fc7f5a15bd4
--- /dev/null
+++ b/docs/core/api/DataClientPlugin.vue.md
@@ -0,0 +1,204 @@
+---
+title: DataClientPlugin - Normalized async data management in Vue
+sidebar_label: DataClientPlugin
+description: High performance, globally consistent data management in Vue
+---
+
+# DataClientPlugin
+
+[Vue plugin](https://vuejs.org/guide/reusability/plugins.html) that creates the store and
+[Controller](./Controller.md), and provides them to every component in the app. Install it once,
+before `app.mount()`; composables only work in components of an app it is installed on.
+
+```ts title="main.ts"
+import { createApp } from 'vue';
+import { DataClientPlugin } from '@data-client/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(DataClientPlugin);
+app.mount('#app');
+```
+
+[Managers](./Manager.md) start when the plugin is installed, and stop when the app is unmounted.
+
+## Options
+
+```ts
+app.use(DataClientPlugin, options);
+```
+
+```typescript
+interface ProvideOptions {
+  managers?: Manager[];
+  initialState?: State<unknown>;
+  Controller?: typeof Controller;
+  gcPolicy?: GCInterface;
+}
+```
+
+### managers?: Manager[] {#managers}
+
+List of [Managers](./Manager.md) to use. This is the main extensibility point of the store.
+
+[getDefaultManagers()](./getDefaultManagers.md) can be used to extend the default managers.
+
+```ts title="main.ts"
+import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  managers: [...getDefaultManagers(), new MyManager()],
+});
+```
+
+Defaults to `getDefaultManagers()`:
+
+Default Production:
+
+```typescript
+[new NetworkManager(), new SubscriptionManager(PollingSubscription)];
+```
+
+Default Development:
+
+```typescript
+[
+  new DevToolsManager(),
+  new NetworkManager(),
+  new SubscriptionManager(PollingSubscription),
+];
+```
+
+### initialState?: State&lt;unknown\> {#initialState}
+
+Instead of starting with an empty cache, you can provide your own initial state. This can
+be useful for testing, or rehydrating the cache state when using server side rendering.
+[mockInitialState()](./mockInitialState.md) builds one from fixtures.
+
+```ts title="main.ts"
+app.use(DataClientPlugin, { initialState: window.__INITIAL_STATE__ });
+```
+
+```typescript
+export interface State<T> {
+  readonly entities: {
+    readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
+  };
+  readonly endpoints: {
+    readonly [key: string]: unknown | PK[] | PK | undefined;
+  };
+  readonly indexes: NormalizedIndex;
+  readonly meta: {
+    readonly [key: string]: {
+      readonly date: number;
+      readonly fetchedAt: number;
+      readonly expiresAt: number;
+      readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
+      readonly invalidated?: boolean;
+      readonly errorPolicy?: 'hard' | 'soft' | undefined;
+    };
+  };
+  readonly entitiesMeta: {
+    readonly [entityKey: string]: {
+      readonly [pk: string]: {
+        readonly date: number;
+        readonly expiresAt: number;
+        readonly fetchedAt: number;
+      };
+    };
+  };
+  readonly optimistic: (SetResponseAction | OptimisticAction)[];
+  readonly lastReset: number;
+}
+```
+
+### Controller?: typeof Controller {#Controller}
+
+This allows you to extend [Controller](./Controller.md) to provide additional functionality.
+This might be useful if you have additional actions you want to dispatch to custom [Managers](./Manager.md).
+
+```ts title="main.ts"
+import { Controller, DataClientPlugin } from '@data-client/vue';
+
+class MyController extends Controller {
+  doSomething = () => {
+    console.log('hi');
+  };
+}
+
+app.use(DataClientPlugin, { Controller: MyController });
+```
+
+[useController()](./useController.md) and `$dataClient` then return a `MyController` instance;
+cast to use its additional members.
+
+### gcPolicy?: GCInterface {#gcPolicy}
+
+Removes data from the store once no component uses it and it has gone stale. By default, nothing
+is ever removed.
+
+```ts title="main.ts"
+import { DataClientPlugin, GCPolicy } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  // sweep every 10 minutes
+  gcPolicy: new GCPolicy({ intervalMS: 60 * 1000 * 10 }),
+});
+```
+
+```ts
+new GCPolicy({
+  // how often to sweep (default 5 minutes)
+  intervalMS: 60 * 1000 * 5,
+  // how many stale lifetimes before data is removed (default 2)
+  expiryMultiplier: 2,
+  // or choose when unused data is removed (replaces expiryMultiplier)
+  // here: one minute after it goes stale
+  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
+});
+```
+
+## $dataClient {#dataclient}
+
+The plugin also adds the [Controller](./Controller.md) as the `$dataClient` global property, so
+templates and Options API components can use it without [useController()](./useController.md).
+
+```html title="DeleteTodo.vue"
+<script setup lang="ts">
+  import { TodoResource } from '@/resources/Todo';
+
+  defineProps<{ id: number }>();
+</script>
+
+<template>
+  <button @click="$dataClient.fetch(TodoResource.delete, { id })">
+    Delete
+  </button>
+</template>
+```
+
+`$dataClient` is typed as `Controller` on `ComponentCustomProperties`.
+
+## Using composables
+
+Composables like [useSuspense()](./useSuspense.md) must run during a component's `setup`, so Vue
+knows which app's store to use. Awaiting them requires `<script setup>`: in a hand-written
+`async setup()`, composables called after the first `await` lose the component instance and throw.
+
+```html title="TodoDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { TodoResource } from '@/resources/Todo';
+  import { UserResource } from '@/resources/User';
+
+  const todo = await useSuspense(TodoResource.get, { id: 1 });
+  // still works after the await
+  const user = await useSuspense(UserResource.get, {
+    id: todo.value.userId,
+  });
+</script>
+```
+
+Components that `await` must render inside a [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html)
+boundary.
diff --git a/docs/core/api/DataProvider.md b/docs/core/api/DataProvider.md
index 1faf202536a6..23f783193e5f 100644
--- a/docs/core/api/DataProvider.md
+++ b/docs/core/api/DataProvider.md
@@ -48,9 +48,10 @@ export interface State<T> {
   readonly meta: {
     readonly [key: string]: {
       readonly date: number;
-      readonly error?: ErrorTypes;
+      readonly fetchedAt: number;
       readonly expiresAt: number;
       readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
       readonly invalidated?: boolean;
       readonly errorPolicy?: 'hard' | 'soft' | undefined;
     };
diff --git a/docs/core/api/DevToolsManager.md b/docs/core/api/DevToolsManager.md
index 7f2194ed06b1..c4c0c3369054 100644
--- a/docs/core/api/DevToolsManager.md
+++ b/docs/core/api/DevToolsManager.md
@@ -124,7 +124,7 @@ __DC_CONTROLLERS__.get('Data Client: My App').getState();
 
 This is useful for AI coding assistants using the [Chrome DevTools MCP](https://developer.chrome.com/blog/chrome-devtools-mcp)
 or [Expo MCP](https://docs.expo.dev/eas/ai/mcp/) to programmatically inspect and interact
-with the store. Each :react[[DataProvider](/docs/api/DataProvider)]:vue[installed DataClientPlugin] registers independently, so
+with the store. Each :react[[DataProvider](/docs/api/DataProvider)]:vue[installed [DataClientPlugin](./DataClientPlugin.md)] registers independently, so
 multiple :react[providers]:vue[apps] on the same page are fully supported.
 
 Controllers are removed from the map when `cleanup()` is called.
diff --git a/docs/core/api/Manager.md b/docs/core/api/Manager.md
index 45843e65ba30..86b6c0315a98 100644
--- a/docs/core/api/Manager.md
+++ b/docs/core/api/Manager.md
@@ -75,7 +75,7 @@ have internal state, so it is important to not constantly recreate them.
 
 :::vue
 
-Use the `managers` option of [DataClientPlugin](../getting-started/installation.md). The plugin is
+Use the [managers](./DataClientPlugin.md#managers) option of [DataClientPlugin](./DataClientPlugin.md). The plugin is
 installed once per app, so managers are created once.
 
 :::
diff --git a/docs/core/api/getDefaultManagers.md b/docs/core/api/getDefaultManagers.md
index e4358106aee1..dbd18870a33c 100644
--- a/docs/core/api/getDefaultManagers.md
+++ b/docs/core/api/getDefaultManagers.md
@@ -8,7 +8,7 @@ import StackBlitz from '@site/src/components/StackBlitz';
 
 # getDefaultManagers()
 
-`getDefaultManagers` returns an Array of [Managers](./Manager.md) to be sent to :react[[&lt;DataProvider />](./DataProvider.md)]:vue[[DataClientPlugin](../getting-started/installation.md#add-provider-at-top-level-component)].
+`getDefaultManagers` returns an Array of [Managers](./Manager.md) to be sent to :react[[&lt;DataProvider />](./DataProvider.md)]:vue[[DataClientPlugin](./DataClientPlugin.md)].
 
 This makes it simple to configure and add custom [Managers](./Manager.md), while remaining robust against
 any potential changes to the default managers.
@@ -63,8 +63,8 @@ app.mount('#app');
 ```
 
 When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments.
-See [installation](../getting-started/installation.md#add-provider-at-top-level-component) for the
-other `DataClientPlugin` options.
+See [DataClientPlugin](./DataClientPlugin.md#options) for the
+other options.
 
 :::
 
diff --git a/docs/core/api/mockInitialState.md b/docs/core/api/mockInitialState.md
index 50d77bdbc6fa..f2bac79f6794 100644
--- a/docs/core/api/mockInitialState.md
+++ b/docs/core/api/mockInitialState.md
@@ -23,7 +23,7 @@ This prop specifies the [fixtures](./Fixtures.md) to use data from. Each item re
 [Endpoint](/rest/api/Endpoint) and params. `Result` contains the JSON response expected from said fetch.
 
 
-This can be used as the :react[initialState prop for [&lt;DataProvider /\>](./DataProvider)]:vue[`initialState` option for [DataClientPlugin](../getting-started/installation.md)]
+This can be used as the :react[initialState prop for [&lt;DataProvider /\>](./DataProvider)]:vue[[initialState option](./DataClientPlugin.md#initialState) for [DataClientPlugin](./DataClientPlugin.md)]
 
 ## Example
 
diff --git a/docs/core/api/useController.md b/docs/core/api/useController.md
index 578cbc2b4553..a0e5b5df60ed 100644
--- a/docs/core/api/useController.md
+++ b/docs/core/api/useController.md
@@ -76,8 +76,8 @@ function MyComponent({ id }) {
 ```
 
 `useController()` must be called inside `<script setup>` (or `setup()`), and requires the
-[DataClientPlugin](../getting-started/installation.md#add-provider-at-top-level-component) to be installed.
-The same [Controller](./Controller.md) is also available in templates and the Options API as `$dataClient`.
+[DataClientPlugin](./DataClientPlugin.md) to be installed.
+The same [Controller](./Controller.md) is also available in templates and the Options API as [`$dataClient`](./DataClientPlugin.md#dataclient).
 
 :::
 
diff --git a/docs/core/concepts/managers.md b/docs/core/concepts/managers.md
index 4c13ee7f6b14..d329f058508f 100644
--- a/docs/core/concepts/managers.md
+++ b/docs/core/concepts/managers.md
@@ -225,7 +225,7 @@ export default class TabSyncManager implements Manager {
 
 Persist the store with [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
 (here via [idb-keyval](https://www.npmjs.com/package/idb-keyval)); restore it with
-:react[[DataProvider's initialState](../api/DataProvider.md#initialState)]:vue[DataClientPlugin's `initialState` option]. IndexedDB writes are
+:react[[DataProvider's initialState](../api/DataProvider.md#initialState)]:vue[[DataClientPlugin's initialState option](../api/DataClientPlugin.md#initialState)]. IndexedDB writes are
 asynchronous and use [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
 instead of blocking the main thread with JSON serialization like `localStorage` would.
 Debouncing writes keeps rapid action bursts cheap. Consider [expiry times](./expiry-policy.md)
diff --git a/docs/core/shared/_installation.mdx b/docs/core/shared/_installation.mdx
index 3fe14137d35b..236d922aa65d 100644
--- a/docs/core/shared/_installation.mdx
+++ b/docs/core/shared/_installation.mdx
@@ -135,4 +135,6 @@ app.use(DataClientPlugin, {
 app.mount('#app');
 ```
 
+See [DataClientPlugin](../api/DataClientPlugin.md) for all options.
+
 ::::
diff --git a/packages/vue/src/__tests__/__snapshots__/context.test.ts.snap b/packages/vue/src/__tests__/__snapshots__/context.test.ts.snap
index 8f57b7413459..3f6a410fb66c 100644
--- a/packages/vue/src/__tests__/__snapshots__/context.test.ts.snap
+++ b/packages/vue/src/__tests__/__snapshots__/context.test.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`context injectState should log error in development when state is not provided 1`] = `
 "Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.
-Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component
+Adding DataClientPlugin: https://dataclient.io/vue/api/DataClientPlugin
 Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions"
 `;
 
 exports[`context useController should log error in development when controller is not provided 1`] = `
 "Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.
-Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component
+Adding DataClientPlugin: https://dataclient.io/vue/api/DataClientPlugin
 Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions"
 `;
diff --git a/packages/vue/src/__tests__/context.test.ts b/packages/vue/src/__tests__/context.test.ts
index 701c4d211c04..10a3b33c5973 100644
--- a/packages/vue/src/__tests__/context.test.ts
+++ b/packages/vue/src/__tests__/context.test.ts
@@ -140,7 +140,7 @@ describe('context', () => {
       expect(consoleErrorSpy.mock.calls[0][0]).toMatchSnapshot();
       expect(consoleErrorSpy).toHaveBeenCalledWith(
         expect.stringContaining(
-          'https://dataclient.io/docs/getting-started/installation',
+          'https://dataclient.io/vue/api/DataClientPlugin',
         ),
       );
     });
diff --git a/packages/vue/src/context.ts b/packages/vue/src/context.ts
index afe8ae078bad..af1133e134de 100644
--- a/packages/vue/src/context.ts
+++ b/packages/vue/src/context.ts
@@ -20,7 +20,7 @@ export function useController(): Controller {
     if (process.env.NODE_ENV !== 'production') {
       console.error(
         'Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.\n' +
-          'Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component\n' +
+          'Adding DataClientPlugin: https://dataclient.io/vue/api/DataClientPlugin\n' +
           'Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions',
       );
     }
@@ -36,7 +36,7 @@ export function injectState(): ShallowRef<State<unknown>> {
     if (process.env.NODE_ENV !== 'production') {
       console.error(
         'Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.\n' +
-          'Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component\n' +
+          'Adding DataClientPlugin: https://dataclient.io/vue/api/DataClientPlugin\n' +
           'Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions',
       );
     }
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 053024acce17..00d79d4ea457 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,4 +1,9 @@
-export { Controller, ExpiryStatus, actionTypes } from '@data-client/core';
+export {
+  Controller,
+  ExpiryStatus,
+  GCPolicy,
+  actionTypes,
+} from '@data-client/core';
 export type {
   EndpointExtraOptions,
   FetchFunction,
diff --git a/website/sidebars.json b/website/sidebars.json
index 973399303366..8b6b013c003e 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -200,6 +200,10 @@
         }
       ]
     },
+    {
+      "type": "doc",
+      "id": "api/DataClientPlugin"
+    },
     {
       "type": "doc",
       "id": "api/Controller"

From 4ee7ed3f4bd56567a3fb53555664e06783c3f5c7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 11:22:36 +0000
Subject: [PATCH 2/4] docs: Share State type and GCPolicy options between
 provider pages

Moves the State interface and GCPolicy options into shared partials used
by both DataProvider and DataClientPlugin, documents DataProvider's
gcPolicy prop, and links the Vue page to getDefaultManagers() instead of
repeating the default manager lists.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LHNQGac8kwCPEnyPLRYfZu
---
 docs/core/api/DataClientPlugin.vue.md | 61 +++------------------------
 docs/core/api/DataProvider.md         | 56 ++++++++++--------------
 docs/core/shared/_gc_policy.mdx       | 11 +++++
 docs/core/shared/_state_type.mdx      | 33 +++++++++++++++
 4 files changed, 73 insertions(+), 88 deletions(-)
 create mode 100644 docs/core/shared/_gc_policy.mdx
 create mode 100644 docs/core/shared/_state_type.mdx

diff --git a/docs/core/api/DataClientPlugin.vue.md b/docs/core/api/DataClientPlugin.vue.md
index 3fc7f5a15bd4..384daafe1555 100644
--- a/docs/core/api/DataClientPlugin.vue.md
+++ b/docs/core/api/DataClientPlugin.vue.md
@@ -4,6 +4,9 @@ sidebar_label: DataClientPlugin
 description: High performance, globally consistent data management in Vue
 ---
 
+import StateType from '../shared/_state_type.mdx';
+import GCPolicyOptions from '../shared/_gc_policy.mdx';
+
 # DataClientPlugin
 
 [Vue plugin](https://vuejs.org/guide/reusability/plugins.html) that creates the store and
@@ -41,7 +44,7 @@ interface ProvideOptions {
 
 List of [Managers](./Manager.md) to use. This is the main extensibility point of the store.
 
-[getDefaultManagers()](./getDefaultManagers.md) can be used to extend the default managers.
+Defaults to [getDefaultManagers()](./getDefaultManagers.md), which can also be used to extend the defaults.
 
 ```ts title="main.ts"
 import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
@@ -51,14 +54,6 @@ app.use(DataClientPlugin, {
 });
 ```
 
-Defaults to `getDefaultManagers()`:
-
-Default Production:
-
-```typescript
-[new NetworkManager(), new SubscriptionManager(PollingSubscription)];
-```
-
 Default Development:
 
 ```typescript
@@ -79,39 +74,7 @@ be useful for testing, or rehydrating the cache state when using server side ren
 app.use(DataClientPlugin, { initialState: window.__INITIAL_STATE__ });
 ```
 
-```typescript
-export interface State<T> {
-  readonly entities: {
-    readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
-  };
-  readonly endpoints: {
-    readonly [key: string]: unknown | PK[] | PK | undefined;
-  };
-  readonly indexes: NormalizedIndex;
-  readonly meta: {
-    readonly [key: string]: {
-      readonly date: number;
-      readonly fetchedAt: number;
-      readonly expiresAt: number;
-      readonly prevExpiresAt?: number;
-      readonly error?: ErrorTypes;
-      readonly invalidated?: boolean;
-      readonly errorPolicy?: 'hard' | 'soft' | undefined;
-    };
-  };
-  readonly entitiesMeta: {
-    readonly [entityKey: string]: {
-      readonly [pk: string]: {
-        readonly date: number;
-        readonly expiresAt: number;
-        readonly fetchedAt: number;
-      };
-    };
-  };
-  readonly optimistic: (SetResponseAction | OptimisticAction)[];
-  readonly lastReset: number;
-}
-```
+<StateType />
 
 ### Controller?: typeof Controller {#Controller}
 
@@ -147,17 +110,7 @@ app.use(DataClientPlugin, {
 });
 ```
 
-```ts
-new GCPolicy({
-  // how often to sweep (default 5 minutes)
-  intervalMS: 60 * 1000 * 5,
-  // how many stale lifetimes before data is removed (default 2)
-  expiryMultiplier: 2,
-  // or choose when unused data is removed (replaces expiryMultiplier)
-  // here: one minute after it goes stale
-  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
-});
-```
+<GCPolicyOptions />
 
 ## $dataClient {#dataclient}
 
@@ -178,8 +131,6 @@ templates and Options API components can use it without [useController()](./useC
 </template>
 ```
 
-`$dataClient` is typed as `Controller` on `ComponentCustomProperties`.
-
 ## Using composables
 
 Composables like [useSuspense()](./useSuspense.md) must run during a component's `setup`, so Vue
diff --git a/docs/core/api/DataProvider.md b/docs/core/api/DataProvider.md
index 23f783193e5f..955611ec4dec 100644
--- a/docs/core/api/DataProvider.md
+++ b/docs/core/api/DataProvider.md
@@ -6,6 +6,8 @@ description: High performance, globally consistent data management in React
 ---
 
 import Installation from '../shared/\_installation.mdx';
+import StateType from '../shared/_state_type.mdx';
+import GCPolicyOptions from '../shared/_gc_policy.mdx';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -25,6 +27,7 @@ interface ProviderProps {
   managers?: Manager[];
   initialState?: State<unknown>;
   Controller?: typeof Controller;
+  gcPolicy?: GCInterface;
   devButton?:
     | 'bottom-right'
     | 'bottom-left'
@@ -36,39 +39,7 @@ interface ProviderProps {
 
 ### initialState: State&lt;unknown\> {#initialState}
 
-```typescript
-export interface State<T> {
-  readonly entities: {
-    readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
-  };
-  readonly endpoints: {
-    readonly [key: string]: unknown | PK[] | PK | undefined;
-  };
-  readonly indexes: NormalizedIndex;
-  readonly meta: {
-    readonly [key: string]: {
-      readonly date: number;
-      readonly fetchedAt: number;
-      readonly expiresAt: number;
-      readonly prevExpiresAt?: number;
-      readonly error?: ErrorTypes;
-      readonly invalidated?: boolean;
-      readonly errorPolicy?: 'hard' | 'soft' | undefined;
-    };
-  };
-  readonly entitiesMeta: {
-    readonly [entityKey: string]: {
-      readonly [pk: string]: {
-        readonly date: number;
-        readonly expiresAt: number;
-        readonly fetchedAt: number;
-      };
-    };
-  };
-  readonly optimistic: (SetResponseAction | OptimisticAction)[];
-  readonly lastReset: number;
-}
-```
+<StateType />
 
 Instead of starting with an empty cache, you can provide your own initial state. This can
 be useful for testing, or rehydrating the cache state when using server side rendering.
@@ -114,6 +85,25 @@ const RealApp = (
 );
 ```
 
+### gcPolicy?: GCInterface {#gcPolicy}
+
+Removes data from the store once no component uses it and it has gone stale. Defaults to
+`new GCPolicy()`.
+
+```tsx
+import { DataProvider, GCPolicy } from '@data-client/react';
+
+const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 });
+
+const RealApp = (
+  <DataProvider gcPolicy={gcPolicy}>
+    <App />
+  </DataProvider>
+);
+```
+
+<GCPolicyOptions />
+
 ### devButton
 
 <img src="/img/client-logo.svg" style={{float:'right',width:'40px'}} />
diff --git a/docs/core/shared/_gc_policy.mdx b/docs/core/shared/_gc_policy.mdx
new file mode 100644
index 000000000000..b815adcdebcc
--- /dev/null
+++ b/docs/core/shared/_gc_policy.mdx
@@ -0,0 +1,11 @@
+```ts title="GCPolicy options"
+new GCPolicy({
+  // how often to sweep (default 5 minutes)
+  intervalMS: 60 * 1000 * 5,
+  // how many stale lifetimes before data is removed (default 2)
+  expiryMultiplier: 2,
+  // or choose when unused data is removed (replaces expiryMultiplier)
+  // here: one minute after it goes stale
+  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
+});
+```
diff --git a/docs/core/shared/_state_type.mdx b/docs/core/shared/_state_type.mdx
new file mode 100644
index 000000000000..2edad5dc911a
--- /dev/null
+++ b/docs/core/shared/_state_type.mdx
@@ -0,0 +1,33 @@
+```typescript
+export interface State<T> {
+  readonly entities: {
+    readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
+  };
+  readonly endpoints: {
+    readonly [key: string]: unknown | PK[] | PK | undefined;
+  };
+  readonly indexes: NormalizedIndex;
+  readonly meta: {
+    readonly [key: string]: {
+      readonly date: number;
+      readonly fetchedAt: number;
+      readonly expiresAt: number;
+      readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
+      readonly invalidated?: boolean;
+      readonly errorPolicy?: 'hard' | 'soft' | undefined;
+    };
+  };
+  readonly entitiesMeta: {
+    readonly [entityKey: string]: {
+      readonly [pk: string]: {
+        readonly date: number;
+        readonly expiresAt: number;
+        readonly fetchedAt: number;
+      };
+    };
+  };
+  readonly optimistic: (SetResponseAction | OptimisticAction)[];
+  readonly lastReset: number;
+}
+```

From f00e098f98c254c181c14f77cd4b19b15ebd3f3d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Oct 2026 04:19:36 +0000
Subject: [PATCH 3/4] docs(skills): Add DataClientPlugin to Vue and setup skill
 references

Lists the new DataClientPlugin page in the data-client-vue and
data-client-setup references.json and regenerates skill references
(yarn build:skills) for this PR's doc changes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LHNQGac8kwCPEnyPLRYfZu
---
 .../references/Actions.vue.md                 |   2 +-
 .../references/Manager.vue.md                 |   2 +-
 .../references/getDefaultManagers.vue.md      |   6 +-
 .../references/managers.vue.md                |   2 +-
 .../references/DataProvider.md                |  33 ++-
 .agents/skills/data-client-setup/SKILL.md     |   3 +-
 .../skills/data-client-setup/references.json  |   1 +
 .../references/DataClientPlugin.md            | 190 ++++++++++++++++++
 .../references/DataProvider.md                |  33 ++-
 .../references/getDefaultManagers.vue.md      |   6 +-
 .../references/installation.vue.md            |   2 +
 .agents/skills/data-client-vue/SKILL.md       |   3 +-
 .../skills/data-client-vue/references.json    |   1 +
 .../data-client-vue/references/Actions.md     |   2 +-
 .../references/DataClientPlugin.md            | 190 ++++++++++++++++++
 .../references/getDefaultManagers.md          |   6 +-
 .../references/installation.md                |   2 +
 .../references/useController.md               |   4 +-
 18 files changed, 469 insertions(+), 19 deletions(-)
 create mode 100644 .agents/skills/data-client-setup/references/DataClientPlugin.md
 create mode 100644 .agents/skills/data-client-vue/references/DataClientPlugin.md

diff --git a/.agents/skills/data-client-manager/references/Actions.vue.md b/.agents/skills/data-client-manager/references/Actions.vue.md
index bdf040663376..016c56caad2e 100644
--- a/.agents/skills/data-client-manager/references/Actions.vue.md
+++ b/.agents/skills/data-client-manager/references/Actions.vue.md
@@ -6,7 +6,7 @@ Actions are minimal descriptions of store updates.
 
 They are [dispatched by Controller methods](./Controller.vue.md#action-dispatchers) ->
 [read and consumed by Manager middleware](./Manager.vue.md#reading-and-consuming-actions) ->
-processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](https://dataclient.io/vue/getting-started/installation)
+processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin)
 to update the store's state.
 
 Many actions use the same meta information:
diff --git a/.agents/skills/data-client-manager/references/Manager.vue.md b/.agents/skills/data-client-manager/references/Manager.vue.md
index 88ec2bad20b3..df1a24468026 100644
--- a/.agents/skills/data-client-manager/references/Manager.vue.md
+++ b/.agents/skills/data-client-manager/references/Manager.vue.md
@@ -52,7 +52,7 @@ Provides any cleanup of dangling resources after manager is no longer in use.
 
 ## Adding managers to Reactive Data Client {#adding}
 
-Use the `managers` option of [DataClientPlugin](https://dataclient.io/vue/getting-started/installation). The plugin is
+Use the [managers](https://dataclient.io/vue/api/DataClientPlugin#managers) option of [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin). The plugin is
 installed once per app, so managers are created once.
 
 **Web**
diff --git a/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md b/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md
index a51bbe1226ad..817eecfb4363 100644
--- a/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md
+++ b/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md
@@ -2,7 +2,7 @@
 
 # getDefaultManagers()
 
-`getDefaultManagers` returns an Array of [Managers](./Manager.vue.md) to be sent to [DataClientPlugin](https://dataclient.io/vue/getting-started/installation#add-provider-at-top-level-component).
+`getDefaultManagers` returns an Array of [Managers](./Manager.vue.md) to be sent to [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin).
 
 This makes it simple to configure and add custom [Managers](./Manager.vue.md), while remaining robust against
 any potential changes to the default managers.
@@ -29,8 +29,8 @@ app.mount('#app');
 ```
 
 When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments.
-See [installation](https://dataclient.io/vue/getting-started/installation#add-provider-at-top-level-component) for the
-other `DataClientPlugin` options.
+See [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin#options) for the
+other options.
 
 ## Arguments
 
diff --git a/.agents/skills/data-client-manager/references/managers.vue.md b/.agents/skills/data-client-manager/references/managers.vue.md
index 13a4ad7d80c2..5a8bfea1151a 100644
--- a/.agents/skills/data-client-manager/references/managers.vue.md
+++ b/.agents/skills/data-client-manager/references/managers.vue.md
@@ -200,7 +200,7 @@ export default class TabSyncManager implements Manager {
 
 Persist the store with [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
 (here via [idb-keyval](https://www.npmjs.com/package/idb-keyval)); restore it with
-DataClientPlugin's `initialState` option. IndexedDB writes are
+[DataClientPlugin's initialState option](https://dataclient.io/vue/api/DataClientPlugin#initialState). IndexedDB writes are
 asynchronous and use [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
 instead of blocking the main thread with JSON serialization like `localStorage` would.
 Debouncing writes keeps rapid action bursts cheap. Consider [expiry times](https://dataclient.io/vue/concepts/expiry-policy)
diff --git a/.agents/skills/data-client-react/references/DataProvider.md b/.agents/skills/data-client-react/references/DataProvider.md
index e04910c1b113..31976d215da8 100644
--- a/.agents/skills/data-client-react/references/DataProvider.md
+++ b/.agents/skills/data-client-react/references/DataProvider.md
@@ -91,6 +91,7 @@ interface ProviderProps {
   managers?: Manager[];
   initialState?: State<unknown>;
   Controller?: typeof Controller;
+  gcPolicy?: GCInterface;
   devButton?:
     | 'bottom-right'
     | 'bottom-left'
@@ -114,9 +115,10 @@ export interface State<T> {
   readonly meta: {
     readonly [key: string]: {
       readonly date: number;
-      readonly error?: ErrorTypes;
+      readonly fetchedAt: number;
       readonly expiresAt: number;
       readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
       readonly invalidated?: boolean;
       readonly errorPolicy?: 'hard' | 'soft' | undefined;
     };
@@ -179,6 +181,35 @@ const RealApp = (
 );
 ```
 
+### gcPolicy?: GCInterface {#gcPolicy}
+
+Removes data from the store once no component uses it and it has gone stale. Defaults to
+`new GCPolicy()`.
+
+```tsx
+import { DataProvider, GCPolicy } from '@data-client/react';
+
+const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 });
+
+const RealApp = (
+  <DataProvider gcPolicy={gcPolicy}>
+    <App />
+  </DataProvider>
+);
+```
+
+```ts title="GCPolicy options"
+new GCPolicy({
+  // how often to sweep (default 5 minutes)
+  intervalMS: 60 * 1000 * 5,
+  // how many stale lifetimes before data is removed (default 2)
+  expiryMultiplier: 2,
+  // or choose when unused data is removed (replaces expiryMultiplier)
+  // here: one minute after it goes stale
+  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
+});
+```
+
 ### devButton
 
 In development, a small button will appear that gives easy access to [browser devtools](https://dataclient.io/docs/getting-started/debugging) if
diff --git a/.agents/skills/data-client-setup/SKILL.md b/.agents/skills/data-client-setup/SKILL.md
index 6fb2307d7099..b7900f05b44f 100644
--- a/.agents/skills/data-client-setup/SKILL.md
+++ b/.agents/skills/data-client-setup/SKILL.md
@@ -272,6 +272,7 @@ Vue projects: read `<name>.vue.md` instead of `<name>.md` when it exists.
 
 For detailed API documentation, see the [references](references/) directory:
 
-- [DataProvider](references/DataProvider.md) - Root provider component
+- [DataProvider](references/DataProvider.md) - Root provider component (React)
+- [DataClientPlugin](references/DataClientPlugin.md) - Plugin options (Vue)
 - [installation](references/installation.md) - Installation guide
 - [getDefaultManagers](references/getDefaultManagers.md) - Default managers
diff --git a/.agents/skills/data-client-setup/references.json b/.agents/skills/data-client-setup/references.json
index b45a88570842..59ea6a6405d1 100644
--- a/.agents/skills/data-client-setup/references.json
+++ b/.agents/skills/data-client-setup/references.json
@@ -4,6 +4,7 @@
     "vue"
   ],
   "docs": {
+    "DataClientPlugin.md": "docs/core/api/DataClientPlugin.vue.md",
     "DataProvider.md": "docs/core/api/DataProvider.md",
     "getDefaultManagers.md": "docs/core/api/getDefaultManagers.md",
     "installation.md": "docs/core/getting-started/installation.md"
diff --git a/.agents/skills/data-client-setup/references/DataClientPlugin.md b/.agents/skills/data-client-setup/references/DataClientPlugin.md
new file mode 100644
index 000000000000..2019485c8f3e
--- /dev/null
+++ b/.agents/skills/data-client-setup/references/DataClientPlugin.md
@@ -0,0 +1,190 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/DataClientPlugin.vue.md (react). Edit the source doc, not this file. -->
+
+# DataClientPlugin
+
+[Vue plugin](https://vuejs.org/guide/reusability/plugins.html) that creates the store and
+[Controller](https://dataclient.io/docs/api/Controller), and provides them to every component in the app. Install it once,
+before `app.mount()`; composables only work in components of an app it is installed on.
+
+```ts title="main.ts"
+import { createApp } from 'vue';
+import { DataClientPlugin } from '@data-client/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(DataClientPlugin);
+app.mount('#app');
+```
+
+[Managers](https://dataclient.io/docs/api/Manager) start when the plugin is installed, and stop when the app is unmounted.
+
+## Options
+
+```ts
+app.use(DataClientPlugin, options);
+```
+
+```typescript
+interface ProvideOptions {
+  managers?: Manager[];
+  initialState?: State<unknown>;
+  Controller?: typeof Controller;
+  gcPolicy?: GCInterface;
+}
+```
+
+### managers?: Manager\[] {#managers}
+
+List of [Managers](https://dataclient.io/docs/api/Manager) to use. This is the main extensibility point of the store.
+
+Defaults to [getDefaultManagers()](./getDefaultManagers.md), which can also be used to extend the defaults.
+
+```ts title="main.ts"
+import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  managers: [...getDefaultManagers(), new MyManager()],
+});
+```
+
+Default Development:
+
+```typescript
+[
+  new DevToolsManager(),
+  new NetworkManager(),
+  new SubscriptionManager(PollingSubscription),
+];
+```
+
+### initialState?: State\<unknown> {#initialState}
+
+Instead of starting with an empty cache, you can provide your own initial state. This can
+be useful for testing, or rehydrating the cache state when using server side rendering.
+[mockInitialState()](https://dataclient.io/docs/api/mockInitialState) builds one from fixtures.
+
+```ts title="main.ts"
+app.use(DataClientPlugin, { initialState: window.__INITIAL_STATE__ });
+```
+
+```typescript
+export interface State<T> {
+  readonly entities: {
+    readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
+  };
+  readonly endpoints: {
+    readonly [key: string]: unknown | PK[] | PK | undefined;
+  };
+  readonly indexes: NormalizedIndex;
+  readonly meta: {
+    readonly [key: string]: {
+      readonly date: number;
+      readonly fetchedAt: number;
+      readonly expiresAt: number;
+      readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
+      readonly invalidated?: boolean;
+      readonly errorPolicy?: 'hard' | 'soft' | undefined;
+    };
+  };
+  readonly entitiesMeta: {
+    readonly [entityKey: string]: {
+      readonly [pk: string]: {
+        readonly date: number;
+        readonly expiresAt: number;
+        readonly fetchedAt: number;
+      };
+    };
+  };
+  readonly optimistic: (SetResponseAction | OptimisticAction)[];
+  readonly lastReset: number;
+}
+```
+
+### Controller?: typeof Controller {#Controller}
+
+This allows you to extend [Controller](https://dataclient.io/docs/api/Controller) to provide additional functionality.
+This might be useful if you have additional actions you want to dispatch to custom [Managers](https://dataclient.io/docs/api/Manager).
+
+```ts title="main.ts"
+import { Controller, DataClientPlugin } from '@data-client/vue';
+
+class MyController extends Controller {
+  doSomething = () => {
+    console.log('hi');
+  };
+}
+
+app.use(DataClientPlugin, { Controller: MyController });
+```
+
+[useController()](https://dataclient.io/docs/api/useController) and `$dataClient` then return a `MyController` instance;
+cast to use its additional members.
+
+### gcPolicy?: GCInterface {#gcPolicy}
+
+Removes data from the store once no component uses it and it has gone stale. By default, nothing
+is ever removed.
+
+```ts title="main.ts"
+import { DataClientPlugin, GCPolicy } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  // sweep every 10 minutes
+  gcPolicy: new GCPolicy({ intervalMS: 60 * 1000 * 10 }),
+});
+```
+
+```ts title="GCPolicy options"
+new GCPolicy({
+  // how often to sweep (default 5 minutes)
+  intervalMS: 60 * 1000 * 5,
+  // how many stale lifetimes before data is removed (default 2)
+  expiryMultiplier: 2,
+  // or choose when unused data is removed (replaces expiryMultiplier)
+  // here: one minute after it goes stale
+  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
+});
+```
+
+## $dataClient {#dataclient}
+
+The plugin also adds the [Controller](https://dataclient.io/docs/api/Controller) as the `$dataClient` global property, so
+templates and Options API components can use it without [useController()](https://dataclient.io/docs/api/useController).
+
+```html title="DeleteTodo.vue"
+<script setup lang="ts">
+  import { TodoResource } from '@/resources/Todo';
+
+  defineProps<{ id: number }>();
+</script>
+
+<template>
+  <button @click="$dataClient.fetch(TodoResource.delete, { id })">
+    Delete
+  </button>
+</template>
+```
+
+## Using composables
+
+Composables like [useSuspense()](https://dataclient.io/docs/api/useSuspense) must run during a component's `setup`, so Vue
+knows which app's store to use. Awaiting them requires `<script setup>`: in a hand-written
+`async setup()`, composables called after the first `await` lose the component instance and throw.
+
+```html title="TodoDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { TodoResource } from '@/resources/Todo';
+  import { UserResource } from '@/resources/User';
+
+  const todo = await useSuspense(TodoResource.get, { id: 1 });
+  // still works after the await
+  const user = await useSuspense(UserResource.get, {
+    id: todo.value.userId,
+  });
+</script>
+```
+
+Components that `await` must render inside a [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html)
+boundary.
diff --git a/.agents/skills/data-client-setup/references/DataProvider.md b/.agents/skills/data-client-setup/references/DataProvider.md
index 73cee8e5d20a..0f8cad55d075 100644
--- a/.agents/skills/data-client-setup/references/DataProvider.md
+++ b/.agents/skills/data-client-setup/references/DataProvider.md
@@ -91,6 +91,7 @@ interface ProviderProps {
   managers?: Manager[];
   initialState?: State<unknown>;
   Controller?: typeof Controller;
+  gcPolicy?: GCInterface;
   devButton?:
     | 'bottom-right'
     | 'bottom-left'
@@ -114,9 +115,10 @@ export interface State<T> {
   readonly meta: {
     readonly [key: string]: {
       readonly date: number;
-      readonly error?: ErrorTypes;
+      readonly fetchedAt: number;
       readonly expiresAt: number;
       readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
       readonly invalidated?: boolean;
       readonly errorPolicy?: 'hard' | 'soft' | undefined;
     };
@@ -179,6 +181,35 @@ const RealApp = (
 );
 ```
 
+### gcPolicy?: GCInterface {#gcPolicy}
+
+Removes data from the store once no component uses it and it has gone stale. Defaults to
+`new GCPolicy()`.
+
+```tsx
+import { DataProvider, GCPolicy } from '@data-client/react';
+
+const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 });
+
+const RealApp = (
+  <DataProvider gcPolicy={gcPolicy}>
+    <App />
+  </DataProvider>
+);
+```
+
+```ts title="GCPolicy options"
+new GCPolicy({
+  // how often to sweep (default 5 minutes)
+  intervalMS: 60 * 1000 * 5,
+  // how many stale lifetimes before data is removed (default 2)
+  expiryMultiplier: 2,
+  // or choose when unused data is removed (replaces expiryMultiplier)
+  // here: one minute after it goes stale
+  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
+});
+```
+
 ### devButton
 
 In development, a small button will appear that gives easy access to [browser devtools](https://dataclient.io/docs/getting-started/debugging) if
diff --git a/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md b/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md
index 362ad7d84a3f..299d18b75867 100644
--- a/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md
+++ b/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md
@@ -2,7 +2,7 @@
 
 # getDefaultManagers()
 
-`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./installation.vue.md#add-provider-at-top-level-component).
+`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./DataClientPlugin.md).
 
 This makes it simple to configure and add custom [Managers](https://dataclient.io/vue/api/Manager), while remaining robust against
 any potential changes to the default managers.
@@ -29,8 +29,8 @@ app.mount('#app');
 ```
 
 When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments.
-See [installation](./installation.vue.md#add-provider-at-top-level-component) for the
-other `DataClientPlugin` options.
+See [DataClientPlugin](./DataClientPlugin.md#options) for the
+other options.
 
 ## Arguments
 
diff --git a/.agents/skills/data-client-setup/references/installation.vue.md b/.agents/skills/data-client-setup/references/installation.vue.md
index bc39ca65a263..71e4237b65de 100644
--- a/.agents/skills/data-client-setup/references/installation.vue.md
+++ b/.agents/skills/data-client-setup/references/installation.vue.md
@@ -31,6 +31,8 @@ app.use(DataClientPlugin, {
 app.mount('#app');
 ```
 
+See [DataClientPlugin](./DataClientPlugin.md) for all options.
+
 [Next: Define Data »](https://dataclient.io/vue/getting-started/resource)
 
 ## Example
diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md
index 1ddcf0360a45..07a5ea11c08d 100644
--- a/.agents/skills/data-client-vue/SKILL.md
+++ b/.agents/skills/data-client-vue/SKILL.md
@@ -5,7 +5,7 @@ license: Apache 2.0
 ---
 ## Setup
 
-Install `DataClientPlugin` once with `app.use(DataClientPlugin)` ([installation](references/installation.md);
+Install [DataClientPlugin](references/DataClientPlugin.md) once with `app.use(DataClientPlugin)` ([installation](references/installation.md);
 apply the skill "data-client-setup" to set it up). Composables only work inside `<script setup>` of components
 below it. Awaiting composables (`await useSuspense()`) requires `<script setup>`: in a hand-written
 `async setup()`, composables called after the first `await` lose the component instance.
@@ -181,6 +181,7 @@ For detailed API documentation, see the [references](references/) directory:
 - [_AsyncBoundary.md](references/_AsyncBoundary.md) - Suspense and onErrorCaptured boundaries
 - [useLoading](references/useLoading.md);[_useLoading.md](references/_useLoading.md) - Track async mutation state
 - [useDebounce](references/useDebounce.md) - Debounce values
+- [DataClientPlugin](references/DataClientPlugin.md) - Plugin options (managers, initialState, gcPolicy) and `$dataClient`
 - [installation](references/installation.md) - Install `DataClientPlugin`
 - [getDefaultManagers](references/getDefaultManagers.md) - Configure `DataClientPlugin` managers
 - [data-dependency](references/data-dependency.md) - Rendering guide
diff --git a/.agents/skills/data-client-vue/references.json b/.agents/skills/data-client-vue/references.json
index 35c246e63c15..dbdea536c6e9 100644
--- a/.agents/skills/data-client-vue/references.json
+++ b/.agents/skills/data-client-vue/references.json
@@ -5,6 +5,7 @@
   "docs": {
     "Actions.md": "docs/core/api/Actions.md",
     "Controller.md": "docs/core/api/Controller.md",
+    "DataClientPlugin.md": "docs/core/api/DataClientPlugin.vue.md",
     "_AsyncBoundary.md": "docs/core/shared/_AsyncBoundary.mdx",
     "_VoteDemo.md": "docs/core/shared/_VoteDemo.mdx",
     "_pagination.md": "docs/core/shared/_pagination.mdx",
diff --git a/.agents/skills/data-client-vue/references/Actions.md b/.agents/skills/data-client-vue/references/Actions.md
index 2cc47ea8b422..f6ab37ca2714 100644
--- a/.agents/skills/data-client-vue/references/Actions.md
+++ b/.agents/skills/data-client-vue/references/Actions.md
@@ -6,7 +6,7 @@ Actions are minimal descriptions of store updates.
 
 They are [dispatched by Controller methods](./Controller.md#action-dispatchers) ->
 [read and consumed by Manager middleware](https://dataclient.io/vue/api/Manager#reading-and-consuming-actions) ->
-processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](./installation.md)
+processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](./DataClientPlugin.md)
 to update the store's state.
 
 Many actions use the same meta information:
diff --git a/.agents/skills/data-client-vue/references/DataClientPlugin.md b/.agents/skills/data-client-vue/references/DataClientPlugin.md
new file mode 100644
index 000000000000..742579660c5b
--- /dev/null
+++ b/.agents/skills/data-client-vue/references/DataClientPlugin.md
@@ -0,0 +1,190 @@
+<!-- Generated by `yarn build:skills` from docs/core/api/DataClientPlugin.vue.md (vue). Edit the source doc, not this file. -->
+
+# DataClientPlugin
+
+[Vue plugin](https://vuejs.org/guide/reusability/plugins.html) that creates the store and
+[Controller](./Controller.md), and provides them to every component in the app. Install it once,
+before `app.mount()`; composables only work in components of an app it is installed on.
+
+```ts title="main.ts"
+import { createApp } from 'vue';
+import { DataClientPlugin } from '@data-client/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(DataClientPlugin);
+app.mount('#app');
+```
+
+[Managers](https://dataclient.io/vue/api/Manager) start when the plugin is installed, and stop when the app is unmounted.
+
+## Options
+
+```ts
+app.use(DataClientPlugin, options);
+```
+
+```typescript
+interface ProvideOptions {
+  managers?: Manager[];
+  initialState?: State<unknown>;
+  Controller?: typeof Controller;
+  gcPolicy?: GCInterface;
+}
+```
+
+### managers?: Manager\[] {#managers}
+
+List of [Managers](https://dataclient.io/vue/api/Manager) to use. This is the main extensibility point of the store.
+
+Defaults to [getDefaultManagers()](./getDefaultManagers.md), which can also be used to extend the defaults.
+
+```ts title="main.ts"
+import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  managers: [...getDefaultManagers(), new MyManager()],
+});
+```
+
+Default Development:
+
+```typescript
+[
+  new DevToolsManager(),
+  new NetworkManager(),
+  new SubscriptionManager(PollingSubscription),
+];
+```
+
+### initialState?: State\<unknown> {#initialState}
+
+Instead of starting with an empty cache, you can provide your own initial state. This can
+be useful for testing, or rehydrating the cache state when using server side rendering.
+[mockInitialState()](https://dataclient.io/vue/api/mockInitialState) builds one from fixtures.
+
+```ts title="main.ts"
+app.use(DataClientPlugin, { initialState: window.__INITIAL_STATE__ });
+```
+
+```typescript
+export interface State<T> {
+  readonly entities: {
+    readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
+  };
+  readonly endpoints: {
+    readonly [key: string]: unknown | PK[] | PK | undefined;
+  };
+  readonly indexes: NormalizedIndex;
+  readonly meta: {
+    readonly [key: string]: {
+      readonly date: number;
+      readonly fetchedAt: number;
+      readonly expiresAt: number;
+      readonly prevExpiresAt?: number;
+      readonly error?: ErrorTypes;
+      readonly invalidated?: boolean;
+      readonly errorPolicy?: 'hard' | 'soft' | undefined;
+    };
+  };
+  readonly entitiesMeta: {
+    readonly [entityKey: string]: {
+      readonly [pk: string]: {
+        readonly date: number;
+        readonly expiresAt: number;
+        readonly fetchedAt: number;
+      };
+    };
+  };
+  readonly optimistic: (SetResponseAction | OptimisticAction)[];
+  readonly lastReset: number;
+}
+```
+
+### Controller?: typeof Controller {#Controller}
+
+This allows you to extend [Controller](./Controller.md) to provide additional functionality.
+This might be useful if you have additional actions you want to dispatch to custom [Managers](https://dataclient.io/vue/api/Manager).
+
+```ts title="main.ts"
+import { Controller, DataClientPlugin } from '@data-client/vue';
+
+class MyController extends Controller {
+  doSomething = () => {
+    console.log('hi');
+  };
+}
+
+app.use(DataClientPlugin, { Controller: MyController });
+```
+
+[useController()](./useController.md) and `$dataClient` then return a `MyController` instance;
+cast to use its additional members.
+
+### gcPolicy?: GCInterface {#gcPolicy}
+
+Removes data from the store once no component uses it and it has gone stale. By default, nothing
+is ever removed.
+
+```ts title="main.ts"
+import { DataClientPlugin, GCPolicy } from '@data-client/vue';
+
+app.use(DataClientPlugin, {
+  // sweep every 10 minutes
+  gcPolicy: new GCPolicy({ intervalMS: 60 * 1000 * 10 }),
+});
+```
+
+```ts title="GCPolicy options"
+new GCPolicy({
+  // how often to sweep (default 5 minutes)
+  intervalMS: 60 * 1000 * 5,
+  // how many stale lifetimes before data is removed (default 2)
+  expiryMultiplier: 2,
+  // or choose when unused data is removed (replaces expiryMultiplier)
+  // here: one minute after it goes stale
+  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
+});
+```
+
+## $dataClient {#dataclient}
+
+The plugin also adds the [Controller](./Controller.md) as the `$dataClient` global property, so
+templates and Options API components can use it without [useController()](./useController.md).
+
+```html title="DeleteTodo.vue"
+<script setup lang="ts">
+  import { TodoResource } from '@/resources/Todo';
+
+  defineProps<{ id: number }>();
+</script>
+
+<template>
+  <button @click="$dataClient.fetch(TodoResource.delete, { id })">
+    Delete
+  </button>
+</template>
+```
+
+## Using composables
+
+Composables like [useSuspense()](./useSuspense.md) must run during a component's `setup`, so Vue
+knows which app's store to use. Awaiting them requires `<script setup>`: in a hand-written
+`async setup()`, composables called after the first `await` lose the component instance and throw.
+
+```html title="TodoDetail.vue"
+<script setup lang="ts">
+  import { useSuspense } from '@data-client/vue';
+  import { TodoResource } from '@/resources/Todo';
+  import { UserResource } from '@/resources/User';
+
+  const todo = await useSuspense(TodoResource.get, { id: 1 });
+  // still works after the await
+  const user = await useSuspense(UserResource.get, {
+    id: todo.value.userId,
+  });
+</script>
+```
+
+Components that `await` must render inside a [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html)
+boundary.
diff --git a/.agents/skills/data-client-vue/references/getDefaultManagers.md b/.agents/skills/data-client-vue/references/getDefaultManagers.md
index 79cc0d6e9040..299d18b75867 100644
--- a/.agents/skills/data-client-vue/references/getDefaultManagers.md
+++ b/.agents/skills/data-client-vue/references/getDefaultManagers.md
@@ -2,7 +2,7 @@
 
 # getDefaultManagers()
 
-`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./installation.md#add-provider-at-top-level-component).
+`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./DataClientPlugin.md).
 
 This makes it simple to configure and add custom [Managers](https://dataclient.io/vue/api/Manager), while remaining robust against
 any potential changes to the default managers.
@@ -29,8 +29,8 @@ app.mount('#app');
 ```
 
 When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments.
-See [installation](./installation.md#add-provider-at-top-level-component) for the
-other `DataClientPlugin` options.
+See [DataClientPlugin](./DataClientPlugin.md#options) for the
+other options.
 
 ## Arguments
 
diff --git a/.agents/skills/data-client-vue/references/installation.md b/.agents/skills/data-client-vue/references/installation.md
index bc39ca65a263..71e4237b65de 100644
--- a/.agents/skills/data-client-vue/references/installation.md
+++ b/.agents/skills/data-client-vue/references/installation.md
@@ -31,6 +31,8 @@ app.use(DataClientPlugin, {
 app.mount('#app');
 ```
 
+See [DataClientPlugin](./DataClientPlugin.md) for all options.
+
 [Next: Define Data »](https://dataclient.io/vue/getting-started/resource)
 
 ## Example
diff --git a/.agents/skills/data-client-vue/references/useController.md b/.agents/skills/data-client-vue/references/useController.md
index 6ad0b73f00d9..64807e997135 100644
--- a/.agents/skills/data-client-vue/references/useController.md
+++ b/.agents/skills/data-client-vue/references/useController.md
@@ -29,8 +29,8 @@ and [setResponse](./Controller.md#setResponse)
 ```
 
 `useController()` must be called inside `<script setup>` (or `setup()`), and requires the
-[DataClientPlugin](./installation.md#add-provider-at-top-level-component) to be installed.
-The same [Controller](./Controller.md) is also available in templates and the Options API as `$dataClient`.
+[DataClientPlugin](./DataClientPlugin.md) to be installed.
+The same [Controller](./Controller.md) is also available in templates and the Options API as [`$dataClient`](./DataClientPlugin.md#dataclient).
 
 ## Examples
 

From e1bcfe1e14d58cd7ba726c83e57ec7b641deecb9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Oct 2026 04:22:47 +0000
Subject: [PATCH 4/4] docs(skills): Render DataClientPlugin skill reference as
 Vue

Marks DataClientPlugin.vue.md `frameworks: [vue]` so skills that list
both frameworks render it for Vue (with /vue/ links) instead of React,
and tracks which framework rendered each reference so a Vue-only page's
links point at the .vue.md variants of other references.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LHNQGac8kwCPEnyPLRYfZu
---
 .../references/DataClientPlugin.md            | 24 +++++++++----------
 docs/core/api/DataClientPlugin.vue.md         |  1 +
 website/framework-docs/skillReferences.mjs    | 15 ++++++++----
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/.agents/skills/data-client-setup/references/DataClientPlugin.md b/.agents/skills/data-client-setup/references/DataClientPlugin.md
index 2019485c8f3e..a33a4378d24d 100644
--- a/.agents/skills/data-client-setup/references/DataClientPlugin.md
+++ b/.agents/skills/data-client-setup/references/DataClientPlugin.md
@@ -1,9 +1,9 @@
-<!-- Generated by `yarn build:skills` from docs/core/api/DataClientPlugin.vue.md (react). Edit the source doc, not this file. -->
+<!-- Generated by `yarn build:skills` from docs/core/api/DataClientPlugin.vue.md (vue). Edit the source doc, not this file. -->
 
 # DataClientPlugin
 
 [Vue plugin](https://vuejs.org/guide/reusability/plugins.html) that creates the store and
-[Controller](https://dataclient.io/docs/api/Controller), and provides them to every component in the app. Install it once,
+[Controller](https://dataclient.io/vue/api/Controller), and provides them to every component in the app. Install it once,
 before `app.mount()`; composables only work in components of an app it is installed on.
 
 ```ts title="main.ts"
@@ -16,7 +16,7 @@ app.use(DataClientPlugin);
 app.mount('#app');
 ```
 
-[Managers](https://dataclient.io/docs/api/Manager) start when the plugin is installed, and stop when the app is unmounted.
+[Managers](https://dataclient.io/vue/api/Manager) start when the plugin is installed, and stop when the app is unmounted.
 
 ## Options
 
@@ -35,9 +35,9 @@ interface ProvideOptions {
 
 ### managers?: Manager\[] {#managers}
 
-List of [Managers](https://dataclient.io/docs/api/Manager) to use. This is the main extensibility point of the store.
+List of [Managers](https://dataclient.io/vue/api/Manager) to use. This is the main extensibility point of the store.
 
-Defaults to [getDefaultManagers()](./getDefaultManagers.md), which can also be used to extend the defaults.
+Defaults to [getDefaultManagers()](./getDefaultManagers.vue.md), which can also be used to extend the defaults.
 
 ```ts title="main.ts"
 import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
@@ -61,7 +61,7 @@ Default Development:
 
 Instead of starting with an empty cache, you can provide your own initial state. This can
 be useful for testing, or rehydrating the cache state when using server side rendering.
-[mockInitialState()](https://dataclient.io/docs/api/mockInitialState) builds one from fixtures.
+[mockInitialState()](https://dataclient.io/vue/api/mockInitialState) builds one from fixtures.
 
 ```ts title="main.ts"
 app.use(DataClientPlugin, { initialState: window.__INITIAL_STATE__ });
@@ -103,8 +103,8 @@ export interface State<T> {
 
 ### Controller?: typeof Controller {#Controller}
 
-This allows you to extend [Controller](https://dataclient.io/docs/api/Controller) to provide additional functionality.
-This might be useful if you have additional actions you want to dispatch to custom [Managers](https://dataclient.io/docs/api/Manager).
+This allows you to extend [Controller](https://dataclient.io/vue/api/Controller) to provide additional functionality.
+This might be useful if you have additional actions you want to dispatch to custom [Managers](https://dataclient.io/vue/api/Manager).
 
 ```ts title="main.ts"
 import { Controller, DataClientPlugin } from '@data-client/vue';
@@ -118,7 +118,7 @@ class MyController extends Controller {
 app.use(DataClientPlugin, { Controller: MyController });
 ```
 
-[useController()](https://dataclient.io/docs/api/useController) and `$dataClient` then return a `MyController` instance;
+[useController()](https://dataclient.io/vue/api/useController) and `$dataClient` then return a `MyController` instance;
 cast to use its additional members.
 
 ### gcPolicy?: GCInterface {#gcPolicy}
@@ -149,8 +149,8 @@ new GCPolicy({
 
 ## $dataClient {#dataclient}
 
-The plugin also adds the [Controller](https://dataclient.io/docs/api/Controller) as the `$dataClient` global property, so
-templates and Options API components can use it without [useController()](https://dataclient.io/docs/api/useController).
+The plugin also adds the [Controller](https://dataclient.io/vue/api/Controller) as the `$dataClient` global property, so
+templates and Options API components can use it without [useController()](https://dataclient.io/vue/api/useController).
 
 ```html title="DeleteTodo.vue"
 <script setup lang="ts">
@@ -168,7 +168,7 @@ templates and Options API components can use it without [useController()](https:
 
 ## Using composables
 
-Composables like [useSuspense()](https://dataclient.io/docs/api/useSuspense) must run during a component's `setup`, so Vue
+Composables like [useSuspense()](https://dataclient.io/vue/api/useSuspense) must run during a component's `setup`, so Vue
 knows which app's store to use. Awaiting them requires `<script setup>`: in a hand-written
 `async setup()`, composables called after the first `await` lose the component instance and throw.
 
diff --git a/docs/core/api/DataClientPlugin.vue.md b/docs/core/api/DataClientPlugin.vue.md
index 384daafe1555..5b5946a00b4a 100644
--- a/docs/core/api/DataClientPlugin.vue.md
+++ b/docs/core/api/DataClientPlugin.vue.md
@@ -1,4 +1,5 @@
 ---
+frameworks: [vue]
 title: DataClientPlugin - Normalized async data management in Vue
 sidebar_label: DataClientPlugin
 description: High performance, globally consistent data management in Vue
diff --git a/website/framework-docs/skillReferences.mjs b/website/framework-docs/skillReferences.mjs
index 327160544493..14a0b7fd2274 100644
--- a/website/framework-docs/skillReferences.mjs
+++ b/website/framework-docs/skillReferences.mjs
@@ -47,6 +47,8 @@ function generateSkill(skillDir) {
     fs.readFileSync(path.join(skillDir, MANIFEST), 'utf8'),
   );
   const out = new Map();
+  // framework that rendered each file
+  const renderedBy = new Map();
   for (const doc of Object.values(docs)) {
     // generated references aren't sources: they may not be regenerated yet
     if (!doc.startsWith('docs/'))
@@ -70,15 +72,18 @@ function generateSkill(skillDir) {
       const content = `${HEADER} ${doc} (${framework}). Edit the source doc, not this file. -->\n\n${body}`;
       const primary = path.join(skillDir, 'references', name);
       // the first framework that has the page writes `<name>.md`
-      if (!out.has(primary)) out.set(primary, content);
-      else if (comparable(out.get(primary)) !== comparable(content))
-        out.set(primary.replace(MD, `.${framework}.md`), content);
+      let file = primary;
+      if (out.has(primary)) {
+        if (comparable(out.get(primary)) === comparable(content)) continue;
+        file = primary.replace(MD, `.${framework}.md`);
+      }
+      out.set(file, content);
+      renderedBy.set(file, framework);
     }
   }
   // a framework's page links to that framework's version of other pages
   for (const [file, content] of out) {
-    const framework = file.match(/\.(\w+)\.md$/)?.[1];
-    if (!frameworks.includes(framework)) continue;
+    const framework = renderedBy.get(file);
     out.set(
       file,
       content.replace(