@mlyrmdhnn/use-fetch 1.0.0

package/dist/http/useFetch.d.ts

@@ -0,0 +1,62 @@
+import { HttpOptions, HttpHeaders, RequestInterceptorFn, ResponseInterceptorFn, ErrorInterceptorFn } from '../lib/fetch/types';
+import { createInterceptor } from '../lib/fetch/interceptor';
+import { FetchConfigInstance } from '../lib/fetch/config';
+export interface UseFetchStatic {
+    baseURL: (url: string) => void;
+    headers: (headers: HttpHeaders) => void;
+    onError: (status: number, fn: (error: any) => void) => void;
+    interceptor: {
+        request: {
+            use: (fn: RequestInterceptorFn) => number;
+            eject: (id: number) => void;
+        };
+        response: {
+            use: (fn: ResponseInterceptorFn) => number;
+            eject: (id: number) => void;
+        };
+        error: {
+            use: (fn: ErrorInterceptorFn) => number;
+            eject: (id: number) => void;
+        };
+    };
+    create: (config: Partial<FetchConfigInstance>) => UseFetchInstance;
+}
+export type UseFetchInstance = {
+    <T>(endpoint: string, options?: HttpOptions): ReturnType<typeof buildUseFetch<T>>;
+    baseURL: (url: string) => void;
+    headers: (headers: HttpHeaders) => void;
+    onError: (status: number, fn: (error: any) => void) => void;
+    interceptor: UseFetchStatic["interceptor"];
+};
+declare function buildUseFetch<T>(endpoint: string, options?: HttpOptions, instanceConfig?: FetchConfigInstance, instanceInterceptors?: ReturnType<typeof createInterceptor>): {
+    data: any;
+    error: any;
+    pending: any;
+    status: any;
+    links: any;
+    from: any;
+    to: any;
+    total: any;
+    currentPage: any;
+    execute: () => Promise<any>;
+    refresh: () => Promise<any>;
+    clear: () => void;
+    abort: () => void;
+};
+declare function useFetch<T>(endpoint: string, options?: HttpOptions): {
+    data: any;
+    error: any;
+    pending: any;
+    status: any;
+    links: any;
+    from: any;
+    to: any;
+    total: any;
+    currentPage: any;
+    execute: () => Promise<any>;
+    refresh: () => Promise<any>;
+    clear: () => void;
+    abort: () => void;
+};
+declare const _useFetch: typeof useFetch & UseFetchStatic;
+export { _useFetch as useFetch };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './http/useFetch'
+export {}

package/dist/index.js

