@defjs/vue 0.0.1-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MunMunMiao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# @defjs/vue
+
+Thin Vue 3 adapter for `@defjs/core`. It provides an existing Defjs client through Vue injection.
+
+Supports Vue 3+.
+
+## Install
+
+```sh
+bun add @defjs/core @defjs/vue vue
+```
+
+The package is ESM and requires `@defjs/core` as a peer in the `^0.4.0` range. Its tarball retains this `README.md` and the repository `LICENSE`; repository-wide guides and examples remain outside the package.
+
+## What this package does
+
+`createClientPlugin(client)` creates a Vue plugin that provides the exact `Client` instance supplied by the application. `injectClient()` reads the nearest provided instance. `HTTP_CLIENT` remains public for native subtree overrides.
+
+Client creation and configuration stay in `@defjs/core`. The adapter does not create, cache, replace, dispose, abort, or close anything on behalf of the application, and it does not add transport behavior, state management, retries, or a Nuxt module.
+
+## Quick Start
+
+Create and own the client at the application entry point:
+
+```ts
+// main.ts
+import { createClient, withEndpoint } from '@defjs/core'
+import { createClientPlugin } from '@defjs/vue'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const client = createClient(withEndpoint('https://api.example.com'))
+const app = createApp(App)
+
+app.use(createClientPlugin(client))
+app.mount('#app')
+```
+
+Use the injected client inside a component or composable and own cleanup where the work starts:
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { injectClient } from '@defjs/vue'
+import { getUser } from './api'
+
+const props = defineProps<{ id: number }>()
+const client = injectClient()
+const name = ref('')
+
+watch(
+  () => props.id,
+  (id, _previousId, onCleanup) => {
+    const abort = new AbortController()
+    onCleanup(() => abort.abort())
+
+    void client.execute(getUser({ path: { id } }), { signal: abort.signal }).then(([error, user]) => {
+      if (!abort.signal.aborted) name.value = error ? error.message : user.name
+    })
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div>{{ name }}</div>
+</template>
+```
+
+Configure interceptors in core before installing the plugin:
+
+```ts
+import { createClient, createHttpInterceptor, withEndpoint, withInterceptors } from '@defjs/core'
+import { createClientPlugin } from '@defjs/vue'
+
+const auth = createHttpInterceptor((request, next) => {
+  const headers = new Headers(request.headers)
+  headers.set('Authorization', `Bearer ${getAccessToken()}`)
+  return next({ ...request, headers })
+})
+
+const client = createClient(withEndpoint('https://api.example.com'), withInterceptors(auth))
+app.use(createClientPlugin(client))
+```
+
+For a subtree override, use Vue's native provider with the public key:
+
+```ts
+import { createClient, withEndpoint } from '@defjs/core'
+import { HTTP_CLIENT } from '@defjs/vue'
+import { provide } from 'vue'
+
+provide(HTTP_CLIENT, createClient(withEndpoint('https://preview.example.com')))
+```
+
+Descendants receive that exact client; siblings outside the subtree continue to receive the app-level client.
+
+## API
+
+### `createClientPlugin(client: Client): Plugin`
+
+Creates a Vue plugin that provides the supplied client instance.
+
+### `injectClient(): Client`
+
+Returns the client from the nearest Vue provider. Throws if no client was provided.
+
+### `HTTP_CLIENT: InjectionKey<Client>`
+
+Public injection key for native subtree providers.
+
+## Notes
+
+- Create request-specific clients at the application boundary for SSR data that contains credentials, cookies, or tenant state.
+- The owner that creates a client also owns all requests, SSE streams, and WebSocket sessions started through it. App unmount does not clean them up automatically.
+- Import `createClient`, `withEndpoint`, `withInterceptors`, and all other client options from `@defjs/core`.
+
+## License
+
+MIT License.

package/index.d.ts

@@ -0,0 +1,36 @@
+import { InjectionKey, Plugin } from "vue";
+import { Client } from "@defjs/core";
+//#region src/core.d.ts
+/**
+ * Vue injection key for the Defjs {@link Client} provided by {@link createClientPlugin}.
+ *
+ * Prefer {@link injectClient} over calling `inject(HTTP_CLIENT)` directly.
+ */
+export declare const HTTP_CLIENT: InjectionKey<Client>;
+/**
+ * Create a Vue plugin that provides an existing Defjs client via {@link HTTP_CLIENT}.
+ *
+ * Does not create, cache, or dispose the client — pass an instance from `createClient`.
+ *
+ * @param client - The Client instance to provide to the app.
+ * @returns A Vue `Plugin` for `app.use(...)`.
+ *
+ * @example
+ * ```ts
+ * app.use(createClientPlugin(client))
+ * ```
+ */
+export declare function createClientPlugin(client: Client): Plugin;
+/**
+ * Inject the Defjs client provided by {@link createClientPlugin}.
+ *
+ * @returns The injected `Client` instance.
+ * @throws If no client was provided (plugin not installed).
+ *
+ * @example
+ * ```ts
+ * const client = injectClient()
+ * ```
+ */
+export declare function injectClient(): Client;
+//#endregion

package/index.js

@@ -0,0 +1,44 @@
+import { inject } from "vue";
+//#region src/core.ts
+/**
+* Vue injection key for the Defjs {@link Client} provided by {@link createClientPlugin}.
+*
+* Prefer {@link injectClient} over calling `inject(HTTP_CLIENT)` directly.
+*/
+const HTTP_CLIENT = Symbol("HTTP_CLIENT");
+/**
+* Create a Vue plugin that provides an existing Defjs client via {@link HTTP_CLIENT}.
+*
+* Does not create, cache, or dispose the client — pass an instance from `createClient`.
+*
+* @param client - The Client instance to provide to the app.
+* @returns A Vue `Plugin` for `app.use(...)`.
+*
+* @example
+* ```ts
+* app.use(createClientPlugin(client))
+* ```
+*/
+function createClientPlugin(client) {
+	return { install(app) {
+		app.provide(HTTP_CLIENT, client);
+	} };
+}
+/**
+* Inject the Defjs client provided by {@link createClientPlugin}.
+*
+* @returns The injected `Client` instance.
+* @throws If no client was provided (plugin not installed).
+*
+* @example
+* ```ts
+* const client = injectClient()
+* ```
+*/
+function injectClient() {
+	const client = inject(HTTP_CLIENT);
+	if (!client) throw new Error("No Defjs client provided. Did you forget to call app.use(createClientPlugin(client))?");
+	return client;
+}
+//#endregion
+export { HTTP_CLIENT, createClientPlugin, injectClient };

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@defjs/vue",
+  "version": "0.0.1-beta.0",
+  "bugs": {
+    "url": "https://github.com/defjs/defjs/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/defjs/defjs.git"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "peerDependencies": {
+    "@defjs/core": "0.4.0-beta.0",
+    "vue": ">=3.0.0"
+  },
+  "module": "./index.js",
+  "typings": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  }
+}