@@ -0,0 +1,8 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t=e=>new Promise(t=>setTimeout(t,e)),n=e=>{let t={};return Object.entries(e||{}).forEach(([e,n])=>{n!=null&&(t[e]=String(n))}),new URLSearchParams(t).toString()},r=e=>{let t=sessionStorage.getItem(e);return t?JSON.parse(t):null},i=(e,t)=>{sessionStorage.setItem(e,JSON.stringify(t))},a={baseURL:`your domain`,headers:{},statusHooks:[]},o=e=>({baseURL:e?.baseURL??`your domain`??``,headers:e?.headers??{},statusHooks:[]}),s={baseURL(e){a.baseURL=e},getBaseURL(){return a.baseURL},headers(e){a.headers={...a.headers,...e}},getHeaders(){return a.headers},onError(e,t){a.statusHooks.push({status:e,fn:t})}},c=[],l=async(e,t)=>{for(let n of c)n.status===e&&await n.fn(t)},u=new Map,d=(e,t,n)=>`${t}:${e}:${JSON.stringify(n)}`,f=e=>u.get(e),p=(e,t)=>{u.set(e,t)},m=e=>{u.delete(e)},h=async({endpoint:e,options:o,controller:s,instanceConfig:c,instanceRequestInterceptors:u,instanceResponseInterceptors:h,instanceErrorInterceptors:g})=>{let _=c??a,{method:v=`GET`,params:y={},payload:b=null,credentials:x=!1,headers:S={},timeout:C=1e4,retry:w=0,retryDelay:T=1e3,cache:E=!1,cacheKey:D,baseURL:O=_.baseURL,dedup:k=!1}=o,A=u??[],j=h??[],M=g??[],N=n(y),P=async()=>{let n=0;for(;n<=w;)try{let t=typeof b==`function`?await b():b,n=t instanceof FormData,o=E&&r(D);if(o)return o;s=new AbortController;let u=setTimeout(()=>s.abort(),C),d={method:v,headers:{Accept:`application/json`,...n?{}:{"Content-Type":`application/json`},"X-Requested-With":`XMLHttpRequest`,...a.headers,..._.headers,...S},credentials:x?`include`:`same-origin`,signal:s.signal,body:v===`GET`?void 0:n?t:JSON.stringify(t)};for(let e of A)d=await e.fn(d);let f=``;try{let t=e.startsWith(`/`)?e.slice(1):e;f=new URL(t,O).toString()}catch{throw Error(`
+            [useFetch] Failed to create URL.
+            Base URL : ${O}
+            Endpoint : ${e}
+            Example valid:
+            baseURL  -> http://localhost:8080/api/
+            endpoint -> /users
+          `)}let p=await fetch(`${f}${N?`?${N}`:``}`,d);clearTimeout(u);let m=await p.json();for(let e of j)m=await e.fn(m);if(!p.ok){await l(p.status,m);let e=c?.statusHooks??[];for(let t of e)t.status===p.status&&await t.fn(m);throw m}return E&&i(D,m),m}catch(e){if(n++,n<=w){await t(T);continue}let r=e;for(let e of M)r=await e.fn(r);throw r}};if(k&&v===`GET`){let t=d(e,v,y),n=f(t);if(n)return n;let r=P().finally(()=>m(t));return p(t,r),r}return P()},g=0,_=()=>{let e=[],t=[],n=[];return{interceptor:{request:{use(t){let n=++g;return e.push({id:n,fn:t}),n},eject(t){let n=e.findIndex(e=>e.id===t);n!==-1&&e.splice(n,1)}},response:{use(e){let n=++g;return t.push({id:n,fn:e}),n},eject(e){let n=t.findIndex(t=>t.id===e);n!==-1&&t.splice(n,1)}},error:{use(e){let t=++g;return n.push({id:t,fn:e}),t},eject(e){let t=n.findIndex(t=>t.id===e);t!==-1&&n.splice(t,1)}}},requestInterceptors:e,responseInterceptors:t,errorInterceptors:n}},{interceptor:v,requestInterceptors:y,responseInterceptors:b,errorInterceptors:x}=_(),S=(t,n)=>{if(t)if((0,e.isRef)(t)){(0,e.watch)(t,n,{deep:!0});return}else if((0,e.isReactive)(t)){(0,e.watch)(t,n,{deep:!0});return}else (0,e.watch)(()=>t,n,{deep:!0})};function C(t,n={},r,i){let{immediate:a=!0,watchParams:o=!1,pagination:s=!1,pick:c=``,transform:l,cacheKey:u=t,onBeforeRequest:d,onSuccess:f,onError:p,onFinally:m,...g}=n,_=(0,e.ref)(null),v=(0,e.ref)(null),y=(0,e.ref)(!1),b=(0,e.ref)(`idle`),x=(0,e.ref)([]),C=(0,e.ref)(0),w=(0,e.ref)(0),T=(0,e.ref)(0),E=(0,e.ref)(1),D=new AbortController,O=async()=>{try{y.value=!0,b.value=`pending`,v.value=null,d?.(n.payload);let e=await h({endpoint:t,controller:D,options:{...g,endpoint:t,cacheKey:u},instanceConfig:r,instanceRequestInterceptors:i?.requestInterceptors,instanceResponseInterceptors:i?.responseInterceptors,instanceErrorInterceptors:i?.errorInterceptors});if(s)return _.value=e.result.data,x.value=e.result.links,C.value=e.result.from,w.value=e.result.to,T.value=e.result.total,E.value=e.result.current_page,b.value=`success`,f?.(e),e;let a=c?e[c]:e;return l&&(a=l(a)),_.value=a,b.value=`success`,f?.(a),a}catch(e){b.value=`error`,v.value=e,p?.(e)}finally{y.value=!1,m?.()}};return a&&O(),o&&S(n.params,()=>O()),{data:_,error:v,pending:y,status:b,links:x,from:C,to:w,total:T,currentPage:E,execute:O,refresh:()=>O(),clear:()=>{_.value=null,v.value=null,b.value=`idle`},abort:()=>D.abort()}}function w(e,t={}){return C(e,t)}var T=w;T.baseURL=s.baseURL,T.headers=s.headers,T.interceptor=v,T.onError=s.onError,T.create=e=>{let t=o(e),n=_(),r=(e,r={})=>C(e,r,t,n);return r.baseURL=e=>{t.baseURL=e},r.headers=e=>{t.headers={...t.headers,...e}},r.onError=(e,n)=>{t.statusHooks.push({status:e,fn:n})},r.interceptor=n.interceptor,r},exports.useFetch=T;

package/dist/index.mjs

@@ -0,0 +1,237 @@
+import { isReactive as e, isRef as t, ref as n, watch as r } from "vue";
+//#region lib/fetch/helpers.ts
+var i = (e) => new Promise((t) => setTimeout(t, e)), a = (e) => {
+	let t = {};
+	return Object.entries(e || {}).forEach(([e, n]) => {
+		n != null && (t[e] = String(n));
+	}), new URLSearchParams(t).toString();
+}, o = (e) => {
+	let t = sessionStorage.getItem(e);
+	return t ? JSON.parse(t) : null;
+}, s = (e, t) => {
+	sessionStorage.setItem(e, JSON.stringify(t));
+}, c = {
+	baseURL: "your domain",
+	headers: {},
+	statusHooks: []
+}, l = (e) => ({
+	baseURL: e?.baseURL ?? "your domain" ?? "",
+	headers: e?.headers ?? {},
+	statusHooks: []
+}), u = {
+	baseURL(e) {
+		c.baseURL = e;
+	},
+	getBaseURL() {
+		return c.baseURL;
+	},
+	headers(e) {
+		c.headers = {
+			...c.headers,
+			...e
+		};
+	},
+	getHeaders() {
+		return c.headers;
+	},
+	onError(e, t) {
+		c.statusHooks.push({
+			status: e,
+			fn: t
+		});
+	}
+}, d = [], f = async (e, t) => {
+	for (let n of d) n.status === e && await n.fn(t);
+}, p = /* @__PURE__ */ new Map(), m = (e, t, n) => `${t}:${e}:${JSON.stringify(n)}`, h = (e) => p.get(e), g = (e, t) => {
+	p.set(e, t);
+}, _ = (e) => {
+	p.delete(e);
+}, v = async ({ endpoint: e, options: t, controller: n, instanceConfig: r, instanceRequestInterceptors: l, instanceResponseInterceptors: u, instanceErrorInterceptors: d }) => {
+	let p = r ?? c, { method: v = "GET", params: y = {}, payload: b = null, credentials: x = !1, headers: S = {}, timeout: C = 1e4, retry: w = 0, retryDelay: T = 1e3, cache: E = !1, cacheKey: D, baseURL: O = p.baseURL, dedup: k = !1 } = t, A = l ?? [], j = u ?? [], M = d ?? [], N = a(y), P = async () => {
+		let t = 0;
+		for (; t <= w;) try {
+			let t = typeof b == "function" ? await b() : b, i = t instanceof FormData, a = E && o(D);
+			if (a) return a;
+			n = new AbortController();
+			let l = setTimeout(() => n.abort(), C), u = {
+				method: v,
+				headers: {
+					Accept: "application/json",
+					...i ? {} : { "Content-Type": "application/json" },
+					"X-Requested-With": "XMLHttpRequest",
+					...c.headers,
+					...p.headers,
+					...S
+				},
+				credentials: x ? "include" : "same-origin",
+				signal: n.signal,
+				body: v === "GET" ? void 0 : i ? t : JSON.stringify(t)
+			};
+			for (let e of A) u = await e.fn(u);
+			let d = "";
+			try {
+				let t = e.startsWith("/") ? e.slice(1) : e;
+				d = new URL(t, O).toString();
+			} catch {
+				throw Error(`
+            [useFetch] Failed to create URL.
+            Base URL : ${O}
+            Endpoint : ${e}
+            Example valid:
+            baseURL  -> http://localhost:8080/api/
+            endpoint -> /users
+          `);
+			}
+			let m = await fetch(`${d}${N ? `?${N}` : ""}`, u);
+			clearTimeout(l);
+			let h = await m.json();
+			for (let e of j) h = await e.fn(h);
+			if (!m.ok) {
+				await f(m.status, h);
+				let e = r?.statusHooks ?? [];
+				for (let t of e) t.status === m.status && await t.fn(h);
+				throw h;
+			}
+			return E && s(D, h), h;
+		} catch (e) {
+			if (t++, t <= w) {
+				await i(T);
+				continue;
+			}
+			let n = e;
+			for (let e of M) n = await e.fn(n);
+			throw n;
+		}
+	};
+	if (k && v === "GET") {
+		let t = m(e, v, y), n = h(t);
+		if (n) return n;
+		let r = P().finally(() => _(t));
+		return g(t, r), r;
+	}
+	return P();
+}, y = 0, b = () => {
+	let e = [], t = [], n = [];
+	return {
+		interceptor: {
+			request: {
+				use(t) {
+					let n = ++y;
+					return e.push({
+						id: n,
+						fn: t
+					}), n;
+				},
+				eject(t) {
+					let n = e.findIndex((e) => e.id === t);
+					n !== -1 && e.splice(n, 1);
+				}
+			},
+			response: {
+				use(e) {
+					let n = ++y;
+					return t.push({
+						id: n,
+						fn: e
+					}), n;
+				},
+				eject(e) {
+					let n = t.findIndex((t) => t.id === e);
+					n !== -1 && t.splice(n, 1);
+				}
+			},
+			error: {
+				use(e) {
+					let t = ++y;
+					return n.push({
+						id: t,
+						fn: e
+					}), t;
+				},
+				eject(e) {
+					let t = n.findIndex((t) => t.id === e);
+					t !== -1 && n.splice(t, 1);
+				}
+			}
+		},
+		requestInterceptors: e,
+		responseInterceptors: t,
+		errorInterceptors: n
+	};
+}, { interceptor: x, requestInterceptors: S, responseInterceptors: C, errorInterceptors: w } = b(), T = (n, i) => {
+	if (n) if (t(n)) {
+		r(n, i, { deep: !0 });
+		return;
+	} else if (e(n)) {
+		r(n, i, { deep: !0 });
+		return;
+	} else r(() => n, i, { deep: !0 });
+};
+//#endregion
+//#region http/useFetch.ts
+function E(e, t = {}, r, i) {
+	let { immediate: a = !0, watchParams: o = !1, pagination: s = !1, pick: c = "", transform: l, cacheKey: u = e, onBeforeRequest: d, onSuccess: f, onError: p, onFinally: m, ...h } = t, g = n(null), _ = n(null), y = n(!1), b = n("idle"), x = n([]), S = n(0), C = n(0), w = n(0), E = n(1), D = new AbortController(), O = async () => {
+		try {
+			y.value = !0, b.value = "pending", _.value = null, d?.(t.payload);
+			let n = await v({
+				endpoint: e,
+				controller: D,
+				options: {
+					...h,
+					endpoint: e,
+					cacheKey: u
+				},
+				instanceConfig: r,
+				instanceRequestInterceptors: i?.requestInterceptors,
+				instanceResponseInterceptors: i?.responseInterceptors,
+				instanceErrorInterceptors: i?.errorInterceptors
+			});
+			if (s) return g.value = n.result.data, x.value = n.result.links, S.value = n.result.from, C.value = n.result.to, w.value = n.result.total, E.value = n.result.current_page, b.value = "success", f?.(n), n;
+			let a = c ? n[c] : n;
+			return l && (a = l(a)), g.value = a, b.value = "success", f?.(a), a;
+		} catch (e) {
+			b.value = "error", _.value = e, p?.(e);
+		} finally {
+			y.value = !1, m?.();
+		}
+	};
+	return a && O(), o && T(t.params, () => O()), {
+		data: g,
+		error: _,
+		pending: y,
+		status: b,
+		links: x,
+		from: S,
+		to: C,
+		total: w,
+		currentPage: E,
+		execute: O,
+		refresh: () => O(),
+		clear: () => {
+			g.value = null, _.value = null, b.value = "idle";
+		},
+		abort: () => D.abort()
+	};
+}
+function D(e, t = {}) {
+	return E(e, t);
+}
+var O = D;
+O.baseURL = u.baseURL, O.headers = u.headers, O.interceptor = x, O.onError = u.onError, O.create = (e) => {
+	let t = l(e), n = b(), r = (e, r = {}) => E(e, r, t, n);
+	return r.baseURL = (e) => {
+		t.baseURL = e;
+	}, r.headers = (e) => {
+		t.headers = {
+			...t.headers,
+			...e
+		};
+	}, r.onError = (e, n) => {
+		t.statusHooks.push({
+			status: e,
+			fn: n
+		});
+	}, r.interceptor = n.interceptor, r;
+};
+//#endregion
+export { O as useFetch };

package/dist/lib/fetch/cache.d.ts

@@ -0,0 +1,2 @@
+export declare const getCache: (key: string) => any;
+export declare const setCache: (key: string, value: any) => void;

package/dist/lib/fetch/config.d.ts

@@ -0,0 +1,20 @@
+import { HttpHeaders } from './types';
+type StatusHookFn = (error: any) => void | Promise<void>;
+export interface FetchConfigInstance {
+    baseURL: string;
+    headers: HttpHeaders;
+    statusHooks: {
+        status: number;
+        fn: StatusHookFn;
+    }[];
+}
+export declare const globalConfig: FetchConfigInstance;
+export declare const createConfig: (initial?: Partial<FetchConfigInstance>) => FetchConfigInstance;
+export declare const fetchConfig: {
+    baseURL(url: string): void;
+    getBaseURL(): string;
+    headers(headers: HttpHeaders): void;
+    getHeaders(): HttpHeaders;
+    onError(status: number, fn: StatusHookFn): void;
+};
+export {};

package/dist/lib/fetch/core.d.ts

@@ -0,0 +1,13 @@
+import { FetchConfigInstance } from './config';
+import { InterceptorHandler, RequestInterceptorFn, ResponseInterceptorFn, ErrorInterceptorFn } from './types';
+interface FetchCoreParams {
+    endpoint: string;
+    options: any;
+    controller: AbortController;
+    instanceConfig?: FetchConfigInstance;
+    instanceRequestInterceptors?: InterceptorHandler<RequestInterceptorFn>[];
+    instanceResponseInterceptors?: InterceptorHandler<ResponseInterceptorFn>[];
+    instanceErrorInterceptors?: InterceptorHandler<ErrorInterceptorFn>[];
+}
+export declare const fetchCore: ({ endpoint, options, controller, instanceConfig, instanceRequestInterceptors, instanceResponseInterceptors, instanceErrorInterceptors, }: FetchCoreParams) => Promise<any>;
+export {};

package/dist/lib/fetch/dedup.d.ts

@@ -0,0 +1,4 @@
+export declare const buildDedupKey: (endpoint: string, method: string, params: Record<string, any>) => string;
+export declare const getDedupRequest: (key: string) => Promise<any> | undefined;
+export declare const setDedupRequest: (key: string, promise: Promise<any>) => void;
+export declare const deleteDedupRequest: (key: string) => void;

package/dist/lib/fetch/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const sleep: (ms: number) => Promise<unknown>;
+export declare const buildQueryString: (params: Record<string, any>) => string;

package/dist/lib/fetch/interceptor.d.ts

@@ -0,0 +1,34 @@
+import { RequestInterceptorFn, ResponseInterceptorFn, ErrorInterceptorFn, InterceptorHandler } from './types';
+export declare const createInterceptor: () => {
+    interceptor: {
+        request: {
+            use(fn: RequestInterceptorFn): number;
+            eject(id: number): void;
+        };
+        response: {
+            use(fn: ResponseInterceptorFn): number;
+            eject(id: number): void;
+        };
+        error: {
+            use(fn: ErrorInterceptorFn): number;
+            eject(id: number): void;
+        };
+    };
+    requestInterceptors: InterceptorHandler<RequestInterceptorFn>[];
+    responseInterceptors: InterceptorHandler<ResponseInterceptorFn>[];
+    errorInterceptors: InterceptorHandler<ErrorInterceptorFn>[];
+};
+export declare const fetchInterceptor: {
+    request: {
+        use(fn: RequestInterceptorFn): number;
+        eject(id: number): void;
+    };
+    response: {
+        use(fn: ResponseInterceptorFn): number;
+        eject(id: number): void;
+    };
+    error: {
+        use(fn: ErrorInterceptorFn): number;
+        eject(id: number): void;
+    };
+}, requestInterceptors: InterceptorHandler<RequestInterceptorFn>[], responseInterceptors: InterceptorHandler<ResponseInterceptorFn>[], errorInterceptors: InterceptorHandler<ErrorInterceptorFn>[];

package/dist/lib/fetch/statusHooks.d.ts

@@ -0,0 +1,4 @@
+type StatusHookFn = (error: any) => void | Promise<void>;
+export declare const registerStatusHook: (status: number, fn: StatusHookFn) => void;
+export declare const runStatusHooks: (status: number, error: any) => Promise<void>;
+export {};

package/dist/lib/fetch/types.d.ts

@@ -0,0 +1,45 @@
+export type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+export interface HttpHeaders {
+    Authorization?: string;
+    Accept?: string;
+    "Content-Type"?: string;
+    "X-CSRF-TOKEN"?: string;
+    "X-XSRF-TOKEN"?: string;
+    "X-Requested-With"?: string;
+    "X-API-KEY"?: string;
+    "Accept-Language"?: string;
+    "Cache-Control"?: string;
+    [key: string]: string | undefined;
+}
+export interface HttpOptions {
+    method?: HttpMethod;
+    params?: Record<string, any>;
+    payload?: any;
+    immediate?: boolean;
+    pagination?: boolean;
+    watchParams?: boolean;
+    credentials?: boolean;
+    baseURL?: string;
+    pick?: string;
+    transform?: (data: any) => any;
+    timeout?: number;
+    cache?: boolean;
+    cacheKey?: string;
+    retry?: number;
+    retryDelay?: number;
+    onBeforeRequest?: (payload: any) => void;
+    onSuccess?: (data: any) => void;
+    onError?: (error: any) => void;
+    onFinally?: () => void;
+    headers?: HttpHeaders;
+    xsrfCookieName?: string;
+    xsrfHeaderName?: string;
+    dedup?: boolean;
+}
+export type RequestInterceptorFn = (config: RequestInit) => RequestInit | Promise<RequestInit>;
+export type ResponseInterceptorFn = (response: any) => any | Promise<any>;
+export type ErrorInterceptorFn = (error: any) => any | Promise<any>;
+export interface InterceptorHandler<T> {
+    id: number;
+    fn: T;
+}

package/dist/lib/fetch/watcher.d.ts

@@ -0,0 +1 @@
+export declare const createWatcher: (params: any, callback: () => void) => void;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mlyrmdhnn/use-fetch",
+  "version": "1.0.0",
+  "description": "Lightweight zero-dependency HTTP composable for Vue 3.5+",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "composable",
+    "fetch",
+    "typescript",
+    "http"
+  ],
+  "author": "mlyrmdhnn",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": ">=3.5.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14",
+    "vite-plugin-dts": "^5.0.1"
+  }
+}

package/readme.md

@@ -0,0 +1,548 @@
+# useFetch
+
+A lightweight, modular, zero-dependency HTTP composable for Vue 3.5+, inspired by Nuxt's `useFetch`. Built with TypeScript, works with both **JavaScript** and **TypeScript** Vue projects.
+
+---
+
+## Features
+
+- Full **TypeScript** support — works with JS too
+- **Modular architecture** — core, cache, interceptors, watcher, dedup all separated
+- **Auto-execute** on mount with `immediate`
+- **Retry** failed requests with configurable delay
+- **Laravel pagination** support out of the box
+- **Reactive params** watcher (`ref`, `reactive`, or plain object)
+- **Session cache** with custom cache key
+- **Timeout** & **AbortController** support
+- **Pick** & **transform** response data
+- **Global interceptors** — request, response, and error with `eject` support
+- **Status hooks** — global HTTP status code error handling
+- **Request deduplication** — prevent duplicate in-flight requests
+- **Multiple instances** — isolated configs per API service
+- **Credentials** / cookie support
+- **FormData** auto-detection
+- Lifecycle callbacks: `onBeforeRequest`, `onSuccess`, `onError`, `onFinally`
+- **Zero dependencies**
+
+---
+
+## Requirements
+
+- Vue `3.5+`
+- Vite (uses `import.meta.env.VITE_API_URL` as default base URL)
+
+---
+
+## Installation
+
+```bash
+npm install @mlyrmdhnn/usefetch
+```
+
+---
+
+## Setup
+
+Set your base API URL in `.env`:
+
+```env
+VITE_API_URL=https://your-api.com/api/
+```
+
+Or set it manually in `main.ts` / `main.js`:
+
+```ts
+import { useFetch } from "@mlyrmdhnn/usefetch";
+
+useFetch.baseURL("https://your-api.com/api/");
+```
+
+---
+
+## Project Structure
+
+```
+lib/
+└── fetch/
+    ├── cache.ts        # SessionStorage cache handler
+    ├── config.ts       # Global config & instance factory
+    ├── core.ts         # Core fetch logic
+    ├── dedup.ts        # Request deduplication
+    ├── helpers.ts      # Utility functions
+    ├── interceptor.ts  # Global & instance interceptors
+    ├── statusHooks.ts  # HTTP status code hooks
+    ├── types.ts        # TypeScript types & interfaces
+    └── watcher.ts      # Reactive params watcher
+http/
+└── useFetch.ts         # Main composable entry point
+```
+
+---
+
+## Basic Usage
+
+### JavaScript
+
+```js
+import { useFetch } from "@mlyrmdhnn/usefetch";
+
+const { data, pending, error } = useFetch("/users");
+```
+
+### TypeScript
+
+```ts
+import { useFetch } from "@mlyrmdhnn/usefetch";
+
+const { data, pending, error } = useFetch<User[]>("/users");
+```
+
+---
+
+## API
+
+### Signature
+
+```ts
+useFetch<T>(endpoint: string, options?: HttpOptions)
+```
+
+### Options
+
+| Option            | Type                  | Default        | Description                       |
+| ----------------- | --------------------- | -------------- | --------------------------------- |
+| `method`          | `HttpMethod`          | `'GET'`        | HTTP method                       |
+| `params`          | `Record<string, any>` | `{}`           | URL query parameters              |
+| `payload`         | `any`                 | `null`         | Request body                      |
+| `immediate`       | `boolean`             | `true`         | Auto-execute on composable call   |
+| `pagination`      | `boolean`             | `false`        | Enable Laravel pagination mode    |
+| `watchParams`     | `boolean`             | `false`        | Re-fetch when params change       |
+| `credentials`     | `boolean`             | `false`        | Include cookies/credentials       |
+| `baseURL`         | `string`              | `VITE_API_URL` | Override base URL per request     |
+| `pick`            | `string`              | `''`           | Pick a specific key from response |
+| `transform`       | `(data: any) => any`  | -              | Transform response data           |
+| `timeout`         | `number`              | `10000`        | Request timeout in ms             |
+| `cache`           | `boolean`             | `false`        | Enable sessionStorage cache       |
+| `cacheKey`        | `string`              | `endpoint`     | Custom cache key                  |
+| `retry`           | `number`              | `0`            | Number of retry attempts          |
+| `retryDelay`      | `number`              | `1000`         | Delay between retries in ms       |
+| `dedup`           | `boolean`             | `false`        | Enable request deduplication      |
+| `headers`         | `HttpHeaders`         | `{}`           | Custom request headers            |
+| `onBeforeRequest` | `(payload) => void`   | -              | Callback before request fires     |
+| `onSuccess`       | `(data) => void`      | -              | Callback on success               |
+| `onError`         | `(error) => void`     | -              | Callback on error                 |
+| `onFinally`       | `() => void`          | -              | Callback after request completes  |
+
+### Return Values
+
+| Value         | Type                                               | Description                       |
+| ------------- | -------------------------------------------------- | --------------------------------- |
+| `data`        | `Ref<T \| null>`                                   | Response data                     |
+| `error`       | `Ref<any>`                                         | Error object if request failed    |
+| `pending`     | `Ref<boolean>`                                     | Loading state                     |
+| `status`      | `Ref<'idle' \| 'pending' \| 'success' \| 'error'>` | Request status                    |
+| `links`       | `Ref<any[]>`                                       | Pagination links (Laravel)        |
+| `from`        | `Ref<number>`                                      | Pagination from (Laravel)         |
+| `to`          | `Ref<number>`                                      | Pagination to (Laravel)           |
+| `total`       | `Ref<number>`                                      | Total records (Laravel)           |
+| `currentPage` | `Ref<number>`                                      | Current page (Laravel)            |
+| `execute`     | `() => Promise`                                    | Manually trigger request          |
+| `refresh`     | `() => Promise`                                    | Alias for execute                 |
+| `clear`       | `() => void`                                       | Reset data, error, status to idle |
+| `abort`       | `() => void`                                       | Cancel the active request         |
+
+---
+
+## Examples
+
+### GET Request
+
+```ts
+const { data, pending, error } = useFetch<Product[]>("/products");
+```
+
+---
+
+### POST Request
+
+```ts
+const { execute, pending } = useFetch("/products", {
+  method: "POST",
+  payload: {
+    name: "New Product",
+    price: 50000,
+  },
+  immediate: false,
+  onSuccess(data) {
+    console.log("Created:", data);
+  },
+  onError(err) {
+    console.error("Failed:", err);
+  },
+});
+
+await execute();
+```
+
+---
+
+### PUT / PATCH / DELETE
+
+```ts
+// PUT
+const { execute } = useFetch("/products/1", {
+  method: "PUT",
+  payload: { name: "Updated" },
+  immediate: false,
+});
+
+// PATCH
+const { execute } = useFetch("/products/1", {
+  method: "PATCH",
+  payload: { price: 60000 },
+  immediate: false,
+});
+
+// DELETE
+const { execute } = useFetch("/products/1", {
+  method: "DELETE",
+  immediate: false,
+});
+```
+
+---
+
+### With Query Params
+
+```ts
+const { data } = useFetch("/orders", {
+  params: {
+    status: "active",
+    limit: 10,
+  },
+});
+```
+
+> `null` and `undefined` param values are automatically stripped from the query string.
+
+---
+
+### Reactive Params (Auto Re-fetch)
+
+```ts
+import { reactive } from "vue";
+
+const params = reactive({ page: 1, search: "" });
+
+const { data } = useFetch("/users", {
+  params,
+  watchParams: true,
+});
+
+// changing params will automatically re-fetch
+params.page = 2;
+params.search = "john";
+```
+
+Supports `ref`, `reactive`, and plain objects.
+
+---
+
+### Laravel Pagination
+
+```ts
+const { data, total, currentPage, links } = useFetch("/invoices", {
+  pagination: true,
+  params: { page: 1 },
+});
+```
+
+Expects this response structure from Laravel:
+
+```json
+{
+  "result": {
+    "data": [],
+    "links": [],
+    "from": 1,
+    "to": 10,
+    "total": 100,
+    "current_page": 1
+  }
+}
+```
+
+---
+
+### Pick Specific Key
+
+```ts
+// Response: { status: true, result: [...] }
+const { data } = useFetch("/users", {
+  pick: "result",
+});
+// data.value → [...]
+```
+
+---
+
+### Transform Response
+
+```ts
+const { data } = useFetch("/users", {
+  transform: (res) => res.map((user) => user.name),
+});
+```
+
+---
+
+### Upload FormData
+
+```ts
+const form = new FormData();
+form.append("file", file);
+form.append("name", "document.pdf");
+
+const { execute } = useFetch("/upload", {
+  method: "POST",
+  payload: form,
+  immediate: false,
+});
+```
+
+> `Content-Type` is automatically omitted for `FormData` so the browser sets the correct multipart boundary.
+
+---
+
+### Session Cache
+
+```ts
+const { data } = useFetch("/config", {
+  cache: true,
+  cacheKey: "app-config",
+});
+```
+
+> Cached in `sessionStorage`. Clears when the browser tab is closed.
+
+---
+
+### Retry on Failure
+
+```ts
+const { data } = useFetch("/unstable-endpoint", {
+  retry: 3,
+  retryDelay: 2000, // wait 2s between each retry
+});
+```
+
+---
+
+### Request Deduplication
+
+Prevents the same request from firing multiple times simultaneously. Useful when multiple components mount at the same time and need the same data.
+
+```ts
+// ComponentA.vue
+const { data } = useFetch("/user/profile", { dedup: true });
+
+// ComponentB.vue — mounts at the same time
+const { data } = useFetch("/user/profile", { dedup: true });
+
+// Result: only ONE actual HTTP request fires, both components get the same result ✅
+```
+
+> Deduplication only applies to `GET` requests.
+
+---
+
+### Manual Execute + Abort
+
+```ts
+const { execute, abort } = useFetch("/long-request", {
+  immediate: false,
+});
+
+execute();
+abort(); // cancel anytime
+```
+
+---
+
+## Global Configuration
+
+Set once in `main.ts` or `main.js`, applies to every request automatically.
+
+### Base URL
+
+```ts
+useFetch.baseURL("https://api.example.com/api/");
+```
+
+### Default Headers
+
+```ts
+useFetch.headers({
+  "X-API-KEY": "your-api-key",
+  "Accept-Language": "id",
+});
+```
+
+> Per-request headers always override global headers.
+
+---
+
+## Global Interceptors
+
+### Request Interceptor
+
+Runs before every request. Useful for injecting auth tokens globally.
+
+```ts
+const id = useFetch.interceptor.request.use(async (config) => {
+  const token = localStorage.getItem("token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// remove later if needed
+useFetch.interceptor.request.eject(id);
+```
+
+### Response Interceptor
+
+Runs after every successful response.
+
+```ts
+const id = useFetch.interceptor.response.use(async (result) => {
+  console.log("Response received:", result);
+  return result;
+});
+
+useFetch.interceptor.response.eject(id);
+```
+
+### Error Interceptor
+
+Runs when a request throws or response is not ok.
+
+```ts
+const id = useFetch.interceptor.error.use(async (error) => {
+  console.error("Request failed:", error);
+  return error;
+});
+
+useFetch.interceptor.error.eject(id);
+```
+
+---
+
+## Status Hooks
+
+Handle specific HTTP status codes globally — no need to repeat error handling in every component.
+
+```ts
+// main.ts / main.js
+useFetch.onError(401, () => {
+  router.push("/login");
+});
+
+useFetch.onError(403, () => {
+  toast.error("You are not authorized!");
+});
+
+useFetch.onError(404, () => {
+  toast.error("Resource not found!");
+});
+
+useFetch.onError(500, () => {
+  toast.error("Server error, please try again later");
+});
+```
+
+---
+
+## Multiple Instances
+
+Create isolated instances with their own base URL, headers, interceptors, and status hooks. Perfect for projects that communicate with multiple APIs.
+
+```ts
+// main.ts / main.js
+import { useFetch } from "@mlyrmdhnn/usefetch";
+
+// global instance
+useFetch.baseURL("https://api.example.com/api/");
+
+// isolated instance for payment service
+export const paymentApi = useFetch.create({
+  baseURL: "https://payment.example.com/api/",
+  headers: { "X-API-KEY": "payment-key" },
+});
+
+// isolated instance for reporting service
+export const reportApi = useFetch.create({
+  baseURL: "https://report.example.com/api/",
+});
+```
+
+Each instance has its own `baseURL`, `headers`, `interceptor`, and `onError`:
+
+```ts
+// instance specific interceptor
+paymentApi.interceptor.request.use(async (config) => {
+  config.headers["X-Signature"] = generateSignature();
+  return config;
+});
+
+// instance specific status hook
+paymentApi.onError(422, (err) => {
+  toast.error("Payment validation failed");
+});
+```
+
+Then use anywhere:
+
+```ts
+// global instance
+const { data } = useFetch("/users");
+
+// payment instance
+const { data } = paymentApi("/transactions");
+
+// report instance
+const { data } = reportApi("/summary");
+```
+
+---
+
+## HTTP Methods
+
+```ts
+type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+```
+
+---
+
+## TypeScript Support
+
+All types are exported and available:
+
+```ts
+import type {
+  HttpOptions,
+  HttpHeaders,
+  HttpMethod,
+  RequestInterceptorFn,
+  ResponseInterceptorFn,
+  ErrorInterceptorFn,
+  InterceptorHandler,
+} from "@mlyrmdhnn/usefetch";
+```
+
+---
+
+## License
+
+MIT