diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 55306c172..0326decfb 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,7 +1,8 @@
-import { defineConfig } from 'vitepress'
 import { createWriteStream } from 'node:fs'
 import { resolve } from 'node:path'
+
 import { SitemapStream } from 'sitemap'
+import { defineConfig } from 'vitepress'
 
 import { version } from '../../packages/core/package.json'
 
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index aabda9453..1b7b04574 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,8 +1,8 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import { EnhanceAppContext } from 'vitepress/dist/client'
 import { inject } from '@vercel/analytics'
+import { EnhanceAppContext } from 'vitepress/dist/client'
+import DefaultTheme from 'vitepress/theme'
+import { h } from 'vue'
 
 import HomePage from './HomePage.vue'
 
diff --git a/e2e/package.json b/e2e/package.json
index 1a8e093f1..b5f2efc22 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -34,7 +34,7 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/solid-query": "^4.36.1",
     "@tanstack/svelte-query": "^4.36.1",
-    "@tanstack/vue-query": "^4.36.1",
+    "@tanstack/vue-query": "^4.36.2",
     "@zodios/core": "^10.9.6",
     "axios": "^1.5.1",
     "msw": "^1.3.2",
diff --git a/e2e/src/client.ts b/e2e/src/client.ts
index bd6ec9d1f..626d7d793 100644
--- a/e2e/src/client.ts
+++ b/e2e/src/client.ts
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import type { AxiosError, AxiosHeaders, AxiosResponse, AxiosRequestConfig } from 'axios'
+import type { AxiosError, AxiosHeaders, AxiosRequestConfig, AxiosResponse } from 'axios'
 
 declare const AXIOS_BASE: string
 declare const AXIOS_HEADERS: string
diff --git a/examples/advanced/package.json b/examples/advanced/package.json
index 5d0400ded..714c23802 100644
--- a/examples/advanced/package.json
+++ b/examples/advanced/package.json
@@ -38,7 +38,7 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/solid-query": "^4.36.1",
     "@tanstack/svelte-query": "^4.36.1",
-    "@tanstack/vue-query": "^4.36.1",
+    "@tanstack/vue-query": "^4.36.2",
     "@zodios/core": "^10.9.6",
     "axios": "^1.5.1",
     "msw": "^1.3.2",
diff --git a/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByStatus.ts b/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByStatus.ts
index 63ecaa100..3abd845e6 100644
--- a/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByStatus.ts
+++ b/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByStatus.ts
@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../../../models/ts/petController/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,
diff --git a/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByTags.ts b/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByTags.ts
index ff2d156d8..497aa6194 100644
--- a/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByTags.ts
+++ b/examples/advanced/src/gen/clients/hooks/petController/useFindPetsByTags.ts
@@ -9,7 +9,7 @@ import type {
   FindPetsByTags400,
 } from '../../../models/ts/petController/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   headers: FindPetsByTagsHeaderParams,
diff --git a/examples/advanced/src/gen/clients/hooks/petController/useGetPetById.ts b/examples/advanced/src/gen/clients/hooks/petController/useGetPetById.ts
index 52b467f77..fcd2ae7dd 100644
--- a/examples/advanced/src/gen/clients/hooks/petController/useGetPetById.ts
+++ b/examples/advanced/src/gen/clients/hooks/petController/useGetPetById.ts
@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from '../../../models/ts/petController/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400 | GetPetById404>(
   petId: GetPetByIdPathParams['petId'],
diff --git a/examples/advanced/src/gen/clients/hooks/userController/useGetUserByName.ts b/examples/advanced/src/gen/clients/hooks/userController/useGetUserByName.ts
index 1bf1b63c4..8312fbd41 100644
--- a/examples/advanced/src/gen/clients/hooks/userController/useGetUserByName.ts
+++ b/examples/advanced/src/gen/clients/hooks/userController/useGetUserByName.ts
@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400, GetUserByName404 } from '../../../models/ts/userController/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400 | GetUserByName404>(
   username: GetUserByNamePathParams['username'],
diff --git a/examples/advanced/src/gen/clients/hooks/userController/useLoginUser.ts b/examples/advanced/src/gen/clients/hooks/userController/useLoginUser.ts
index 5650b3462..c3f9591cb 100644
--- a/examples/advanced/src/gen/clients/hooks/userController/useLoginUser.ts
+++ b/examples/advanced/src/gen/clients/hooks/userController/useLoginUser.ts
@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../../../models/ts/userController/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,
diff --git a/examples/advanced/src/gen/clients/hooks/userController/useLogoutUser.ts b/examples/advanced/src/gen/clients/hooks/userController/useLogoutUser.ts
index 725e00035..5b5e7048d 100644
--- a/examples/advanced/src/gen/clients/hooks/userController/useLogoutUser.ts
+++ b/examples/advanced/src/gen/clients/hooks/userController/useLogoutUser.ts
@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { LogoutUserQueryResponse } from '../../../models/ts/userController/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/react-query/package.json b/examples/react-query/package.json
index 528c2c43f..77c778292 100644
--- a/examples/react-query/package.json
+++ b/examples/react-query/package.json
@@ -28,6 +28,7 @@
     "@kubb/swagger-tanstack-query": "workspace:*",
     "@kubb/swagger-ts": "workspace:*",
     "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react-query/src/App.tsx b/examples/react-query/src/App.tsx
index fad54f597..b1c30913e 100644
--- a/examples/react-query/src/App.tsx
+++ b/examples/react-query/src/App.tsx
@@ -1,15 +1,21 @@
+import { useState } from 'react'
+import type { FindPetsByStatusQueryParamsStatus } from './gen'
 import { useFindPetsByStatusHook } from './gen'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const queryClient = new QueryClient()
 
 function Pets(): JSX.Element {
-  const { data: pets } = useFindPetsByStatusHook({ status: 'available' })
+  const [status, setStatus] = useState<FindPetsByStatusQueryParamsStatus>('available')
+  const { data: pets } = useFindPetsByStatusHook({ status })
 
   return (
     <>
-      <h1>Pets:</h1>
+      <h1>Pets: {status}</h1>
       <ul>{pets?.map((pet) => <li key={pet.id}>{pet.name}</li>)}</ul>
+      <button onClick={() => setStatus('available')}>Available</button>
+      <button onClick={() => setStatus('pending')}>Pending</button>
     </>
   )
 }
@@ -18,6 +24,7 @@ export function App(): JSX.Element {
   return (
     <QueryClientProvider client={queryClient}>
       <Pets />
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }
diff --git a/examples/react-query/src/gen/hooks/useFindPetsByStatusHook.ts b/examples/react-query/src/gen/hooks/useFindPetsByStatusHook.ts
index 7855dba9b..20db92816 100644
--- a/examples/react-query/src/gen/hooks/useFindPetsByStatusHook.ts
+++ b/examples/react-query/src/gen/hooks/useFindPetsByStatusHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../models/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,
diff --git a/examples/react-query/src/gen/hooks/useFindPetsByTagsHook.ts b/examples/react-query/src/gen/hooks/useFindPetsByTagsHook.ts
index 75c6542fe..0934e1541 100644
--- a/examples/react-query/src/gen/hooks/useFindPetsByTagsHook.ts
+++ b/examples/react-query/src/gen/hooks/useFindPetsByTagsHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByTagsQueryResponse, FindPetsByTagsQueryParams, FindPetsByTags400 } from '../models/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,
diff --git a/examples/react-query/src/gen/hooks/useGetInventoryHook.ts b/examples/react-query/src/gen/hooks/useGetInventoryHook.ts
index 634509966..60892ba56 100644
--- a/examples/react-query/src/gen/hooks/useGetInventoryHook.ts
+++ b/examples/react-query/src/gen/hooks/useGetInventoryHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetInventoryQueryResponse } from '../models/GetInventory'
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/react-query/src/gen/hooks/useGetOrderByIdHook.ts b/examples/react-query/src/gen/hooks/useGetOrderByIdHook.ts
index 075a57bdd..32696c3fc 100644
--- a/examples/react-query/src/gen/hooks/useGetOrderByIdHook.ts
+++ b/examples/react-query/src/gen/hooks/useGetOrderByIdHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetOrderByIdQueryResponse, GetOrderByIdPathParams, GetOrderById400 } from '../models/GetOrderById'
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
   orderId: GetOrderByIdPathParams['orderId'],
diff --git a/examples/react-query/src/gen/hooks/useGetPetByIdHook.ts b/examples/react-query/src/gen/hooks/useGetPetByIdHook.ts
index ab2bb0b07..54eff3f11 100644
--- a/examples/react-query/src/gen/hooks/useGetPetByIdHook.ts
+++ b/examples/react-query/src/gen/hooks/useGetPetByIdHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400 } from '../models/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
   petId: GetPetByIdPathParams['petId'],
diff --git a/examples/react-query/src/gen/hooks/useGetUserByNameHook.ts b/examples/react-query/src/gen/hooks/useGetUserByNameHook.ts
index 9be18cd06..aa4d6988a 100644
--- a/examples/react-query/src/gen/hooks/useGetUserByNameHook.ts
+++ b/examples/react-query/src/gen/hooks/useGetUserByNameHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400 } from '../models/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
   username: GetUserByNamePathParams['username'],
diff --git a/examples/react-query/src/gen/hooks/useLoginUserHook.ts b/examples/react-query/src/gen/hooks/useLoginUserHook.ts
index 6d3a88af1..4800f83d4 100644
--- a/examples/react-query/src/gen/hooks/useLoginUserHook.ts
+++ b/examples/react-query/src/gen/hooks/useLoginUserHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../models/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,
diff --git a/examples/react-query/src/gen/hooks/useLogoutUserHook.ts b/examples/react-query/src/gen/hooks/useLogoutUserHook.ts
index 1c8cf9e2f..c14616c48 100644
--- a/examples/react-query/src/gen/hooks/useLogoutUserHook.ts
+++ b/examples/react-query/src/gen/hooks/useLogoutUserHook.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { LogoutUserQueryResponse } from '../models/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/react-query/src/mocks/index.ts b/examples/react-query/src/mocks/index.ts
index a2fd2a057..6c7eeb6cd 100644
--- a/examples/react-query/src/mocks/index.ts
+++ b/examples/react-query/src/mocks/index.ts
@@ -1,7 +1,18 @@
 import { setupWorker, rest } from 'msw'
 
 export const worker = setupWorker(
-  rest.get('/pets', (req, res, ctx) => {
+  rest.get('/pet/findByStatus', (req, res, ctx) => {
+    if (req.url.searchParams.get('status') === 'pending') {
+      return res(
+        ctx.json([
+          {
+            id: '1234',
+            name: 'Lily(pending)',
+          },
+        ]),
+      )
+    }
+
     return res(
       ctx.json([
         {
diff --git a/examples/simple-single/src/gen/hooks.ts b/examples/simple-single/src/gen/hooks.ts
index 4fa63a271..dfd977e40 100644
--- a/examples/simple-single/src/gen/hooks.ts
+++ b/examples/simple-single/src/gen/hooks.ts
@@ -125,7 +125,7 @@ export function useAddPet<TData = AddPetMutationResponse, TError = AddPet405, TV
   })
 }
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,
@@ -173,7 +173,7 @@ export function useFindPetsByStatus<TData = FindPetsByStatusQueryResponse, TErro
   return query
 }
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,
@@ -221,7 +221,7 @@ export function useFindPetsByTags<TData = FindPetsByTagsQueryResponse, TError =
   return query
 }
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400 | GetPetById404>(
   petId: GetPetByIdPathParams['petId'],
@@ -358,7 +358,7 @@ export function useUploadFile<TData = UploadFileMutationResponse, TError = unkno
   })
 }
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
@@ -459,7 +459,7 @@ export function usePlaceOrderPatch<TData = PlaceOrderPatchMutationResponse, TErr
   })
 }
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400 | GetOrderById404>(
   orderId: GetOrderByIdPathParams['orderId'],
@@ -594,7 +594,7 @@ export function useCreateUsersWithListInput<
   })
 }
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,
@@ -641,7 +641,7 @@ export function useLoginUser<TData = LoginUserQueryResponse, TError = LoginUser4
   return query
 }
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
@@ -685,7 +685,7 @@ export function useLogoutUser<TData = LogoutUserQueryResponse, TError = unknown>
   return query
 }
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400 | GetUserByName404>(
   username: GetUserByNamePathParams['username'],
diff --git a/examples/solid-query/package.json b/examples/solid-query/package.json
index 892f90762..0342b9a4a 100644
--- a/examples/solid-query/package.json
+++ b/examples/solid-query/package.json
@@ -32,7 +32,6 @@
     "tsup": "^7.2.0"
   },
   "devDependencies": {
-    "@kubb/ts-config": "workspace:*",
     "typescript": "^5.2.2"
   },
   "packageManager": "pnpm@8.3.0",
diff --git a/examples/solid-query/src/gen/hooks/findPetsByStatusQuery.ts b/examples/solid-query/src/gen/hooks/findPetsByStatusQuery.ts
index 5c98c62d3..f39a5b4f6 100644
--- a/examples/solid-query/src/gen/hooks/findPetsByStatusQuery.ts
+++ b/examples/solid-query/src/gen/hooks/findPetsByStatusQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../models/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,
diff --git a/examples/solid-query/src/gen/hooks/findPetsByTagsQuery.ts b/examples/solid-query/src/gen/hooks/findPetsByTagsQuery.ts
index 22b814046..f75a6eba9 100644
--- a/examples/solid-query/src/gen/hooks/findPetsByTagsQuery.ts
+++ b/examples/solid-query/src/gen/hooks/findPetsByTagsQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByTagsQueryResponse, FindPetsByTagsQueryParams, FindPetsByTags400 } from '../models/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,
diff --git a/examples/solid-query/src/gen/hooks/getInventoryQuery.ts b/examples/solid-query/src/gen/hooks/getInventoryQuery.ts
index 326c6d77a..7e4a49f41 100644
--- a/examples/solid-query/src/gen/hooks/getInventoryQuery.ts
+++ b/examples/solid-query/src/gen/hooks/getInventoryQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetInventoryQueryResponse } from '../models/GetInventory'
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/solid-query/src/gen/hooks/getOrderByIdQuery.ts b/examples/solid-query/src/gen/hooks/getOrderByIdQuery.ts
index 155963b4a..220992a2f 100644
--- a/examples/solid-query/src/gen/hooks/getOrderByIdQuery.ts
+++ b/examples/solid-query/src/gen/hooks/getOrderByIdQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetOrderByIdQueryResponse, GetOrderByIdPathParams, GetOrderById400 } from '../models/GetOrderById'
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
   orderId: GetOrderByIdPathParams['orderId'],
diff --git a/examples/solid-query/src/gen/hooks/getPetByIdQuery.ts b/examples/solid-query/src/gen/hooks/getPetByIdQuery.ts
index c454e00f8..24ed5cb17 100644
--- a/examples/solid-query/src/gen/hooks/getPetByIdQuery.ts
+++ b/examples/solid-query/src/gen/hooks/getPetByIdQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400 } from '../models/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
   petId: GetPetByIdPathParams['petId'],
diff --git a/examples/solid-query/src/gen/hooks/getUserByNameQuery.ts b/examples/solid-query/src/gen/hooks/getUserByNameQuery.ts
index e813a41a4..6eff245cf 100644
--- a/examples/solid-query/src/gen/hooks/getUserByNameQuery.ts
+++ b/examples/solid-query/src/gen/hooks/getUserByNameQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400 } from '../models/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
   username: GetUserByNamePathParams['username'],
diff --git a/examples/solid-query/src/gen/hooks/loginUserQuery.ts b/examples/solid-query/src/gen/hooks/loginUserQuery.ts
index 09904ef5d..d791cabd9 100644
--- a/examples/solid-query/src/gen/hooks/loginUserQuery.ts
+++ b/examples/solid-query/src/gen/hooks/loginUserQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../models/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,
diff --git a/examples/solid-query/src/gen/hooks/logoutUserQuery.ts b/examples/solid-query/src/gen/hooks/logoutUserQuery.ts
index a3fc2d98a..0cd4e7ad2 100644
--- a/examples/solid-query/src/gen/hooks/logoutUserQuery.ts
+++ b/examples/solid-query/src/gen/hooks/logoutUserQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { LogoutUserQueryResponse } from '../models/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/svelte-query/package.json b/examples/svelte-query/package.json
index 551ae674b..cb621e314 100644
--- a/examples/svelte-query/package.json
+++ b/examples/svelte-query/package.json
@@ -32,7 +32,6 @@
     "tsup": "^7.2.0"
   },
   "devDependencies": {
-    "@kubb/ts-config": "workspace:*",
     "typescript": "^5.2.2"
   },
   "packageManager": "pnpm@8.3.0",
diff --git a/examples/svelte-query/src/gen/hooks/findPetsByStatusQuery.ts b/examples/svelte-query/src/gen/hooks/findPetsByStatusQuery.ts
index ad9161f69..0ccbe1d76 100644
--- a/examples/svelte-query/src/gen/hooks/findPetsByStatusQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/findPetsByStatusQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../models/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,
diff --git a/examples/svelte-query/src/gen/hooks/findPetsByTagsQuery.ts b/examples/svelte-query/src/gen/hooks/findPetsByTagsQuery.ts
index ef2cd353f..12aab4891 100644
--- a/examples/svelte-query/src/gen/hooks/findPetsByTagsQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/findPetsByTagsQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByTagsQueryResponse, FindPetsByTagsQueryParams, FindPetsByTags400 } from '../models/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,
diff --git a/examples/svelte-query/src/gen/hooks/getInventoryQuery.ts b/examples/svelte-query/src/gen/hooks/getInventoryQuery.ts
index 67052799f..d18ce7911 100644
--- a/examples/svelte-query/src/gen/hooks/getInventoryQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/getInventoryQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { GetInventoryQueryResponse } from '../models/GetInventory'
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/svelte-query/src/gen/hooks/getOrderByIdQuery.ts b/examples/svelte-query/src/gen/hooks/getOrderByIdQuery.ts
index e0b69cb10..550a03d2b 100644
--- a/examples/svelte-query/src/gen/hooks/getOrderByIdQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/getOrderByIdQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { GetOrderByIdQueryResponse, GetOrderByIdPathParams, GetOrderById400 } from '../models/GetOrderById'
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
   orderId: GetOrderByIdPathParams['orderId'],
diff --git a/examples/svelte-query/src/gen/hooks/getPetByIdQuery.ts b/examples/svelte-query/src/gen/hooks/getPetByIdQuery.ts
index b9eb52ed7..7c1f109f5 100644
--- a/examples/svelte-query/src/gen/hooks/getPetByIdQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/getPetByIdQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400 } from '../models/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
   petId: GetPetByIdPathParams['petId'],
diff --git a/examples/svelte-query/src/gen/hooks/getUserByNameQuery.ts b/examples/svelte-query/src/gen/hooks/getUserByNameQuery.ts
index 0ceca0fd1..670b8e294 100644
--- a/examples/svelte-query/src/gen/hooks/getUserByNameQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/getUserByNameQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400 } from '../models/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
   username: GetUserByNamePathParams['username'],
diff --git a/examples/svelte-query/src/gen/hooks/loginUserQuery.ts b/examples/svelte-query/src/gen/hooks/loginUserQuery.ts
index 4a6a88eee..04b6b0a04 100644
--- a/examples/svelte-query/src/gen/hooks/loginUserQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/loginUserQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../models/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,
diff --git a/examples/svelte-query/src/gen/hooks/logoutUserQuery.ts b/examples/svelte-query/src/gen/hooks/logoutUserQuery.ts
index fa2c26271..ce2f07bc9 100644
--- a/examples/svelte-query/src/gen/hooks/logoutUserQuery.ts
+++ b/examples/svelte-query/src/gen/hooks/logoutUserQuery.ts
@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/svelte-query'
 import client from '@kubb/swagger-client/client'
 import type { LogoutUserQueryResponse } from '../models/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/vue-query/.codesandbox/Dockerfile b/examples/vue-query/.codesandbox/Dockerfile
new file mode 100644
index 000000000..3739923ce
--- /dev/null
+++ b/examples/vue-query/.codesandbox/Dockerfile
@@ -0,0 +1 @@
+FROM node:18-bullseye
\ No newline at end of file
diff --git a/examples/vue-query/.codesandbox/build.js b/examples/vue-query/.codesandbox/build.js
new file mode 100644
index 000000000..84777a93f
--- /dev/null
+++ b/examples/vue-query/.codesandbox/build.js
@@ -0,0 +1,25 @@
+import fs from "node:fs";
+
+const pkgJsonPaths = [
+  "package.json",
+];
+try {
+  for (const pkgJsonPath of pkgJsonPaths) {
+    const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+    const oldVersion = "workspace:*";
+    const newVersion = "latest";
+
+    const content = JSON.stringify(pkg, null, "\t") + "\n";
+    const newContent = content
+      // @ts-ignore
+      .replaceAll(
+        `"${oldVersion}"`,
+        `"${newVersion}"`,
+      )
+
+    fs.writeFileSync(pkgJsonPath, newContent);
+  }
+} catch (error) {
+  console.error(error);
+  process.exit(1);
+}
\ No newline at end of file
diff --git a/examples/vue-query/.codesandbox/tasks.json b/examples/vue-query/.codesandbox/tasks.json
new file mode 100644
index 000000000..a527e3d0f
--- /dev/null
+++ b/examples/vue-query/.codesandbox/tasks.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://codesandbox.io/schemas/tasks.json",
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Replace workspace:* by latest",
+      "command": "node ./.codesandbox/build.js"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "corepack enable && pnpm install"
+    }
+  ],
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "update": {
+      "name": "update",
+      "command": "pnpm update",
+      "runAtStart": false
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/vue-query/index.html b/examples/vue-query/index.html
new file mode 100644
index 000000000..db807cd00
--- /dev/null
+++ b/examples/vue-query/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue-query/package.json b/examples/vue-query/package.json
index 6cfbb3c5b..2620441fc 100644
--- a/examples/vue-query/package.json
+++ b/examples/vue-query/package.json
@@ -12,7 +12,9 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && vite build",
+    "clean": "npx rimraf ./dist",
+    "dev": "vite",
     "generate": "kubb generate",
     "start": "tsup --watch",
     "test": "vitest",
@@ -26,14 +28,16 @@
     "@kubb/swagger-tanstack-query": "workspace:*",
     "@kubb/swagger-ts": "workspace:*",
     "@kubb/swagger-zod": "workspace:*",
-    "@tanstack/vue-query": "^4.36.1",
+    "@tanstack/vue-query": "^4.36.2",
     "axios": "^1.5.1",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@kubb/ts-config": "workspace:*",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "msw": "^1.3.2",
     "tsup": "^7.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11"
   },
   "packageManager": "pnpm@8.3.0",
   "engines": {
diff --git a/examples/vue-query/public/mockServiceWorker.js b/examples/vue-query/public/mockServiceWorker.js
new file mode 100644
index 000000000..8ee70b3e4
--- /dev/null
+++ b/examples/vue-query/public/mockServiceWorker.js
@@ -0,0 +1,303 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (1.2.2).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2)
+
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`,
+      )
+    }),
+  )
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const clonedResponse = response.clone()
+      sendToClient(client, {
+        type: 'RESPONSE',
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
+          redirected: clonedResponse.redirected,
+        },
+      })
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  const clonedRequest = request.clone()
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers['x-msw-bypass']
+
+    return fetch(clonedRequest, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get('x-msw-bypass') === 'true') {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const clientMessage = await sendToClient(client, {
+    type: 'REQUEST',
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body: await request.text(),
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  })
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+
+    case 'NETWORK_ERROR': {
+      const { name, message } = clientMessage.data
+      const networkError = new Error(message)
+      networkError.name = name
+
+      // Rejecting a "respondWith" promise emulates a network error.
+      throw networkError
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [channel.port2])
+  })
+}
+
+function sleep(timeMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeMs)
+  })
+}
+
+async function respondWithMock(response) {
+  await sleep(response.delay)
+  return new Response(response.body, response)
+}
diff --git a/examples/vue-query/shims-vue.d.ts b/examples/vue-query/shims-vue.d.ts
new file mode 100644
index 000000000..c458ab5a3
--- /dev/null
+++ b/examples/vue-query/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue-query/src/App.vue b/examples/vue-query/src/App.vue
new file mode 100644
index 000000000..3ef438286
--- /dev/null
+++ b/examples/vue-query/src/App.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { FindPetsByStatusQueryParamsStatus } from './index.ts';
+import Pets from "./Pets.vue"
+
+export default defineComponent({
+  name: 'App',
+  components: { Pets },
+  setup() {
+    const status = ref<FindPetsByStatusQueryParamsStatus>("available")
+
+    return {
+      status,
+      setStatus(newStatus:FindPetsByStatusQueryParamsStatus ){
+        status.value= newStatus
+      }
+    };
+  },
+});
+</script>
+
+<template>
+  <Pets :status="status" @setStatus="setStatus" />
+</template>
+
diff --git a/examples/vue-query/src/Pets.vue b/examples/vue-query/src/Pets.vue
new file mode 100644
index 000000000..74c8b037c
--- /dev/null
+++ b/examples/vue-query/src/Pets.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import { defineComponent, computed, unref } from 'vue';
+import { useFindPetsByStatus, FindPetsByStatusQueryParams } from './index.ts';
+
+export default defineComponent({
+  name: 'PetsList',
+  emits: ['setStatus'],
+  props: {
+    status: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const params = computed(() =>{
+      return {
+        status: props.status as FindPetsByStatusQueryParams["status"]
+      }
+    })
+    
+    const petsQuery = useFindPetsByStatus(params)
+    const pets = computed(() => unref(petsQuery?.data));
+
+    return {
+      pets
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="pets" v-if="pets">
+    <h1>Pets: {{ status }}</h1>
+    <ul v-for="pet in pets" :key="pet.id">
+      <li :key="pet.id">{{pet.name}}</li>
+    </ul>
+  </div>
+  <button @click="$emit('setStatus', 'available')" >Available</button>
+  <button @click="$emit('setStatus', 'pending')" >Pending</button>
+</template>
+
diff --git a/examples/vue-query/src/gen/hooks/useDeleteOrder.ts b/examples/vue-query/src/gen/hooks/useDeleteOrder.ts
index 0a8ada5c1..0c5af2ca4 100644
--- a/examples/vue-query/src/gen/hooks/useDeleteOrder.ts
+++ b/examples/vue-query/src/gen/hooks/useDeleteOrder.ts
@@ -1,4 +1,6 @@
 import type { VueMutationObserverOptions } from '@tanstack/vue-query/build/lib/useMutation'
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { UseMutationReturnType } from '@tanstack/vue-query'
 import { useMutation } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
@@ -12,7 +14,7 @@ import type { DeleteOrderMutationResponse, DeleteOrderPathParams, DeleteOrder400
  */
 
 export function useDeleteOrder<TData = DeleteOrderMutationResponse, TError = DeleteOrder400>(
-  orderId: DeleteOrderPathParams['orderId'],
+  refOrderId: MaybeRef<DeleteOrderPathParams['orderId']>,
   options: {
     mutation?: VueMutationObserverOptions<ResponseConfig<TData>, TError, void, unknown>
     client?: Partial<Parameters<typeof client<TData, TError, void>>[0]>
@@ -22,6 +24,7 @@ export function useDeleteOrder<TData = DeleteOrderMutationResponse, TError = Del
 
   return useMutation<ResponseConfig<TData>, TError, void, unknown>({
     mutationFn: () => {
+      const orderId = unref(refOrderId)
       return client<TData, TError, void>({
         method: 'delete',
         url: `/store/order/${orderId}`,
diff --git a/examples/vue-query/src/gen/hooks/useDeletePet.ts b/examples/vue-query/src/gen/hooks/useDeletePet.ts
index 28ffca2c9..f8c9159a8 100644
--- a/examples/vue-query/src/gen/hooks/useDeletePet.ts
+++ b/examples/vue-query/src/gen/hooks/useDeletePet.ts
@@ -1,4 +1,6 @@
 import type { VueMutationObserverOptions } from '@tanstack/vue-query/build/lib/useMutation'
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { UseMutationReturnType } from '@tanstack/vue-query'
 import { useMutation } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
@@ -12,8 +14,8 @@ import type { DeletePetMutationResponse, DeletePetPathParams, DeletePetHeaderPar
  */
 
 export function useDeletePet<TData = DeletePetMutationResponse, TError = DeletePet400>(
-  petId: DeletePetPathParams['petId'],
-  headers?: DeletePetHeaderParams,
+  refPetId: MaybeRef<DeletePetPathParams['petId']>,
+  refHeaders?: MaybeRef<DeletePetHeaderParams>,
   options: {
     mutation?: VueMutationObserverOptions<ResponseConfig<TData>, TError, void, unknown>
     client?: Partial<Parameters<typeof client<TData, TError, void>>[0]>
@@ -23,6 +25,8 @@ export function useDeletePet<TData = DeletePetMutationResponse, TError = DeleteP
 
   return useMutation<ResponseConfig<TData>, TError, void, unknown>({
     mutationFn: () => {
+      const petId = unref(refPetId)
+      const headers = unref(refHeaders)
       return client<TData, TError, void>({
         method: 'delete',
         url: `/pet/${petId}`,
diff --git a/examples/vue-query/src/gen/hooks/useDeleteUser.ts b/examples/vue-query/src/gen/hooks/useDeleteUser.ts
index 7db26d5c9..1539672cf 100644
--- a/examples/vue-query/src/gen/hooks/useDeleteUser.ts
+++ b/examples/vue-query/src/gen/hooks/useDeleteUser.ts
@@ -1,4 +1,6 @@
 import type { VueMutationObserverOptions } from '@tanstack/vue-query/build/lib/useMutation'
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { UseMutationReturnType } from '@tanstack/vue-query'
 import { useMutation } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
@@ -12,7 +14,7 @@ import type { DeleteUserMutationResponse, DeleteUserPathParams, DeleteUser400 }
  */
 
 export function useDeleteUser<TData = DeleteUserMutationResponse, TError = DeleteUser400>(
-  username: DeleteUserPathParams['username'],
+  refUsername: MaybeRef<DeleteUserPathParams['username']>,
   options: {
     mutation?: VueMutationObserverOptions<ResponseConfig<TData>, TError, void, unknown>
     client?: Partial<Parameters<typeof client<TData, TError, void>>[0]>
@@ -22,6 +24,7 @@ export function useDeleteUser<TData = DeleteUserMutationResponse, TError = Delet
 
   return useMutation<ResponseConfig<TData>, TError, void, unknown>({
     mutationFn: () => {
+      const username = unref(refUsername)
       return client<TData, TError, void>({
         method: 'delete',
         url: `/user/${username}`,
diff --git a/examples/vue-query/src/gen/hooks/useFindPetsByStatus.ts b/examples/vue-query/src/gen/hooks/useFindPetsByStatus.ts
index 066366ece..46ae99569 100644
--- a/examples/vue-query/src/gen/hooks/useFindPetsByStatus.ts
+++ b/examples/vue-query/src/gen/hooks/useFindPetsByStatus.ts
@@ -1,19 +1,22 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { QueryKey, UseQueryReturnType, UseQueryOptions } from '@tanstack/vue-query'
 import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../models/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: MaybeRef<FindPetsByStatusQueryParams>) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
-  params?: FindPetsByStatusQueryParams,
+  refParams?: MaybeRef<FindPetsByStatusQueryParams>,
   options: Partial<Parameters<typeof client>[0]> = {},
 ): UseQueryOptions<TData, TError> {
-  const queryKey = findPetsByStatusQueryKey(params)
+  const queryKey = findPetsByStatusQueryKey(refParams)
 
   return {
     queryKey,
     queryFn: () => {
+      const params = unref(refParams)
       return client<TData, TError>({
         method: 'get',
         url: `/pet/findByStatus`,
@@ -32,17 +35,17 @@ export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryRespon
  */
 
 export function useFindPetsByStatus<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
-  params?: FindPetsByStatusQueryParams,
+  refParams?: MaybeRef<FindPetsByStatusQueryParams>,
   options: {
     query?: UseQueryOptions<TData, TError>
     client?: Partial<Parameters<typeof client<TData, TError>>[0]>
   } = {},
 ): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const { query: queryOptions, client: clientOptions = {} } = options ?? {}
-  const queryKey = queryOptions?.queryKey ?? findPetsByStatusQueryKey(params)
+  const queryKey = queryOptions?.queryKey ?? findPetsByStatusQueryKey(refParams)
 
   const query = useQuery<TData, TError>({
-    ...findPetsByStatusQueryOptions<TData, TError>(params, clientOptions),
+    ...findPetsByStatusQueryOptions<TData, TError>(refParams, clientOptions),
     ...queryOptions,
   }) as UseQueryReturnType<TData, TError> & { queryKey: QueryKey }
 
diff --git a/examples/vue-query/src/gen/hooks/useFindPetsByTags.ts b/examples/vue-query/src/gen/hooks/useFindPetsByTags.ts
index 3064e5d49..2559149ae 100644
--- a/examples/vue-query/src/gen/hooks/useFindPetsByTags.ts
+++ b/examples/vue-query/src/gen/hooks/useFindPetsByTags.ts
@@ -1,19 +1,22 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { QueryKey, UseQueryReturnType, UseQueryOptions } from '@tanstack/vue-query'
 import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByTagsQueryResponse, FindPetsByTagsQueryParams, FindPetsByTags400 } from '../models/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
-  params?: FindPetsByTagsQueryParams,
+  refParams?: MaybeRef<FindPetsByTagsQueryParams>,
   options: Partial<Parameters<typeof client>[0]> = {},
 ): UseQueryOptions<TData, TError> {
-  const queryKey = findPetsByTagsQueryKey(params)
+  const queryKey = findPetsByTagsQueryKey(refParams)
 
   return {
     queryKey,
     queryFn: () => {
+      const params = unref(refParams)
       return client<TData, TError>({
         method: 'get',
         url: `/pet/findByTags`,
@@ -32,17 +35,17 @@ export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse,
  */
 
 export function useFindPetsByTags<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
-  params?: FindPetsByTagsQueryParams,
+  refParams?: MaybeRef<FindPetsByTagsQueryParams>,
   options: {
     query?: UseQueryOptions<TData, TError>
     client?: Partial<Parameters<typeof client<TData, TError>>[0]>
   } = {},
 ): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const { query: queryOptions, client: clientOptions = {} } = options ?? {}
-  const queryKey = queryOptions?.queryKey ?? findPetsByTagsQueryKey(params)
+  const queryKey = queryOptions?.queryKey ?? findPetsByTagsQueryKey(refParams)
 
   const query = useQuery<TData, TError>({
-    ...findPetsByTagsQueryOptions<TData, TError>(params, clientOptions),
+    ...findPetsByTagsQueryOptions<TData, TError>(refParams, clientOptions),
     ...queryOptions,
   }) as UseQueryReturnType<TData, TError> & { queryKey: QueryKey }
 
diff --git a/examples/vue-query/src/gen/hooks/useGetInventory.ts b/examples/vue-query/src/gen/hooks/useGetInventory.ts
index 084735d29..085ecca12 100644
--- a/examples/vue-query/src/gen/hooks/useGetInventory.ts
+++ b/examples/vue-query/src/gen/hooks/useGetInventory.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { GetInventoryQueryResponse } from '../models/GetInventory'
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/vue-query/src/gen/hooks/useGetOrderById.ts b/examples/vue-query/src/gen/hooks/useGetOrderById.ts
index 3846e4a12..86d351e9d 100644
--- a/examples/vue-query/src/gen/hooks/useGetOrderById.ts
+++ b/examples/vue-query/src/gen/hooks/useGetOrderById.ts
@@ -1,19 +1,23 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { QueryKey, UseQueryReturnType, UseQueryOptions } from '@tanstack/vue-query'
 import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { GetOrderByIdQueryResponse, GetOrderByIdPathParams, GetOrderById400 } from '../models/GetOrderById'
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: MaybeRef<GetOrderByIdPathParams['orderId']>) =>
+  [{ url: `/store/order/${unref(orderId)}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
-  orderId: GetOrderByIdPathParams['orderId'],
+  refOrderId: MaybeRef<GetOrderByIdPathParams['orderId']>,
   options: Partial<Parameters<typeof client>[0]> = {},
 ): UseQueryOptions<TData, TError> {
-  const queryKey = getOrderByIdQueryKey(orderId)
+  const queryKey = getOrderByIdQueryKey(refOrderId)
 
   return {
     queryKey,
     queryFn: () => {
+      const orderId = unref(refOrderId)
       return client<TData, TError>({
         method: 'get',
         url: `/store/order/${orderId}`,
@@ -31,17 +35,17 @@ export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TErr
  */
 
 export function useGetOrderById<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
-  orderId: GetOrderByIdPathParams['orderId'],
+  refOrderId: MaybeRef<GetOrderByIdPathParams['orderId']>,
   options: {
     query?: UseQueryOptions<TData, TError>
     client?: Partial<Parameters<typeof client<TData, TError>>[0]>
   } = {},
 ): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const { query: queryOptions, client: clientOptions = {} } = options ?? {}
-  const queryKey = queryOptions?.queryKey ?? getOrderByIdQueryKey(orderId)
+  const queryKey = queryOptions?.queryKey ?? getOrderByIdQueryKey(refOrderId)
 
   const query = useQuery<TData, TError>({
-    ...getOrderByIdQueryOptions<TData, TError>(orderId, clientOptions),
+    ...getOrderByIdQueryOptions<TData, TError>(refOrderId, clientOptions),
     ...queryOptions,
   }) as UseQueryReturnType<TData, TError> & { queryKey: QueryKey }
 
diff --git a/examples/vue-query/src/gen/hooks/useGetPetById.ts b/examples/vue-query/src/gen/hooks/useGetPetById.ts
index e1f51a83e..1822a82cf 100644
--- a/examples/vue-query/src/gen/hooks/useGetPetById.ts
+++ b/examples/vue-query/src/gen/hooks/useGetPetById.ts
@@ -1,19 +1,22 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { QueryKey, UseQueryReturnType, UseQueryOptions } from '@tanstack/vue-query'
 import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400 } from '../models/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: MaybeRef<GetPetByIdPathParams['petId']>) => [{ url: `/pet/${unref(petId)}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
-  petId: GetPetByIdPathParams['petId'],
+  refPetId: MaybeRef<GetPetByIdPathParams['petId']>,
   options: Partial<Parameters<typeof client>[0]> = {},
 ): UseQueryOptions<TData, TError> {
-  const queryKey = getPetByIdQueryKey(petId)
+  const queryKey = getPetByIdQueryKey(refPetId)
 
   return {
     queryKey,
     queryFn: () => {
+      const petId = unref(refPetId)
       return client<TData, TError>({
         method: 'get',
         url: `/pet/${petId}`,
@@ -31,17 +34,17 @@ export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError =
  */
 
 export function useGetPetById<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
-  petId: GetPetByIdPathParams['petId'],
+  refPetId: MaybeRef<GetPetByIdPathParams['petId']>,
   options: {
     query?: UseQueryOptions<TData, TError>
     client?: Partial<Parameters<typeof client<TData, TError>>[0]>
   } = {},
 ): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const { query: queryOptions, client: clientOptions = {} } = options ?? {}
-  const queryKey = queryOptions?.queryKey ?? getPetByIdQueryKey(petId)
+  const queryKey = queryOptions?.queryKey ?? getPetByIdQueryKey(refPetId)
 
   const query = useQuery<TData, TError>({
-    ...getPetByIdQueryOptions<TData, TError>(petId, clientOptions),
+    ...getPetByIdQueryOptions<TData, TError>(refPetId, clientOptions),
     ...queryOptions,
   }) as UseQueryReturnType<TData, TError> & { queryKey: QueryKey }
 
diff --git a/examples/vue-query/src/gen/hooks/useGetUserByName.ts b/examples/vue-query/src/gen/hooks/useGetUserByName.ts
index d745a01e6..68a041364 100644
--- a/examples/vue-query/src/gen/hooks/useGetUserByName.ts
+++ b/examples/vue-query/src/gen/hooks/useGetUserByName.ts
@@ -1,19 +1,23 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { QueryKey, UseQueryReturnType, UseQueryOptions } from '@tanstack/vue-query'
 import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400 } from '../models/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: MaybeRef<GetUserByNamePathParams['username']>) =>
+  [{ url: `/user/${unref(username)}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
-  username: GetUserByNamePathParams['username'],
+  refUsername: MaybeRef<GetUserByNamePathParams['username']>,
   options: Partial<Parameters<typeof client>[0]> = {},
 ): UseQueryOptions<TData, TError> {
-  const queryKey = getUserByNameQueryKey(username)
+  const queryKey = getUserByNameQueryKey(refUsername)
 
   return {
     queryKey,
     queryFn: () => {
+      const username = unref(refUsername)
       return client<TData, TError>({
         method: 'get',
         url: `/user/${username}`,
@@ -30,17 +34,17 @@ export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TE
  */
 
 export function useGetUserByName<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
-  username: GetUserByNamePathParams['username'],
+  refUsername: MaybeRef<GetUserByNamePathParams['username']>,
   options: {
     query?: UseQueryOptions<TData, TError>
     client?: Partial<Parameters<typeof client<TData, TError>>[0]>
   } = {},
 ): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const { query: queryOptions, client: clientOptions = {} } = options ?? {}
-  const queryKey = queryOptions?.queryKey ?? getUserByNameQueryKey(username)
+  const queryKey = queryOptions?.queryKey ?? getUserByNameQueryKey(refUsername)
 
   const query = useQuery<TData, TError>({
-    ...getUserByNameQueryOptions<TData, TError>(username, clientOptions),
+    ...getUserByNameQueryOptions<TData, TError>(refUsername, clientOptions),
     ...queryOptions,
   }) as UseQueryReturnType<TData, TError> & { queryKey: QueryKey }
 
diff --git a/examples/vue-query/src/gen/hooks/useLoginUser.ts b/examples/vue-query/src/gen/hooks/useLoginUser.ts
index 652fbeecb..8dfad0a48 100644
--- a/examples/vue-query/src/gen/hooks/useLoginUser.ts
+++ b/examples/vue-query/src/gen/hooks/useLoginUser.ts
@@ -1,19 +1,22 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { QueryKey, UseQueryReturnType, UseQueryOptions } from '@tanstack/vue-query'
 import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../models/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: MaybeRef<LoginUserQueryParams>) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
-  params?: LoginUserQueryParams,
+  refParams?: MaybeRef<LoginUserQueryParams>,
   options: Partial<Parameters<typeof client>[0]> = {},
 ): UseQueryOptions<TData, TError> {
-  const queryKey = loginUserQueryKey(params)
+  const queryKey = loginUserQueryKey(refParams)
 
   return {
     queryKey,
     queryFn: () => {
+      const params = unref(refParams)
       return client<TData, TError>({
         method: 'get',
         url: `/user/login`,
@@ -31,17 +34,17 @@ export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = L
  */
 
 export function useLoginUser<TData = LoginUserQueryResponse, TError = LoginUser400>(
-  params?: LoginUserQueryParams,
+  refParams?: MaybeRef<LoginUserQueryParams>,
   options: {
     query?: UseQueryOptions<TData, TError>
     client?: Partial<Parameters<typeof client<TData, TError>>[0]>
   } = {},
 ): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const { query: queryOptions, client: clientOptions = {} } = options ?? {}
-  const queryKey = queryOptions?.queryKey ?? loginUserQueryKey(params)
+  const queryKey = queryOptions?.queryKey ?? loginUserQueryKey(refParams)
 
   const query = useQuery<TData, TError>({
-    ...loginUserQueryOptions<TData, TError>(params, clientOptions),
+    ...loginUserQueryOptions<TData, TError>(refParams, clientOptions),
     ...queryOptions,
   }) as UseQueryReturnType<TData, TError> & { queryKey: QueryKey }
 
diff --git a/examples/vue-query/src/gen/hooks/useLogoutUser.ts b/examples/vue-query/src/gen/hooks/useLogoutUser.ts
index 69a8d7fc8..a735ee6c1 100644
--- a/examples/vue-query/src/gen/hooks/useLogoutUser.ts
+++ b/examples/vue-query/src/gen/hooks/useLogoutUser.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
 import type { LogoutUserQueryResponse } from '../models/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
diff --git a/examples/vue-query/src/gen/hooks/useUpdatePetWithForm.ts b/examples/vue-query/src/gen/hooks/useUpdatePetWithForm.ts
index 447b61c93..83089b4ff 100644
--- a/examples/vue-query/src/gen/hooks/useUpdatePetWithForm.ts
+++ b/examples/vue-query/src/gen/hooks/useUpdatePetWithForm.ts
@@ -1,4 +1,6 @@
 import type { VueMutationObserverOptions } from '@tanstack/vue-query/build/lib/useMutation'
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { UseMutationReturnType } from '@tanstack/vue-query'
 import { useMutation } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
@@ -16,8 +18,8 @@ import type {
  */
 
 export function useUpdatePetWithForm<TData = UpdatePetWithFormMutationResponse, TError = UpdatePetWithForm405>(
-  petId: UpdatePetWithFormPathParams['petId'],
-  params?: UpdatePetWithFormQueryParams,
+  refPetId: MaybeRef<UpdatePetWithFormPathParams['petId']>,
+  refParams?: MaybeRef<UpdatePetWithFormQueryParams>,
   options: {
     mutation?: VueMutationObserverOptions<ResponseConfig<TData>, TError, void, unknown>
     client?: Partial<Parameters<typeof client<TData, TError, void>>[0]>
@@ -27,6 +29,8 @@ export function useUpdatePetWithForm<TData = UpdatePetWithFormMutationResponse,
 
   return useMutation<ResponseConfig<TData>, TError, void, unknown>({
     mutationFn: () => {
+      const petId = unref(refPetId)
+      const params = unref(refParams)
       return client<TData, TError, void>({
         method: 'post',
         url: `/pet/${petId}`,
diff --git a/examples/vue-query/src/gen/hooks/useUpdateUser.ts b/examples/vue-query/src/gen/hooks/useUpdateUser.ts
index 9e6cdd7d8..508c7c8aa 100644
--- a/examples/vue-query/src/gen/hooks/useUpdateUser.ts
+++ b/examples/vue-query/src/gen/hooks/useUpdateUser.ts
@@ -1,4 +1,6 @@
 import type { VueMutationObserverOptions } from '@tanstack/vue-query/build/lib/useMutation'
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { UseMutationReturnType } from '@tanstack/vue-query'
 import { useMutation } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
@@ -12,7 +14,7 @@ import type { UpdateUserMutationRequest, UpdateUserMutationResponse, UpdateUserP
  */
 
 export function useUpdateUser<TData = UpdateUserMutationResponse, TError = unknown, TVariables = UpdateUserMutationRequest>(
-  username: UpdateUserPathParams['username'],
+  refUsername: MaybeRef<UpdateUserPathParams['username']>,
   options: {
     mutation?: VueMutationObserverOptions<ResponseConfig<TData>, TError, TVariables, unknown>
     client?: Partial<Parameters<typeof client<TData, TError, TVariables>>[0]>
@@ -22,6 +24,7 @@ export function useUpdateUser<TData = UpdateUserMutationResponse, TError = unkno
 
   return useMutation<ResponseConfig<TData>, TError, TVariables, unknown>({
     mutationFn: (data) => {
+      const username = unref(refUsername)
       return client<TData, TError, TVariables>({
         method: 'put',
         url: `/user/${username}`,
diff --git a/examples/vue-query/src/gen/hooks/useUploadFile.ts b/examples/vue-query/src/gen/hooks/useUploadFile.ts
index 1f2701695..20b0e5dfb 100644
--- a/examples/vue-query/src/gen/hooks/useUploadFile.ts
+++ b/examples/vue-query/src/gen/hooks/useUploadFile.ts
@@ -1,4 +1,6 @@
 import type { VueMutationObserverOptions } from '@tanstack/vue-query/build/lib/useMutation'
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { UseMutationReturnType } from '@tanstack/vue-query'
 import { useMutation } from '@tanstack/vue-query'
 import client from '@kubb/swagger-client/client'
@@ -11,8 +13,8 @@ import type { UploadFileMutationRequest, UploadFileMutationResponse, UploadFileP
  */
 
 export function useUploadFile<TData = UploadFileMutationResponse, TError = unknown, TVariables = UploadFileMutationRequest>(
-  petId: UploadFilePathParams['petId'],
-  params?: UploadFileQueryParams,
+  refPetId: MaybeRef<UploadFilePathParams['petId']>,
+  refParams?: MaybeRef<UploadFileQueryParams>,
   options: {
     mutation?: VueMutationObserverOptions<ResponseConfig<TData>, TError, TVariables, unknown>
     client?: Partial<Parameters<typeof client<TData, TError, TVariables>>[0]>
@@ -22,6 +24,8 @@ export function useUploadFile<TData = UploadFileMutationResponse, TError = unkno
 
   return useMutation<ResponseConfig<TData>, TError, TVariables, unknown>({
     mutationFn: (data) => {
+      const petId = unref(refPetId)
+      const params = unref(refParams)
       return client<TData, TError, TVariables>({
         method: 'post',
         url: `/pet/${petId}/uploadImage`,
diff --git a/examples/vue-query/src/main.ts b/examples/vue-query/src/main.ts
new file mode 100644
index 000000000..a52c7ed6c
--- /dev/null
+++ b/examples/vue-query/src/main.ts
@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+import { worker } from './mocks/index.ts'
+
+const render = () => {
+  const app = createApp(App)
+  app.use(VueQueryPlugin)
+  app.mount('#root')
+}
+
+worker
+  .start({
+    serviceWorker: {
+      /**
+       * Use a custom Service Worker script URL to resolve
+       * the mock worker served by CodeSandbox.
+       * @note You DO NOT need this in your application.
+       * @see https://mswjs.io/docs/api/setup-worker/start#serviceworker
+       */
+      url: '/mockServiceWorker.js',
+    },
+  })
+  .then(() => render())
diff --git a/examples/vue-query/src/mocks/index.ts b/examples/vue-query/src/mocks/index.ts
new file mode 100644
index 000000000..6c7eeb6cd
--- /dev/null
+++ b/examples/vue-query/src/mocks/index.ts
@@ -0,0 +1,25 @@
+import { setupWorker, rest } from 'msw'
+
+export const worker = setupWorker(
+  rest.get('/pet/findByStatus', (req, res, ctx) => {
+    if (req.url.searchParams.get('status') === 'pending') {
+      return res(
+        ctx.json([
+          {
+            id: '1234',
+            name: 'Lily(pending)',
+          },
+        ]),
+      )
+    }
+
+    return res(
+      ctx.json([
+        {
+          id: '1234',
+          name: 'Lily',
+        },
+      ]),
+    )
+  }),
+)
diff --git a/examples/vue-query/tsconfig.json b/examples/vue-query/tsconfig.json
index 600a39d56..485239c69 100644
--- a/examples/vue-query/tsconfig.json
+++ b/examples/vue-query/tsconfig.json
@@ -5,7 +5,8 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "strictNullChecks": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
     "declaration": true,
     "outDir": "es",
     "experimentalDecorators": true,
@@ -61,11 +62,13 @@
       ],
       "@kubb/ts-codegen": [
         "../../packages/ts-codegen/src/index.ts"
-      ]
+      ],
     }
   },
   "include": [
-    "./src/**/*"
+    "./src/**/*",
+    "vite.config.ts",
+    "shims-vue.d.ts"
   ],
   "exclude": [
     "**/node_modules",
diff --git a/examples/vue-query/vite.config.ts b/examples/vue-query/vite.config.ts
new file mode 100644
index 000000000..2cd4cfb5e
--- /dev/null
+++ b/examples/vue-query/vite.config.ts
@@ -0,0 +1,10 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    include: ['axios'],
+  },
+})
diff --git a/package.json b/package.json
index a1081001f..d223bcec8 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,6 @@
     "bun-types": "^1.0.4",
     "prettier": "^3.0.3",
     "prettier-eslint": "^15.0.1",
-    "prettier-plugin-curly": "^0.1.3",
     "ts-node": "^10.9.1",
     "turbo": "^1.10.15",
     "typescript": "~5.2.2",
diff --git a/packages/cli/src/generate.ts b/packages/cli/src/generate.ts
index 4d81196d8..7c317cbc2 100644
--- a/packages/cli/src/generate.ts
+++ b/packages/cli/src/generate.ts
@@ -1,17 +1,16 @@
-import { build, ParallelPluginError, PluginError, SummaryError, timeout, LogLevel } from '@kubb/core'
-
-import type { ExecaReturnValue } from 'execa'
-import type { Writable } from 'node:stream'
+import { build, LogLevel, ParallelPluginError, PluginError, SummaryError, timeout } from '@kubb/core'
 
 import { execa } from 'execa'
 import pc from 'picocolors'
 import { parseArgsStringToArgv } from 'string-argv'
 
-import type { CLIOptions, KubbConfig } from '@kubb/core'
+import { getSummary } from './utils/getSummary.ts'
 import { OraWritable } from './utils/OraWritable.ts'
 import { spinner } from './utils/spinner.ts'
-import { getSummary } from './utils/getSummary.ts'
-import type { Logger } from '@kubb/core'
+
+import type { CLIOptions, KubbConfig, Logger } from '@kubb/core'
+import type { ExecaReturnValue } from 'execa'
+import type { Writable } from 'node:stream'
 
 type GenerateProps = {
   input?: string
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index e64bb0f32..d14e0aa2d 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -1,16 +1,16 @@
 import pathParser from 'node:path'
 
+import { createLogger, LogLevel, SummaryError, Warning } from '@kubb/core'
+
 import cac from 'cac'
 import pc from 'picocolors'
 
 import { version } from '../package.json'
-import init from './init.ts'
 import generate from './generate.ts'
+import init from './init.ts'
 import { getConfig, getCosmiConfig, renderErrors, spinner, startWatcher } from './utils/index.ts'
 
-import { LogLevel, SummaryError, createLogger } from '@kubb/core'
 import type { CLIOptions } from '@kubb/core'
-import { Warning } from '@kubb/core'
 
 const moduleName = 'kubb'
 const logger = createLogger(spinner)
diff --git a/packages/cli/src/init.ts b/packages/cli/src/init.ts
index aa950ba7d..176b8ea1f 100644
--- a/packages/cli/src/init.ts
+++ b/packages/cli/src/init.ts
@@ -1,6 +1,6 @@
 import pathParser from 'node:path'
 
-import { LogLevel, isPromiseFulfilledResult, write } from '@kubb/core'
+import { isPromiseFulfilledResult, LogLevel, write } from '@kubb/core'
 
 import { $ } from 'execa'
 import pc from 'picocolors'
diff --git a/packages/cli/src/utils/OraWritable.ts b/packages/cli/src/utils/OraWritable.ts
index 6b0e6707e..c95949eda 100644
--- a/packages/cli/src/utils/OraWritable.ts
+++ b/packages/cli/src/utils/OraWritable.ts
@@ -3,11 +3,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import type { WritableOptions } from 'node:stream'
 import { Writable } from 'node:stream'
-import type { Ora } from 'ora'
+
 import pc from 'picocolors'
 
+import type { WritableOptions } from 'node:stream'
+import type { Ora } from 'ora'
+
 export class OraWritable extends Writable {
   public command: string
   public spinner: Ora
diff --git a/packages/cli/src/utils/getSummary.ts b/packages/cli/src/utils/getSummary.ts
index 53cd8d161..7b0a47b74 100644
--- a/packages/cli/src/utils/getSummary.ts
+++ b/packages/cli/src/utils/getSummary.ts
@@ -1,9 +1,13 @@
 import pathParser from 'node:path'
-import type { BuildOutput, KubbConfig } from '@kubb/core'
-import { randomPicoColour, LogLevel } from '@kubb/core'
+
+import { LogLevel, randomPicoColour } from '@kubb/core'
+
 import pc from 'picocolors'
+
 import { parseHrtimeToSeconds } from './parseHrtimeToSeconds.ts'
 
+import type { BuildOutput, KubbConfig } from '@kubb/core'
+
 type SummaryProps = {
   pluginManager: BuildOutput['pluginManager']
   status: 'success' | 'failed'
diff --git a/packages/cli/src/utils/renderErrors.ts b/packages/cli/src/utils/renderErrors.ts
index da021ac96..6f66cddae 100644
--- a/packages/cli/src/utils/renderErrors.ts
+++ b/packages/cli/src/utils/renderErrors.ts
@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
-import { LogLevel } from '@kubb/core'
-import { ParallelPluginError } from '@kubb/core'
+import { LogLevel, ParallelPluginError } from '@kubb/core'
+
 import PrettyError from 'pretty-error'
 
 export const prettyError = new PrettyError()
diff --git a/packages/cli/src/utils/spinner.ts b/packages/cli/src/utils/spinner.ts
index 7815e6af5..bac528bb1 100644
--- a/packages/cli/src/utils/spinner.ts
+++ b/packages/cli/src/utils/spinner.ts
@@ -1,4 +1,5 @@
 import ora from 'ora'
+
 export const spinner = ora({
   spinner: 'clock',
 })
diff --git a/packages/config/eslint-config/src/flat.ts b/packages/config/eslint-config/src/flat.ts
index 8e34c5d7e..ad23a5d9e 100644
--- a/packages/config/eslint-config/src/flat.ts
+++ b/packages/config/eslint-config/src/flat.ts
@@ -38,10 +38,10 @@ import vitestGlobalsPlugin from 'eslint-plugin-vitest-globals'
  */
 import globals from 'globals'
 
+import { ignores } from './ignores'
 import { rules } from './rules'
 
 import type { Linter } from 'eslint'
-import { ignores } from './ignores'
 
 /**
  * Recommended plugins CJS
diff --git a/packages/config/eslint-config/src/index.ts b/packages/config/eslint-config/src/index.ts
index fdd0468b3..807b77133 100644
--- a/packages/config/eslint-config/src/index.ts
+++ b/packages/config/eslint-config/src/index.ts
@@ -1,9 +1,9 @@
 import globals from 'globals'
 
+import { ignores } from './ignores'
 import { rules } from './rules'
 
 import type { Linter } from 'eslint'
-import { ignores } from './ignores'
 
 const config: Linter.Config = {
   root: true,
diff --git a/packages/core/src/build.test.ts b/packages/core/src/build.test.ts
index 24dcd5480..f0388dff2 100644
--- a/packages/core/src/build.test.ts
+++ b/packages/core/src/build.test.ts
@@ -1,8 +1,8 @@
 import { build } from './build'
-import type { KubbConfig } from './types'
 import { createPlugin } from './plugin'
 
 import type { File } from './managers/fileManager/types'
+import type { KubbConfig } from './types'
 
 describe('build', () => {
   const pluginMocks = {
diff --git a/packages/core/src/build.ts b/packages/core/src/build.ts
index 60c86207e..dc9ea821d 100644
--- a/packages/core/src/build.ts
+++ b/packages/core/src/build.ts
@@ -1,13 +1,14 @@
+import pc from 'picocolors'
+
 import { createFileSource } from './managers/fileManager/index.ts'
 import { PluginManager } from './managers/pluginManager/index.ts'
-import { clean, createLogger, URLPath, randomPicoColour, read } from './utils/index.ts'
+import { LogLevel } from './types.ts'
+import { clean, createLogger, randomPicoColour, read, URLPath } from './utils/index.ts'
 import { isPromise } from './utils/isPromise.ts'
-import pc from 'picocolors'
 
 import type { File, ResolvedFile } from './managers/fileManager/index.ts'
-import { LogLevel } from './types.ts'
 import type { BuildOutput, KubbPlugin, PluginContext, TransformResult } from './types.ts'
-import type { QueueJob, Logger } from './utils/index.ts'
+import type { Logger, QueueJob } from './utils/index.ts'
 
 type BuildOptions = {
   config: PluginContext['config']
diff --git a/packages/core/src/managers/fileManager/FileManager.ts b/packages/core/src/managers/fileManager/FileManager.ts
index 5d9aa24ef..17d598996 100644
--- a/packages/core/src/managers/fileManager/FileManager.ts
+++ b/packages/core/src/managers/fileManager/FileManager.ts
@@ -1,12 +1,12 @@
 import crypto from 'node:crypto'
 
 import { read, write } from '../../utils/index.ts'
-import type { Extension } from './utils.ts'
 import { extensions } from './utils.ts'
 
-import type { Queue, QueueJob } from '../../utils/index.ts'
-import type { File, ResolvedFile, CacheItem, UUID } from './types.ts'
 import type { Path } from '../../types.ts'
+import type { Queue, QueueJob } from '../../utils/index.ts'
+import type { CacheItem, File, ResolvedFile, UUID } from './types.ts'
+import type { Extension } from './utils.ts'
 
 export class FileManager {
   private cache: Map<Path, CacheItem[]> = new Map()
diff --git a/packages/core/src/managers/fileManager/utils.ts b/packages/core/src/managers/fileManager/utils.ts
index 70494b982..80918243d 100644
--- a/packages/core/src/managers/fileManager/utils.ts
+++ b/packages/core/src/managers/fileManager/utils.ts
@@ -2,12 +2,13 @@ import pathParser from 'node:path'
 
 import { createExportDeclaration, createImportDeclaration, print } from '@kubb/ts-codegen'
 
+import isEqual from 'lodash.isequal'
+
 import { TreeNode } from '../../utils/index.ts'
 
 import type { Path } from '../../types.ts'
 import type { PathMode, TreeNodeOptions } from '../../utils/index.ts'
-import type { Import, Export, File } from './types.ts'
-import isEqual from 'lodash.isequal'
+import type { Export, File, Import } from './types.ts'
 
 type TreeNodeData = { type: PathMode; path: Path; name: string }
 
diff --git a/packages/core/src/managers/pluginManager/ParallelPluginError.test.ts b/packages/core/src/managers/pluginManager/ParallelPluginError.test.ts
index 440c2f532..07154b01b 100644
--- a/packages/core/src/managers/pluginManager/ParallelPluginError.test.ts
+++ b/packages/core/src/managers/pluginManager/ParallelPluginError.test.ts
@@ -1,8 +1,8 @@
+import { createLogger } from '../../utils/logger.ts'
 import { ParallelPluginError } from './ParallelPluginError.ts'
 import { PluginManager } from './PluginManager.ts'
 
 import type { KubbConfig } from '../../types.ts'
-import { createLogger } from '../../utils/logger.ts'
 
 describe('ParallelPluginError', () => {
   const config: KubbConfig = {
diff --git a/packages/core/src/managers/pluginManager/PluginError.test.ts b/packages/core/src/managers/pluginManager/PluginError.test.ts
index dd5c8d2df..6babf6b14 100644
--- a/packages/core/src/managers/pluginManager/PluginError.test.ts
+++ b/packages/core/src/managers/pluginManager/PluginError.test.ts
@@ -1,8 +1,8 @@
+import { createLogger } from '../../utils/logger.ts'
 import { PluginError } from './PluginError.ts'
 import { PluginManager } from './PluginManager.ts'
 
 import type { KubbConfig } from '../../types.ts'
-import { createLogger } from '../../utils/logger.ts'
 
 describe('PluginError', () => {
   const config: KubbConfig = {
diff --git a/packages/core/src/managers/pluginManager/PluginManager.test.ts b/packages/core/src/managers/pluginManager/PluginManager.test.ts
index 418ef0f7e..ab5231edd 100644
--- a/packages/core/src/managers/pluginManager/PluginManager.test.ts
+++ b/packages/core/src/managers/pluginManager/PluginManager.test.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { createPlugin } from '../../plugin.ts'
+import { createLogger } from '../../utils/logger.ts'
 import { hooks, PluginManager } from './PluginManager.ts'
 
 import type { KubbConfig, TransformResult } from '../../types.ts'
-import { createLogger } from '../../utils/logger.ts'
 
 describe('PluginManager', () => {
   const pluginAMocks = {
diff --git a/packages/core/src/managers/pluginManager/PluginManager.ts b/packages/core/src/managers/pluginManager/PluginManager.ts
index 4f2aed529..b5f98465f 100644
--- a/packages/core/src/managers/pluginManager/PluginManager.ts
+++ b/packages/core/src/managers/pluginManager/PluginManager.ts
@@ -1,31 +1,30 @@
 /* eslint-disable @typescript-eslint/ban-types, @typescript-eslint/no-unsafe-argument */
 
 import { definePlugin } from '../../plugin.ts'
+import { EventEmitter } from '../../utils/EventEmitter.ts'
 import { isPromise, isPromiseRejectedResult } from '../../utils/isPromise.ts'
 import { Queue } from '../../utils/Queue.ts'
 import { FileManager } from '../fileManager/FileManager.ts'
 import { ParallelPluginError } from './ParallelPluginError.ts'
 import { PluginError } from './PluginError.ts'
-
-import { EventEmitter } from '../../utils/EventEmitter.ts'
+import { pluginParser } from './pluginParser.ts'
 
 import type { CorePluginOptions } from '../../plugin.ts'
 import type {
   KubbConfig,
   KubbPlugin,
-  PossiblePromise,
+  OptionalPath,
   PluginContext,
   PluginLifecycle,
   PluginLifecycleHooks,
+  PossiblePromise,
   ResolveNameParams,
   ResolvePathParams,
-  OptionalPath,
 } from '../../types.ts'
-import type { QueueJob } from '../../utils/Queue.ts'
-import type { Argument0, Executer, ParseResult, SafeParseResult, Strategy } from './types.ts'
 import type { Logger } from '../../utils/logger.ts'
+import type { QueueJob } from '../../utils/Queue.ts'
 import type { ResolvedFile } from '../fileManager/types.ts'
-import { pluginParser } from './pluginParser.ts'
+import type { Argument0, Executer, ParseResult, SafeParseResult, Strategy } from './types.ts'
 
 // inspired by: https://github.com/rollup/rollup/blob/master/src/utils/PluginDriver.ts#
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 393ae774e..b0a9acd44 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,7 +1,7 @@
-import type { Logger } from './utils/logger.ts'
 import type { File, FileManager } from './managers/fileManager/index.ts'
 import type { PluginManager } from './managers/index.ts'
 import type { Cache } from './utils/cache.ts'
+import type { Logger } from './utils/logger.ts'
 
 /**
  * @deprecated
diff --git a/packages/core/src/utils/EventEmitter.ts b/packages/core/src/utils/EventEmitter.ts
index 06df1fdd7..5f2759845 100644
--- a/packages/core/src/utils/EventEmitter.ts
+++ b/packages/core/src/utils/EventEmitter.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { EventEmitter as NodeEventEmitter } from 'node:events'
+
 export class EventEmitter<TEvents extends Record<string, any>> {
   private emitter = new NodeEventEmitter()
 
diff --git a/packages/core/src/utils/URLPath.test.ts b/packages/core/src/utils/URLPath.test.ts
index a82316a4d..0e1dd923a 100644
--- a/packages/core/src/utils/URLPath.test.ts
+++ b/packages/core/src/utils/URLPath.test.ts
@@ -2,12 +2,37 @@ import { URLPath } from './URLPath.ts'
 
 describe('URLPath', () => {
   const path = new URLPath('/user/{userID}/monetary-account/{monetary-accountID}/whitelist-sdd/{itemId}')
+  const simplePath = new URLPath('/user/{userID}')
   test('if templateStrings returns correct format', () => {
     expect(path.template).toBe('`/user/${userId}/monetary-account/${monetaryAccountId}/whitelist-sdd/${itemId}`')
     expect('/pet/findByStatus').toBe('/pet/findByStatus')
   })
 
+  test('if templateStrings returns correct format with replacer', () => {
+    expect(simplePath.toTemplateString((item) => `unref(${item})`)).toBe('`/user/${unref(userId)}`')
+    expect(simplePath.template).toBe('`/user/${userId}`')
+    expect(URLPath.toTemplateString(simplePath.path)).toBe('`/user/${userId}`')
+  })
+
   test('if URL path returns the correct format', () => {
     expect(path.URL).toBe('/user/:userID/monetary-account/:monetary-accountID/whitelist-sdd/:itemId')
   })
+
+  test('if params is getting returned', () => {
+    expect(simplePath.params).toStrictEqual({ userId: 'userId' })
+    expect(simplePath.getParams()).toStrictEqual({ userId: 'userId' })
+    expect(URLPath.getParams(simplePath.path)).toStrictEqual({ userId: 'userId' })
+  })
+  test('if object is getting returned', () => {
+    expect(simplePath.object).toStrictEqual({ url: '/user/:userID', params: { userId: 'userId' } })
+    expect(simplePath.toObject()).toStrictEqual({ url: '/user/:userID', params: { userId: 'userId' } })
+    expect(simplePath.toObject({ type: 'template' })).toStrictEqual({ url: '`/user/${userId}`', params: { userId: 'userId' } })
+    // const userId = 2
+    expect(simplePath.toObject({ type: 'template', stringify: true })).toStrictEqual('{url:`/user/${userId}`,params:{userId:userId}}')
+
+    expect(URLPath.toObject(simplePath.path)).toStrictEqual({ url: '/user/:userID', params: { userId: 'userId' } })
+
+    expect(URLPath.toObject('/test')).toStrictEqual({ url: '/test', params: undefined })
+    expect(URLPath.toObject('/test', { type: 'template', stringify: true })).toStrictEqual('{url:`/test`}')
+  })
 })
diff --git a/packages/core/src/utils/URLPath.ts b/packages/core/src/utils/URLPath.ts
index 20e39d0ea..57dbd2a07 100644
--- a/packages/core/src/utils/URLPath.ts
+++ b/packages/core/src/utils/URLPath.ts
@@ -1,5 +1,16 @@
 import { camelCase, camelCaseTransformMerge } from 'change-case'
 
+type URLObject = {
+  url: string
+  params?: Record<string, string>
+}
+
+type ObjectOptions = {
+  type?: 'path' | 'template'
+  replacer?: (pathParam: string) => string
+  stringify?: boolean
+}
+
 export class URLPath {
   path: string
 
@@ -28,14 +39,25 @@ export class URLPath {
     return this.toTemplateString()
   }
 
+  get object(): URLObject | string {
+    return this.toObject()
+  }
+  get params(): Record<string, string> | undefined {
+    return this.getParams()
+  }
+
+  toObject(options: ObjectOptions = {}): URLObject | string {
+    return URLPath.toObject(this.path, options)
+  }
+
   /**
    * Convert Swagger path to template literals/ template strings(camelcase)
    * @example /pet/{petId} => `/pet/${petId}`
    * @example /account/monetary-accountID => `/account/${monetaryAccountId}`
    * @example /account/userID => `/account/${userId}`
    */
-  toTemplateString(): string {
-    return URLPath.toTemplateString(this.path)
+  toTemplateString(replacer?: (pathParam: string) => string): string {
+    return URLPath.toTemplateString(this.path, replacer)
   }
   /**
    * Convert Swagger path to template literals/ template strings(camelcase)
@@ -43,14 +65,17 @@ export class URLPath {
    * @example /account/monetary-accountID => `/account/${monetaryAccountId}`
    * @example /account/userID => `/account/${userId}`
    */
-  static toTemplateString(path: string): string {
+  static toTemplateString(path: string, replacer?: (pathParam: string) => string): string {
     const regex = /{(\w|-)*}/g
     const found = path.match(regex)
     let newPath = path.replaceAll('{', '${')
 
     if (found) {
       newPath = found.reduce((prev, curr) => {
-        const replacement = `\${${camelCase(curr, { delimiter: '', transform: camelCaseTransformMerge })}}`
+        const pathParam = replacer
+          ? replacer(camelCase(curr, { delimiter: '', transform: camelCaseTransformMerge }))
+          : camelCase(curr, { delimiter: '', transform: camelCaseTransformMerge })
+        const replacement = `\${${pathParam}}`
 
         return prev.replace(curr, replacement)
       }, path)
@@ -59,6 +84,32 @@ export class URLPath {
     return `\`${newPath}\``
   }
 
+  getParams(replacer?: (pathParam: string) => string): Record<string, string> | undefined {
+    return URLPath.getParams(this.path, replacer)
+  }
+
+  static getParams(path: string, replacer?: (pathParam: string) => string): Record<string, string> | undefined {
+    const regex = /{(\w|-)*}/g
+    const found = path.match(regex)
+
+    if (!found) {
+      return undefined
+    }
+
+    const params: Record<string, string> = {}
+    found.forEach((item) => {
+      item = item.replaceAll('{', '').replaceAll('}', '')
+
+      const pathParam = replacer
+        ? replacer(camelCase(item, { delimiter: '', transform: camelCaseTransformMerge }))
+        : camelCase(item, { delimiter: '', transform: camelCaseTransformMerge })
+
+      params[pathParam] = pathParam
+    }, path)
+
+    return params
+  }
+
   /**
    * Convert Swagger path to URLPath(syntax of Express)
    * @example /pet/{petId} => /pet/:petId
@@ -71,6 +122,22 @@ export class URLPath {
     return path.replaceAll('{', ':').replaceAll('}', '')
   }
 
+  static toObject(path: string, { type = 'path', replacer, stringify }: ObjectOptions = {}): URLObject | string {
+    const object = {
+      url: type === 'path' ? URLPath.toURLPath(path) : URLPath.toTemplateString(path, replacer),
+      params: URLPath.getParams(path),
+    }
+
+    if (stringify) {
+      if (type !== 'template') {
+        throw new Error('Type should be `template` when using stringiyf')
+      }
+      return JSON.stringify(object).replaceAll("'", '').replaceAll(`"`, '')
+    }
+
+    return object
+  }
+
   static isURL(path: string): boolean {
     try {
       const url = new URL(path)
diff --git a/packages/core/src/utils/importModule.test.ts b/packages/core/src/utils/importModule.test.ts
index 290c50e83..bcbcb61ee 100644
--- a/packages/core/src/utils/importModule.test.ts
+++ b/packages/core/src/utils/importModule.test.ts
@@ -1,6 +1,7 @@
-import { importModule, normalizeDirectory } from './importModule.ts'
 import path from 'node:path'
 
+import { importModule, normalizeDirectory } from './importModule.ts'
+
 describe('importModule', () => {
   test('normalizeDirectory', () => {
     expect(normalizeDirectory('/user/nzakas/foo')).toBe('/user/nzakas/foo/')
diff --git a/packages/core/src/utils/importModule.ts b/packages/core/src/utils/importModule.ts
index 947e65a49..4792fa4d6 100644
--- a/packages/core/src/utils/importModule.ts
+++ b/packages/core/src/utils/importModule.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import mod from 'node:module'
-import { pathToFileURL } from 'node:url'
 import os from 'node:os'
+import { pathToFileURL } from 'node:url'
 
 const SLASHES = new Set(['/', '\\'])
 
diff --git a/packages/core/src/utils/logger.ts b/packages/core/src/utils/logger.ts
index 13dba8b95..bfd4a81bc 100644
--- a/packages/core/src/utils/logger.ts
+++ b/packages/core/src/utils/logger.ts
@@ -1,6 +1,7 @@
-import type { Ora } from 'ora'
 import pc from 'picocolors'
 
+import type { Ora } from 'ora'
+
 export type LogType = 'error' | 'info' | 'warning'
 
 export type Logger = {
diff --git a/packages/core/src/utils/randomColour.ts b/packages/core/src/utils/randomColour.ts
index c1c7a99b4..b8f5e7c03 100644
--- a/packages/core/src/utils/randomColour.ts
+++ b/packages/core/src/utils/randomColour.ts
@@ -1,5 +1,6 @@
-import seedrandom from 'seedrandom'
 import pc from 'picocolors'
+import seedrandom from 'seedrandom'
+
 import type { Formatter } from 'picocolors/types'
 
 export const defaultColours = ['black', 'blue', 'darkBlue', 'cyan', 'gray', 'green', 'darkGreen', 'magenta', 'red', 'darkRed', 'yellow', 'darkYellow'] as const
diff --git a/packages/core/src/utils/read.ts b/packages/core/src/utils/read.ts
index eb34d9973..b7dde7144 100644
--- a/packages/core/src/utils/read.ts
+++ b/packages/core/src/utils/read.ts
@@ -1,6 +1,6 @@
 import pathParser from 'node:path'
-import fs from 'fs-extra'
 
+import fs from 'fs-extra'
 import { switcher } from 'js-runtime'
 
 function slash(path: string, platform: 'windows' | 'mac' | 'linux' = 'linux') {
diff --git a/packages/core/src/utils/write.ts b/packages/core/src/utils/write.ts
index 3209884c4..f931c4ebe 100644
--- a/packages/core/src/utils/write.ts
+++ b/packages/core/src/utils/write.ts
@@ -1,5 +1,6 @@
-import fs from 'fs-extra'
 import pathParser from 'node:path'
+
+import fs from 'fs-extra'
 import { switcher } from 'js-runtime'
 
 async function saveCreateDirectory(path: string): Promise<void> {
diff --git a/packages/react-template/package.json b/packages/react-template/package.json
index 7b9fd7647..ef38085f9 100644
--- a/packages/react-template/package.json
+++ b/packages/react-template/package.json
@@ -62,9 +62,9 @@
   },
   "devDependencies": {
     "@kubb/eslint-config": "workspace:*",
+    "@kubb/ts-codegen": "workspace:*",
     "@kubb/ts-config": "workspace:*",
     "@kubb/tsup-config": "workspace:*",
-    "@kubb/ts-codegen": "workspace:*",
     "@types/react": ">=18.2.25",
     "@types/react-reconciler": "^0.28.5",
     "eslint": "^8.51.0",
diff --git a/packages/react-template/src/ReactTemplate.tsx b/packages/react-template/src/ReactTemplate.tsx
index af27331aa..9c647cc6d 100644
--- a/packages/react-template/src/ReactTemplate.tsx
+++ b/packages/react-template/src/ReactTemplate.tsx
@@ -1,26 +1,26 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import process from 'node:process'
 import React from 'react'
-import type { ReactNode } from 'react'
-import type { Export, Import } from '@kubb/core'
+import process from 'node:process'
+
 import { throttle } from '@kubb/core'
+
 import autoBind from 'auto-bind'
-import type { FiberRoot } from 'react-reconciler'
+
+import { App } from './components/App.tsx'
+import * as dom from './dom.ts'
+import { instances } from './instances.ts'
 import { reconciler } from './reconciler.ts'
 import { renderer } from './renderer.ts'
-import * as dom from './dom.js'
-import { instances } from './instances.ts'
-import { App } from './components/App.tsx'
+
+import type { Export, Import } from '@kubb/core'
+import type { ReactNode } from 'react'
+import type { FiberRoot } from 'react-reconciler'
 
 const noop = () => {}
 
 export type ReactTemplateOptions = {
-  stdout: NodeJS.WriteStream
-  stdin: NodeJS.ReadStream
-  stderr: NodeJS.WriteStream
+  id: string
   debug: boolean
-  exitOnCtrlC: boolean
-  waitUntilExit?: () => Promise<void>
 }
 
 export class ReactTemplate {
@@ -32,12 +32,6 @@ export class ReactTemplate {
   private lastExports: Export[] = []
   private readonly container: FiberRoot
   private readonly rootNode: dom.DOMElement
-  // This variable is used only in debug mode to store full static output
-  // so that it's rerendered every time, not just new static parts, like in non-debug mode
-  private fullStaticOutput: string
-  private exitPromise?: Promise<void>
-  private restoreConsole?: () => void
-  private readonly unsubscribeResize?: () => void
 
   constructor(options: ReactTemplateOptions) {
     autoBind(this)
@@ -55,10 +49,6 @@ export class ReactTemplate {
     // Store last output to only rerender when needed
     this.lastOutput = ''
 
-    // This variable is used only in debug mode to store full static output
-    // so that it's rerendered every time, not just new static parts, like in non-debug mode
-    this.fullStaticOutput = ''
-
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     this.container = reconciler.createContainer(
       this.rootNode,
@@ -78,10 +68,10 @@ export class ReactTemplate {
     if (process.env['DEV'] === 'true') {
       reconciler.injectIntoDevTools({
         bundleType: 0,
-        // Reporting React DOM's version, not Ink's
+        // Reporting React DOM's version, not Kubb's
         // See https://github.com/facebook/react/issues/16666#issuecomment-532639905
         version: '16.13.1',
-        rendererPackageName: 'ink',
+        rendererPackageName: '@kubb/react-template',
       })
     }
   }
@@ -96,7 +86,7 @@ export class ReactTemplate {
     return this.lastExports
   }
 
-  resized = () => {
+  resized = (): void => {
     this.onRender()
   }
 
@@ -111,11 +101,6 @@ export class ReactTemplate {
 
     const { output, imports, exports } = renderer(this.rootNode)
 
-    if (this.options.debug) {
-      this.options.stdout.write(this.fullStaticOutput + output)
-      return
-    }
-
     this.lastOutput = output
     this.lastImports = imports
     this.lastExports = exports
@@ -127,33 +112,6 @@ export class ReactTemplate {
     reconciler.updateContainer(tree, this.container, null, noop)
   }
 
-  writeToStdout(data: string): void {
-    if (this.isUnmounted) {
-      return
-    }
-
-    if (this.options.debug) {
-      this.options.stdout.write(data + this.fullStaticOutput + this.lastOutput)
-      return
-    }
-
-    this.options.stdout.write(data)
-  }
-
-  writeToStderr(data: string): void {
-    if (this.isUnmounted) {
-      return
-    }
-
-    if (this.options.debug) {
-      this.options.stderr.write(data)
-      this.options.stdout.write(this.fullStaticOutput + this.lastOutput)
-      return
-    }
-
-    this.options.stderr.write(data)
-  }
-
   unmount(error?: Error | number | null): void {
     if (this.isUnmounted) {
       return
@@ -162,18 +120,10 @@ export class ReactTemplate {
     this.onRender()
     this.unsubscribeExit()
 
-    if (typeof this.restoreConsole === 'function') {
-      this.restoreConsole()
-    }
-
-    if (typeof this.unsubscribeResize === 'function') {
-      this.unsubscribeResize()
-    }
-
     this.isUnmounted = true
 
     reconciler.updateContainer(null, this.container, null, noop)
-    instances.delete(this.options.stdout)
+    instances.delete(this.options.id)
 
     if (error instanceof Error) {
       this.rejectExitPromise(error)
@@ -182,16 +132,5 @@ export class ReactTemplate {
     }
   }
 
-  async waitUntilExit(): Promise<void> {
-    if (!this.exitPromise) {
-      this.exitPromise = new Promise((resolve, reject) => {
-        this.resolveExitPromise = resolve
-        this.rejectExitPromise = reject
-      })
-    }
-
-    return this.exitPromise
-  }
-
   clear(): void {}
 }
diff --git a/packages/react-template/src/components/App.tsx b/packages/react-template/src/components/App.tsx
index d4aca8420..81c8a5015 100644
--- a/packages/react-template/src/components/App.tsx
+++ b/packages/react-template/src/components/App.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import React from 'react'
+
 import type { ReactNode } from 'react'
 
 type Props = {
diff --git a/packages/react-template/src/components/Export.tsx b/packages/react-template/src/components/Export.tsx
index 7f1e528d4..0b1cfcf80 100644
--- a/packages/react-template/src/components/Export.tsx
+++ b/packages/react-template/src/components/Export.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import type { Export as ExportFileType } from '@kubb/core'
 
 type Props = ExportFileType & {
diff --git a/packages/react-template/src/components/Function.tsx b/packages/react-template/src/components/Function.tsx
index a4ad08a53..c43ad3e8a 100644
--- a/packages/react-template/src/components/Function.tsx
+++ b/packages/react-template/src/components/Function.tsx
@@ -1,8 +1,11 @@
 import React from 'react'
-import type { ReactNode } from 'react'
-import { Text } from './Text.tsx'
+
 import { createJSDocBlockText } from '@kubb/core'
 
+import { Text } from './Text.tsx'
+
+import type { ReactNode } from 'react'
+
 type Props = {
   name: string
   export?: boolean
diff --git a/packages/react-template/src/components/Import.tsx b/packages/react-template/src/components/Import.tsx
index b334e2bdd..a23708ca0 100644
--- a/packages/react-template/src/components/Import.tsx
+++ b/packages/react-template/src/components/Import.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import type { Import as ImportFileType } from '@kubb/core'
 
 type Props = ImportFileType & {
diff --git a/packages/react-template/src/components/Text.tsx b/packages/react-template/src/components/Text.tsx
index 69121156c..fd4b0fc2f 100644
--- a/packages/react-template/src/components/Text.tsx
+++ b/packages/react-template/src/components/Text.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import type { ReactNode } from 'react'
 
 type Props = {
diff --git a/packages/react-template/src/instances.ts b/packages/react-template/src/instances.ts
index 8c9fcd138..51126f34e 100644
--- a/packages/react-template/src/instances.ts
+++ b/packages/react-template/src/instances.ts
@@ -1,3 +1,3 @@
 import type { ReactTemplate } from './ReactTemplate.ts'
 
-export const instances = new WeakMap<NodeJS.WriteStream, ReactTemplate>()
+export const instances = new Map<string, ReactTemplate>()
diff --git a/packages/react-template/src/reconciler.ts b/packages/react-template/src/reconciler.ts
index 5a2cb65e4..195f188f8 100644
--- a/packages/react-template/src/reconciler.ts
+++ b/packages/react-template/src/reconciler.ts
@@ -3,8 +3,9 @@
 import createReconciler from 'react-reconciler'
 import { DefaultEventPriority } from 'react-reconciler/constants.js'
 
-import { createTextNode, appendChildNode, insertBeforeNode, removeChildNode, setTextNodeValue, createNode, setAttribute } from './dom.js'
-import type { DOMNodeAttribute, TextNode, DOMElement } from './dom.ts'
+import { appendChildNode, createNode, createTextNode, insertBeforeNode, removeChildNode, setAttribute, setTextNodeValue } from './dom.ts'
+
+import type { DOMElement, DOMNodeAttribute, TextNode } from './dom.ts'
 import type { ElementNames } from './types.ts'
 
 type AnyObject = Record<string, unknown>
@@ -105,7 +106,7 @@ export const reconciler = createReconciler<
     return { isInsideText }
   },
   shouldSetTextContent: () => false,
-  createInstance(originalType, newProps, _root, hostContext) {
+  createInstance(originalType, newProps, _root) {
     const node = createNode(originalType)
 
     for (const [key, value] of Object.entries(newProps)) {
diff --git a/packages/react-template/src/render.ts b/packages/react-template/src/render.ts
index 53c124b73..b66ff74aa 100644
--- a/packages/react-template/src/render.ts
+++ b/packages/react-template/src/render.ts
@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import process from 'node:process'
-import type { ReactNode } from 'react'
-import type { ReactTemplateOptions } from './ReactTemplate.ts'
-import { ReactTemplate } from './ReactTemplate.tsx'
+import crypto from 'node:crypto'
+
 import { instances } from './instances.ts'
+import { ReactTemplate } from './ReactTemplate.tsx'
+
 import type { Export, Import } from '@kubb/core'
+import type { ReactNode } from 'react'
+import type { ReactTemplateOptions } from './ReactTemplate.ts'
 
 export type RenderOptions = {
   /**
@@ -21,13 +23,9 @@ export type Instance = {
    */
   rerender: ReactTemplate['render']
   /**
-   * Manually unmount the whole Ink app.
+   * Manually unmount the whole Kubb app.
    */
   unmount: ReactTemplate['unmount']
-  /**
-   * Returns a promise, which resolves when app is unmounted.
-   */
-  waitUntilExit: ReactTemplate['waitUntilExit']
   cleanup: () => void
 
   /**
@@ -44,16 +42,13 @@ export type Instance = {
  */
 export function render(node: ReactNode | JSX.Element, options: RenderOptions = {}): Instance {
   const reactTemplateOptions: ReactTemplateOptions = {
-    stdout: process.stdout,
-    stdin: process.stdin,
-    stderr: process.stderr,
     debug: false,
-    exitOnCtrlC: true,
+    id: crypto.randomUUID(),
     ...options,
   }
 
   const instance = new ReactTemplate(reactTemplateOptions)
-  instances.set(reactTemplateOptions.stdout, instance)
+  instances.set(reactTemplateOptions.id, instance)
 
   instance.render(node)
 
@@ -65,19 +60,7 @@ export function render(node: ReactNode | JSX.Element, options: RenderOptions = {
     unmount() {
       instance.unmount()
     },
-    waitUntilExit: instance.waitUntilExit,
-    cleanup: () => instances.delete(reactTemplateOptions.stdout),
+    cleanup: () => instances.delete(reactTemplateOptions.id),
     clear: instance.clear,
   }
 }
-
-const getInstance = (stdout: NodeJS.WriteStream, createInstance: () => ReactTemplate): ReactTemplate => {
-  let instance = instances.get(stdout)
-
-  if (!instance) {
-    instance = createInstance()
-    instances.set(stdout, instance)
-  }
-
-  return instance
-}
diff --git a/packages/react-template/src/renderer.ts b/packages/react-template/src/renderer.ts
index e4e6b8e6d..0c1f4738e 100644
--- a/packages/react-template/src/renderer.ts
+++ b/packages/react-template/src/renderer.ts
@@ -1,8 +1,9 @@
-import type { Import, Export } from '@kubb/core'
-import type { DOMElement } from './dom.ts'
-import { squashTextNodes } from './squashTextNodes.ts'
-import { squashImportNodes } from './squashImportNodes.ts'
 import { squashExportNodes } from './squashExportNodes.ts'
+import { squashImportNodes } from './squashImportNodes.ts'
+import { squashTextNodes } from './squashTextNodes.ts'
+
+import type { Export, Import } from '@kubb/core'
+import type { DOMElement } from './dom.ts'
 
 type Result = {
   output: string
diff --git a/packages/react-template/src/squashExportNodes.ts b/packages/react-template/src/squashExportNodes.ts
index 0cf6a6b03..29cb0e6f3 100644
--- a/packages/react-template/src/squashExportNodes.ts
+++ b/packages/react-template/src/squashExportNodes.ts
@@ -1,7 +1,7 @@
-import type { Export as ExportComponent } from './components/Export.tsx'
-import type { DOMElement } from './dom.js'
-import type React from 'react'
 import type { Export } from '@kubb/core'
+import type React from 'react'
+import type { Export as ExportComponent } from './components/Export.tsx'
+import type { DOMElement } from './dom.ts'
 
 export function squashExportNodes(node: DOMElement): Export[] {
   const exports: Export[] = []
diff --git a/packages/react-template/src/squashImportNodes.ts b/packages/react-template/src/squashImportNodes.ts
index 1c5c9dd28..b6d303620 100644
--- a/packages/react-template/src/squashImportNodes.ts
+++ b/packages/react-template/src/squashImportNodes.ts
@@ -1,8 +1,7 @@
 import type { Import } from '@kubb/core'
-
-import type { Import as ImportComponent } from './components/Import.ts'
-import type { DOMElement } from './dom.js'
 import type React from 'react'
+import type { Import as ImportComponent } from './components/Import.ts'
+import type { DOMElement } from './dom.ts'
 
 export function squashImportNodes(node: DOMElement): Import[] {
   const imports: Import[] = []
diff --git a/packages/react-template/src/squashTextNodes.ts b/packages/react-template/src/squashTextNodes.ts
index 2fab2fc40..b4d3ecd1f 100644
--- a/packages/react-template/src/squashTextNodes.ts
+++ b/packages/react-template/src/squashTextNodes.ts
@@ -1,7 +1,8 @@
-import type { DOMElement } from './dom.js'
+import { createExportDeclaration, createImportDeclaration, print } from '@kubb/ts-codegen'
+
 import type { Export as ExportComponent } from './components/Export.tsx'
 import type { Import as ImportComponent } from './components/Import.ts'
-import { createExportDeclaration, createImportDeclaration, print } from '@kubb/ts-codegen'
+import type { DOMElement } from './dom.ts'
 
 // Squashing text nodes allows to combine multiple text nodes into one and write
 // to `Output` instance only once. For example, <Text>hello{' '}world</Text>
diff --git a/packages/swagger-client/client.ts b/packages/swagger-client/client.ts
index 24b836b38..0812e1cd4 100644
--- a/packages/swagger-client/client.ts
+++ b/packages/swagger-client/client.ts
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import type { AxiosError, AxiosHeaders, AxiosResponse, AxiosRequestConfig } from 'axios'
+import type { AxiosError, AxiosHeaders, AxiosRequestConfig, AxiosResponse } from 'axios'
 
 declare const AXIOS_BASE: string
 declare const AXIOS_HEADERS: string
diff --git a/packages/swagger-client/src/builders/ClientBuilder.tsx b/packages/swagger-client/src/builders/ClientBuilder.tsx
index 3c134d424..9970a2ea1 100644
--- a/packages/swagger-client/src/builders/ClientBuilder.tsx
+++ b/packages/swagger-client/src/builders/ClientBuilder.tsx
@@ -1,12 +1,12 @@
 /* eslint- @typescript-eslint/explicit-module-boundary-types */
-import type { Import } from '@kubb/core'
-import { combineCodes, createFunctionParams } from '@kubb/core'
-import { OasBuilder, getComments, getDataParams } from '@kubb/swagger'
+import { combineCodes, createFunctionParams, URLPath } from '@kubb/core'
 import { Import as ImportTemplate, render } from '@kubb/react-template'
+import { getComments, getDataParams, OasBuilder } from '@kubb/swagger'
 
-import { URLPath } from '@kubb/core'
-import type { Operation, OperationSchemas } from '@kubb/swagger'
 import { ClientFunction } from '../components/index.ts'
+
+import type { Import } from '@kubb/core'
+import type { Operation, OperationSchemas } from '@kubb/swagger'
 import type { Options as PluginOptions } from '../types'
 
 type Config = {
diff --git a/packages/swagger-client/src/components/ClientFunction.tsx b/packages/swagger-client/src/components/ClientFunction.tsx
index 914c842e5..0984280d6 100644
--- a/packages/swagger-client/src/components/ClientFunction.tsx
+++ b/packages/swagger-client/src/components/ClientFunction.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
-import type { ReactNode } from 'react'
-import { Function, createIndent } from '@kubb/react-template'
+
+import { createIndent, Function } from '@kubb/react-template'
+
 import type { HttpMethod } from '@kubb/swagger'
+import type { ReactNode } from 'react'
 import type { Options as PluginOptions } from '../types'
 
 type Props = {
diff --git a/packages/swagger-client/src/generators/OperationGenerator.ts b/packages/swagger-client/src/generators/OperationGenerator.ts
index 565524ccd..e59b18074 100644
--- a/packages/swagger-client/src/generators/OperationGenerator.ts
+++ b/packages/swagger-client/src/generators/OperationGenerator.ts
@@ -2,13 +2,13 @@ import { getRelativePath, URLPath } from '@kubb/core'
 import { OperationGenerator as Generator } from '@kubb/swagger'
 import { pluginName as swaggerTypescriptPluginName } from '@kubb/swagger-ts'
 
+import { ClientBuilder } from '../builders/ClientBuilder.tsx'
 import { pluginName } from '../plugin.ts'
 
 import type { File, OptionalPath, PluginContext } from '@kubb/core'
 import type { ContentType, HttpMethod, Oas, Operation, OperationSchemas, Resolver, SkipBy } from '@kubb/swagger'
-import type { ResolvePathOptions, FileMeta } from '../types.ts'
-import { ClientBuilder } from '../builders/ClientBuilder.tsx'
 import type { Options as PluginOptions } from '../types'
+import type { FileMeta, ResolvePathOptions } from '../types.ts'
 
 type Options = {
   clientPath?: OptionalPath
diff --git a/packages/swagger-client/src/plugin.ts b/packages/swagger-client/src/plugin.ts
index b2c8a12be..b37026607 100644
--- a/packages/swagger-client/src/plugin.ts
+++ b/packages/swagger-client/src/plugin.ts
@@ -1,16 +1,16 @@
 import pathParser from 'node:path'
 
-import { createPlugin, getLocation, getPathMode, getRelativePath, read, renderTemplate, getDependedPlugins, getIndexes } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getLocation, getPathMode, getRelativePath, read, renderTemplate } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
 
 import { camelCase, camelCaseTransformMerge } from 'change-case'
 
 import { OperationGenerator } from './generators/OperationGenerator.ts'
 
-import type { OptionalPath, File } from '@kubb/core'
+import type { File, OptionalPath } from '@kubb/core'
 import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
-import type { PluginOptions } from './types.ts'
 import type { FileMeta } from './types'
+import type { PluginOptions } from './types.ts'
 
 export const pluginName: PluginOptions['name'] = 'swagger-client' as const
 
diff --git a/packages/swagger-client/src/types.ts b/packages/swagger-client/src/types.ts
index 992791098..970605c3c 100644
--- a/packages/swagger-client/src/types.ts
+++ b/packages/swagger-client/src/types.ts
@@ -1,7 +1,6 @@
-import type { CreateAxiosDefaults } from 'axios'
-
 import type { PluginFactoryOptions } from '@kubb/core'
 import type { SkipBy } from '@kubb/swagger'
+import type { CreateAxiosDefaults } from 'axios'
 
 /**
  * We override `process.env` so no need to import this
diff --git a/packages/swagger-faker/src/builders/FakerBuilder.ts b/packages/swagger-faker/src/builders/FakerBuilder.ts
index 11acb2128..d0968bc7c 100644
--- a/packages/swagger-faker/src/builders/FakerBuilder.ts
+++ b/packages/swagger-faker/src/builders/FakerBuilder.ts
@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { nameSorter } from '@kubb/core'
+import { combineCodes, nameSorter } from '@kubb/core'
 import { ImportsGenerator, OasBuilder } from '@kubb/swagger'
 import { createImportDeclaration, print } from '@kubb/ts-codegen'
 
 import { FakerGenerator } from '../generators/index.ts'
 
 import type { PluginContext } from '@kubb/core'
-import { combineCodes } from '@kubb/core'
 import type { FileResolver, ImportMeta, Refs } from '@kubb/swagger'
 
 type Generated = { import: { refs: Refs; name: string }; sources: string[]; imports?: ImportMeta[] }
diff --git a/packages/swagger-faker/src/generators/FakerGenerator.ts b/packages/swagger-faker/src/generators/FakerGenerator.ts
index 4e88b5839..38cc23c6e 100644
--- a/packages/swagger-faker/src/generators/FakerGenerator.ts
+++ b/packages/swagger-faker/src/generators/FakerGenerator.ts
@@ -2,6 +2,7 @@ import { getUniqueName, SchemaGenerator } from '@kubb/core'
 import { isReference } from '@kubb/swagger'
 import { pluginName as swaggerTypeScriptPluginName } from '@kubb/swagger-ts'
 
+import { createJSDocBlockText } from '../../../core/src/utils/jsdoc'
 import { fakerKeywords, fakerParser } from '../parsers/index.ts'
 import { pluginName } from '../plugin.ts'
 
@@ -9,7 +10,6 @@ import type { PluginContext } from '@kubb/core'
 import type { FileResolver, ImportMeta, OpenAPIV3, Refs } from '@kubb/swagger'
 import type ts from 'typescript'
 import type { FakerKeyword, FakerMeta } from '../parsers/index.ts'
-import { createJSDocBlockText } from '../../../core/src/utils/jsdoc'
 
 type Options = {
   fileResolver?: FileResolver
diff --git a/packages/swagger-faker/src/plugin.ts b/packages/swagger-faker/src/plugin.ts
index f49b42158..9cb80ae1f 100644
--- a/packages/swagger-faker/src/plugin.ts
+++ b/packages/swagger-faker/src/plugin.ts
@@ -1,9 +1,7 @@
 import pathParser from 'node:path'
 
-import type { File } from '@kubb/core'
-import { createPlugin, getPathMode, getRelativePath, renderTemplate, getDependedPlugins, getIndexes } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getPathMode, getRelativePath, renderTemplate } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
-
 import { pluginName as swaggerTypeScriptPluginName } from '@kubb/swagger-ts'
 
 import { camelCase, camelCaseTransformMerge } from 'change-case'
@@ -11,9 +9,8 @@ import { camelCase, camelCaseTransformMerge } from 'change-case'
 import { FakerBuilder } from './builders/index.ts'
 import { OperationGenerator } from './generators/index.ts'
 
-import type { OpenAPIV3 } from '@kubb/swagger'
-import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
-
+import type { File } from '@kubb/core'
+import type { OpenAPIV3, PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 import type { FileMeta, PluginOptions } from './types.ts'
 
 export const pluginName: PluginOptions['name'] = 'swagger-faker' as const
diff --git a/packages/swagger-msw/src/builders/MSWBuilder.ts b/packages/swagger-msw/src/builders/MSWBuilder.ts
index 430ce09fd..2a9accde4 100644
--- a/packages/swagger-msw/src/builders/MSWBuilder.ts
+++ b/packages/swagger-msw/src/builders/MSWBuilder.ts
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { combineCodes } from '@kubb/core'
 import { OasBuilder } from '@kubb/swagger'
 
-import { combineCodes } from '@kubb/core'
+import { URLPath } from '../../../core/src/utils/URLPath'
+
 import type { PluginContext } from '@kubb/core'
 import type { Operation } from '@kubb/swagger'
-import { URLPath } from '../../../core/src/utils/URLPath'
 
 type Config = {
   operation: Operation
diff --git a/packages/swagger-msw/src/plugin.ts b/packages/swagger-msw/src/plugin.ts
index 58308aab4..7274eec40 100644
--- a/packages/swagger-msw/src/plugin.ts
+++ b/packages/swagger-msw/src/plugin.ts
@@ -1,18 +1,17 @@
 import pathParser from 'node:path'
 
-import type { File } from '@kubb/core'
-import { createPlugin, getPathMode, getRelativePath, renderTemplate, getDependedPlugins, getIndexes } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getPathMode, getRelativePath, renderTemplate } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
-
-import { pluginName as swaggerTypeScriptPluginName } from '@kubb/swagger-ts'
 import { pluginName as swaggerFakerPluginName } from '@kubb/swagger-faker'
+import { pluginName as swaggerTypeScriptPluginName } from '@kubb/swagger-ts'
 
 import { camelCase, camelCaseTransformMerge } from 'change-case'
 
 import { OperationGenerator } from './generators/index.ts'
 
-import type { FileMeta, PluginOptions } from './types.ts'
+import type { File } from '@kubb/core'
 import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
+import type { FileMeta, PluginOptions } from './types.ts'
 
 export const pluginName: PluginOptions['name'] = 'swagger-msw' as const
 
diff --git a/packages/swagger-swr/src/builders/QueryBuilder.ts b/packages/swagger-swr/src/builders/QueryBuilder.ts
index 94c6f8450..df812d096 100644
--- a/packages/swagger-swr/src/builders/QueryBuilder.ts
+++ b/packages/swagger-swr/src/builders/QueryBuilder.ts
@@ -1,11 +1,10 @@
 /* eslint- @typescript-eslint/explicit-module-boundary-types */
-import { createFunctionParams, createJSDocBlockText } from '@kubb/core'
-import type { Resolver } from '@kubb/swagger'
-import { OasBuilder, getComments, getDataParams } from '@kubb/swagger'
+import { combineCodes, createFunctionParams, createJSDocBlockText, URLPath } from '@kubb/core'
+import { getComments, getDataParams, OasBuilder } from '@kubb/swagger'
 
-import { URLPath, combineCodes } from '@kubb/core'
-import type { Operation, OperationSchemas } from '@kubb/swagger'
 import { camelCase } from 'change-case'
+
+import type { Operation, OperationSchemas, Resolver } from '@kubb/swagger'
 import type { Options as PluginOptions } from '../types'
 
 type Config = {
diff --git a/packages/swagger-swr/src/generators/OperationGenerator.ts b/packages/swagger-swr/src/generators/OperationGenerator.ts
index 32ffbfdc0..7040a8584 100644
--- a/packages/swagger-swr/src/generators/OperationGenerator.ts
+++ b/packages/swagger-swr/src/generators/OperationGenerator.ts
@@ -2,14 +2,13 @@ import { getRelativePath } from '@kubb/core'
 import { OperationGenerator as Generator } from '@kubb/swagger'
 import { pluginName as swaggerTypescriptPluginName } from '@kubb/swagger-ts'
 
+import { QueryBuilder } from '../builders/QueryBuilder.ts'
 import { pluginName } from '../plugin.ts'
 
 import type { File, OptionalPath, PluginContext } from '@kubb/core'
 import type { ContentType, Oas, Operation, OperationSchemas, Resolver, SkipBy } from '@kubb/swagger'
-import type { ResolvePathOptions } from '../types.ts'
-import { QueryBuilder } from '../builders/QueryBuilder.ts'
-import type { FileMeta } from '../types.ts'
 import type { Options as PluginOptions } from '../types'
+import type { FileMeta, ResolvePathOptions } from '../types.ts'
 
 type Options = {
   clientPath?: OptionalPath
diff --git a/packages/swagger-swr/src/plugin.ts b/packages/swagger-swr/src/plugin.ts
index 5571a0622..e235884b0 100644
--- a/packages/swagger-swr/src/plugin.ts
+++ b/packages/swagger-swr/src/plugin.ts
@@ -1,16 +1,15 @@
 import pathParser from 'node:path'
 
-import { createPlugin, getPathMode, getRelativePath, renderTemplate, getDependedPlugins, getIndexes } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getPathMode, getRelativePath, renderTemplate } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
 
 import { camelCase, camelCaseTransformMerge } from 'change-case'
 
 import { OperationGenerator } from './generators/index.ts'
 
-import type { OptionalPath, File } from '@kubb/core'
-import type { PluginOptions } from './types.ts'
-import type { FileMeta } from './types.ts'
+import type { File, OptionalPath } from '@kubb/core'
 import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
+import type { FileMeta, PluginOptions } from './types.ts'
 
 export const pluginName: PluginOptions['name'] = 'swagger-swr' as const
 
diff --git a/packages/swagger-tanstack-query/src/builders/QueryBuilder.ts b/packages/swagger-tanstack-query/src/builders/QueryBuilder.ts
index 5037bcb19..83718b278 100644
--- a/packages/swagger-tanstack-query/src/builders/QueryBuilder.ts
+++ b/packages/swagger-tanstack-query/src/builders/QueryBuilder.ts
@@ -1,16 +1,13 @@
 /* eslint- @typescript-eslint/explicit-module-boundary-types */
+import { combineCodes, createFunctionParams, createJSDocBlockText, URLPath } from '@kubb/core'
+import { getComments, getDataParams, getParams, OasBuilder } from '@kubb/swagger'
+
+import { camelCase, pascalCase } from 'change-case'
+
 import type { Import } from '@kubb/core'
-import { createJSDocBlockText } from '@kubb/core'
-import type { Resolver } from '@kubb/swagger'
-import { OasBuilder, getComments, getDataParams } from '@kubb/swagger'
-
-import { URLPath, combineCodes } from '@kubb/core'
-import type { Operation, OperationSchemas } from '@kubb/swagger'
-import { getParams } from '@kubb/swagger'
-import { camelCase } from 'change-case'
-import type { Framework, FrameworkImports } from '../types.ts'
-import { createFunctionParams } from '@kubb/core'
+import type { Operation, OperationSchemas, Resolver } from '@kubb/swagger'
 import type { Options as PluginOptions } from '../types'
+import type { Framework, FrameworkImports } from '../types.ts'
 
 type BaseConfig = {
   dataReturnType: PluginOptions['dataReturnType']
@@ -34,21 +31,33 @@ type QueryResult = { code: string; name: string }
 
 export class QueryBuilder extends OasBuilder<Config> {
   private get queryKey(): QueryResult {
-    const { operation, schemas } = this.config
+    const { operation, schemas, framework } = this.config
     const codes: string[] = []
 
     const name = camelCase(`${operation.getOperationId()}QueryKey`)
 
-    const params = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: true }),
+    const paramsData = [
+      ...getDataParams(schemas.pathParams, {
+        typed: true,
+        override: framework === 'vue' ? (item) => ({ ...item, type: `MaybeRef<${item.type}>` }) : undefined,
+      }),
       {
         name: 'params',
-        type: schemas.queryParams?.name,
+        type: framework === 'vue' && schemas.queryParams?.name ? `MaybeRef<${schemas.queryParams?.name}>` : schemas.queryParams?.name,
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
-    ])
-    const result = [new URLPath(operation.path).template, schemas.queryParams?.name ? `...(params ? [params] : [])` : undefined].filter(Boolean)
+    ]
+    const params = createFunctionParams(paramsData)
+
+    const result = [
+      new URLPath(operation.path).toObject({
+        type: 'template',
+        stringify: true,
+        replacer: framework === 'vue' ? (pathParam) => `unref(${pathParam})` : undefined,
+      }),
+      schemas.queryParams?.name ? `...(params ? [params] : [])` : undefined,
+    ].filter(Boolean)
 
     codes.push(`export const ${name} = (${params}) => [${result.join(',')}] as const;`)
 
@@ -62,22 +71,27 @@ export class QueryBuilder extends OasBuilder<Config> {
     const name = camelCase(`${operation.getOperationId()}QueryOptions`)
     const queryKeyName = this.queryKey.name
 
-    const pathParams = getParams(schemas.pathParams)
+    const pathParams = getParams(schemas.pathParams, {
+      override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}` }) : undefined,
+    })
 
     const generics = [`TData = ${schemas.response.name}`, `TError = ${errors.map((error) => error.name).join(' | ') || 'unknown'}`]
     const clientGenerics = ['TData', 'TError']
     const queryGenerics = [dataReturnType === 'data' ? 'TData' : 'ResponseConfig<TData>', 'TError']
-    const params = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: true }),
+    const paramsData = [
+      ...getDataParams(schemas.pathParams, {
+        typed: true,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}`, type: `MaybeRef<${item.type}>` }) : undefined,
+      }),
       {
-        name: 'params',
-        type: schemas.queryParams?.name,
+        name: framework === 'vue' ? 'refParams' : 'params',
+        type: framework === 'vue' && schemas.queryParams?.name ? `MaybeRef<${schemas.queryParams?.name}>` : schemas.queryParams?.name,
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
-        type: schemas.headerParams?.name,
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
+        type: framework === 'vue' && schemas.headerParams?.name ? `MaybeRef<${schemas.headerParams?.name}>` : schemas.headerParams?.name,
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -86,20 +100,36 @@ export class QueryBuilder extends OasBuilder<Config> {
         type: 'Partial<Parameters<typeof client>[0]>',
         default: '{}',
       },
-    ])
+    ]
+    const params = createFunctionParams(paramsData)
+
+    const unrefs =
+      framework === 'vue'
+        ? paramsData
+            .filter((item) => item.type?.startsWith('MaybeRef<'))
+            .map((item) => {
+              return `const ${camelCase(item.name.replace('ref', ''))} = unref(${item.name})`
+            })
+            .join('\n')
+        : ''
+
     let queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${schemas.queryParams?.name ? 'params' : ''})`
 
     if (framework === 'solid') {
       queryKey = `() => ${queryKey}`
     }
+    if (framework === 'vue') {
+      queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${schemas.queryParams?.name ? 'refParams' : ''})`
+    }
 
     codes.push(`
 export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.query.UseQueryOptions}<${queryGenerics.join(', ')}> {
   const queryKey = ${queryKey};
-
+  
   return {
     queryKey,
     queryFn: () => {
+      ${unrefs}
       return client<${clientGenerics.join(', ')}>({
         method: "get",
         url: ${new URLPath(operation.path).template},
@@ -122,23 +152,28 @@ export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.
     const queryKeyName = this.queryKey.name
     const queryOptionsName = this.queryOptions.name
     const name = frameworkImports.getName(operation)
-    const pathParams = getParams(schemas.pathParams)
+    const pathParams = getParams(schemas.pathParams, {
+      override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}` }) : undefined,
+    })
     const comments = getComments(operation)
 
     const generics = [`TData = ${schemas.response.name}`, `TError = ${errors.map((error) => error.name).join(' | ') || 'unknown'}`]
     const clientGenerics = ['TData', 'TError']
     const queryGenerics = [dataReturnType === 'data' ? 'TData' : 'ResponseConfig<TData>', 'TError']
     const params = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: true }),
+      ...getDataParams(schemas.pathParams, {
+        typed: true,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}`, type: `MaybeRef<${item.type}>` }) : undefined,
+      }),
       {
-        name: 'params',
-        type: schemas.queryParams?.name,
+        name: framework === 'vue' ? 'refParams' : 'params',
+        type: framework === 'vue' && schemas.queryParams?.name ? `MaybeRef<${schemas.queryParams?.name}>` : schemas.queryParams?.name,
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
-        type: schemas.headerParams?.name,
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
+        type: framework === 'vue' && schemas.headerParams?.name ? `MaybeRef<${schemas.headerParams?.name}>` : schemas.headerParams?.name,
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -152,16 +187,21 @@ export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.
       },
     ])
 
-    const queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${schemas.queryParams?.name ? 'params' : ''})`
+    const queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${
+      schemas.queryParams?.name ? (framework === 'vue' ? 'refParams' : 'params') : ''
+    })`
     const queryParams = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: false }),
+      ...getDataParams(schemas.pathParams, {
+        typed: false,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}` }) : undefined,
+      }),
       {
-        name: 'params',
+        name: framework === 'vue' ? 'refParams' : 'params',
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -201,22 +241,27 @@ export function ${name} <${generics.join(',')}>(${params}): ${frameworkImports.q
 
     const queryKeyName = this.queryKey.name
 
-    const pathParams = getParams(schemas.pathParams)
+    const pathParams = getParams(schemas.pathParams, {
+      override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}` }) : undefined,
+    })
 
     const generics = [`TData = ${schemas.response.name}`, `TError = ${errors.map((error) => error.name).join(' | ') || 'unknown'}`]
     const clientGenerics = ['TData', 'TError']
     const queryGenerics = [dataReturnType === 'data' ? 'TData' : 'ResponseConfig<TData>', 'TError']
-    const params = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: true }),
+    const paramsData = [
+      ...getDataParams(schemas.pathParams, {
+        typed: true,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}`, type: `MaybeRef<${item.type}>` }) : undefined,
+      }),
       {
-        name: 'params',
-        type: schemas.queryParams?.name,
+        name: framework === 'vue' ? 'refParams' : 'params',
+        type: framework === 'vue' && schemas.queryParams?.name ? `MaybeRef<${schemas.queryParams?.name}>` : schemas.queryParams?.name,
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
-        type: schemas.headerParams?.name,
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
+        type: framework === 'vue' && schemas.headerParams?.name ? `MaybeRef<${schemas.headerParams?.name}>` : schemas.headerParams?.name,
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -225,12 +270,26 @@ export function ${name} <${generics.join(',')}>(${params}): ${frameworkImports.q
         type: 'Partial<Parameters<typeof client>[0]>',
         default: '{}',
       },
-    ])
+    ]
+    const params = createFunctionParams(paramsData)
+
+    const unrefs =
+      framework === 'vue'
+        ? paramsData
+            .filter((item) => item.type?.startsWith('MaybeRef<'))
+            .map((item) => {
+              return `const ${camelCase(item.name.replace('ref', ''))} = unref(${item.name})`
+            })
+            .join('\n')
+        : ''
     let queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${schemas.queryParams?.name ? 'params' : ''})`
 
     if (framework === 'solid') {
       queryKey = `() => ${queryKey}`
     }
+    if (framework === 'vue') {
+      queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${schemas.queryParams?.name ? 'refParams' : ''})`
+    }
 
     codes.push(`
 export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.query.UseInfiniteQueryOptions}<${queryGenerics.join(', ')}> {
@@ -239,6 +298,7 @@ export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.
   return {
     queryKey,
     queryFn: ({ pageParam }) => {
+      ${unrefs}
       return client<${clientGenerics.join(', ')}>({
         method: "get",
         url: ${new URLPath(operation.path).template},
@@ -269,23 +329,28 @@ export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.
     const queryKeyName = this.queryKey.name
     const queryOptionsName = this.queryOptionsInfinite.name // changed
     const name = `${frameworkImports.getName(operation)}Infinite`
-    const pathParams = getParams(schemas.pathParams)
+    const pathParams = getParams(schemas.pathParams, {
+      override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}` }) : undefined,
+    })
     const comments = getComments(operation)
 
     const generics = [`TData = ${schemas.response.name}`, `TError = ${errors.map((error) => error.name).join(' | ') || 'unknown'}`]
     const clientGenerics = ['TData', 'TError']
     const queryGenerics = [dataReturnType === 'data' ? 'TData' : 'ResponseConfig<TData>', 'TError']
     const params = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: true }),
+      ...getDataParams(schemas.pathParams, {
+        typed: true,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}`, type: `MaybeRef<${item.type}>` }) : undefined,
+      }),
       {
-        name: 'params',
-        type: schemas.queryParams?.name,
+        name: framework === 'vue' ? 'refParams' : 'params',
+        type: framework === 'vue' && schemas.queryParams?.name ? `MaybeRef<${schemas.queryParams?.name}>` : schemas.queryParams?.name,
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
-        type: schemas.headerParams?.name,
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
+        type: framework === 'vue' && schemas.headerParams?.name ? `MaybeRef<${schemas.headerParams?.name}>` : schemas.headerParams?.name,
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -299,16 +364,21 @@ export function ${name} <${generics.join(', ')}>(${params}): ${frameworkImports.
       },
     ])
 
-    const queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${schemas.queryParams?.name ? 'params' : ''})`
+    const queryKey = `${queryKeyName}(${schemas.pathParams?.name ? `${pathParams}, ` : ''}${
+      schemas.queryParams?.name ? (framework === 'vue' ? 'refParams' : 'params') : ''
+    })`
     const queryParams = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: false }),
+      ...getDataParams(schemas.pathParams, {
+        typed: false,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}` }) : undefined,
+      }),
       {
-        name: 'params',
+        name: framework === 'vue' ? 'refParams' : 'params',
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -362,17 +432,20 @@ export function ${name} <${generics.join(',')}>(${params}): ${frameworkImports.q
       schemas.request?.name ? `TVariables` : 'void',
       framework === 'vue' ? 'unknown' : undefined,
     ].filter(Boolean)
-    const params = createFunctionParams([
-      ...getDataParams(schemas.pathParams, { typed: true }),
+    const paramsData = [
+      ...getDataParams(schemas.pathParams, {
+        typed: true,
+        override: framework === 'vue' ? (item) => ({ ...item, name: `ref${pascalCase(item.name)}`, type: `MaybeRef<${item.type}>` }) : undefined,
+      }),
       {
-        name: 'params',
-        type: schemas.queryParams?.name,
+        name: framework === 'vue' ? 'refParams' : 'params',
+        type: framework === 'vue' && schemas.queryParams?.name ? `MaybeRef<${schemas.queryParams?.name}>` : schemas.queryParams?.name,
         enabled: !!schemas.queryParams?.name,
         required: !!schemas.queryParams?.schema.required?.length,
       },
       {
-        name: 'headers',
-        type: schemas.headerParams?.name,
+        name: framework === 'vue' ? 'refHeaders' : 'headers',
+        type: framework === 'vue' && schemas.headerParams?.name ? `MaybeRef<${schemas.headerParams?.name}>` : schemas.headerParams?.name,
         enabled: !!schemas.headerParams?.name,
         required: !!schemas.headerParams?.schema.required?.length,
       },
@@ -384,7 +457,18 @@ export function ${name} <${generics.join(',')}>(${params}): ${frameworkImports.q
       }`,
         default: '{}',
       },
-    ])
+    ]
+    const params = createFunctionParams(paramsData)
+
+    const unrefs =
+      framework === 'vue'
+        ? paramsData
+            .filter((item) => item.type?.startsWith('MaybeRef<'))
+            .map((item) => {
+              return `const ${camelCase(item.name.replace('ref', ''))} = unref(${item.name})`
+            })
+            .join('\n')
+        : ''
 
     codes.push(createJSDocBlockText({ comments }))
     codes.push(`
@@ -393,6 +477,7 @@ export function ${name} <${generics.join(',')}>(${params}): ${frameworkImports.m
   
   return ${frameworkImports.mutate.useMutation}<${mutationGenerics.join(', ')}>({
     mutationFn: (${schemas.request?.name ? 'data' : ''}) => {
+      ${unrefs}
       return client<${clientGenerics.filter((generic) => generic !== 'unknown').join(', ')}>({
         method: "${method}",
         url: ${new URLPath(operation.path).template},
diff --git a/packages/swagger-tanstack-query/src/generators/OperationGenerator.ts b/packages/swagger-tanstack-query/src/generators/OperationGenerator.ts
index 981164c1d..d33a2ebd7 100644
--- a/packages/swagger-tanstack-query/src/generators/OperationGenerator.ts
+++ b/packages/swagger-tanstack-query/src/generators/OperationGenerator.ts
@@ -2,13 +2,13 @@ import { getRelativePath } from '@kubb/core'
 import { OperationGenerator as Generator } from '@kubb/swagger'
 import { pluginName as swaggerTypescriptPluginName } from '@kubb/swagger-ts'
 
-import type { File, OptionalPath, PluginContext } from '@kubb/core'
-import type { ContentType, Oas, Operation, OperationSchemas, Resolver, SkipBy } from '@kubb/swagger'
-import type { ResolvePathOptions, Framework, FrameworkImports } from '../types.ts'
 import { QueryBuilder } from '../builders/QueryBuilder.ts'
-import type { FileMeta } from '../types.ts'
 import { pluginName } from '../plugin.ts'
+
+import type { File, OptionalPath, PluginContext } from '@kubb/core'
+import type { ContentType, Oas, Operation, OperationSchemas, Resolver, SkipBy } from '@kubb/swagger'
 import type { Options as PluginOptions } from '../types'
+import type { FileMeta, Framework, FrameworkImports, ResolvePathOptions } from '../types.ts'
 
 type Options = {
   framework: Framework
@@ -240,6 +240,15 @@ export class OperationGenerator extends Generator<Options> {
           path: '@tanstack/vue-query/build/lib/useMutation',
           isTypeOnly: true,
         },
+        {
+          name: ['unref'],
+          path: 'vue',
+        },
+        {
+          name: ['MaybeRef'],
+          path: 'vue',
+          isTypeOnly: true,
+        },
         {
           name: values.filter((item) => /[A-Z]/.test(item.charAt(0))),
           path: '@tanstack/vue-query',
diff --git a/packages/swagger-tanstack-query/src/plugin.ts b/packages/swagger-tanstack-query/src/plugin.ts
index 65217f9c6..7a041390a 100644
--- a/packages/swagger-tanstack-query/src/plugin.ts
+++ b/packages/swagger-tanstack-query/src/plugin.ts
@@ -1,6 +1,6 @@
 import pathParser from 'node:path'
 
-import { createPlugin, getPathMode, getRelativePath, renderTemplate, getDependedPlugins, getIndexes } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getPathMode, getRelativePath, renderTemplate } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
 
 import { camelCase, camelCaseTransformMerge } from 'change-case'
@@ -8,8 +8,8 @@ import { camelCase, camelCaseTransformMerge } from 'change-case'
 import { OperationGenerator } from './generators/index.ts'
 
 import type { File, OptionalPath } from '@kubb/core'
-import type { FileMeta, PluginOptions } from './types.ts'
 import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
+import type { FileMeta, PluginOptions } from './types.ts'
 
 export const pluginName: PluginOptions['name'] = 'swagger-tanstack-query' as const
 
diff --git a/packages/swagger-ts/src/builders/TypeBuilder.ts b/packages/swagger-ts/src/builders/TypeBuilder.ts
index 3da52ef6b..1abc3e232 100644
--- a/packages/swagger-ts/src/builders/TypeBuilder.ts
+++ b/packages/swagger-ts/src/builders/TypeBuilder.ts
@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { nameSorter } from '@kubb/core'
+import { combineCodes, nameSorter } from '@kubb/core'
 import { ImportsGenerator, OasBuilder } from '@kubb/swagger'
 import { createImportDeclaration, print } from '@kubb/ts-codegen'
 
 import { TypeGenerator } from '../generators/TypeGenerator.ts'
 
 import type { PluginContext } from '@kubb/core'
-import { combineCodes } from '@kubb/core'
 import type { FileResolver, Refs } from '@kubb/swagger'
 import type ts from 'typescript'
 
diff --git a/packages/swagger-ts/src/generators/TypeGenerator.ts b/packages/swagger-ts/src/generators/TypeGenerator.ts
index 0ad23d71c..28af6b368 100644
--- a/packages/swagger-ts/src/generators/TypeGenerator.ts
+++ b/packages/swagger-ts/src/generators/TypeGenerator.ts
@@ -13,7 +13,6 @@ import {
 } from '@kubb/ts-codegen'
 
 import { camelCase } from 'change-case'
-import type { Options as CaseOptions } from 'change-case'
 import ts from 'typescript'
 
 import { pluginName } from '../plugin.ts'
@@ -22,6 +21,7 @@ import { keywordTypeNodes } from '../utils/index.ts'
 import type { PluginContext } from '@kubb/core'
 import type { OpenAPIV3, Refs } from '@kubb/swagger'
 import type { ArrayTwoOrMore } from '@kubb/ts-codegen'
+import type { Options as CaseOptions } from 'change-case'
 
 const { factory } = ts
 
diff --git a/packages/swagger-ts/src/plugin.ts b/packages/swagger-ts/src/plugin.ts
index 9cb9ecb89..278b259c8 100644
--- a/packages/swagger-ts/src/plugin.ts
+++ b/packages/swagger-ts/src/plugin.ts
@@ -1,16 +1,15 @@
 import pathParser from 'node:path'
 
-import { createPlugin, getPathMode, getRelativePath, renderTemplate, getDependedPlugins, getIndexes, timeout } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getPathMode, getRelativePath, renderTemplate, timeout } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
 
-import { pascalCase, pascalCaseTransformMerge, camelCase, camelCaseTransformMerge } from 'change-case'
+import { camelCase, camelCaseTransformMerge, pascalCase, pascalCaseTransformMerge } from 'change-case'
 
 import { TypeBuilder } from './builders/index.ts'
 import { OperationGenerator } from './generators/index.ts'
 
-import type { OpenAPIV3 } from '@kubb/swagger'
+import type { OpenAPIV3, PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 import type { PluginOptions } from './types.ts'
-import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 
 export const pluginName: PluginOptions['name'] = 'swagger-ts' as const
 
diff --git a/packages/swagger-zod/src/builders/ZodBuilder.ts b/packages/swagger-zod/src/builders/ZodBuilder.ts
index 7467a5310..587a32c04 100644
--- a/packages/swagger-zod/src/builders/ZodBuilder.ts
+++ b/packages/swagger-zod/src/builders/ZodBuilder.ts
@@ -1,11 +1,10 @@
-import { nameSorter } from '@kubb/core'
+import { combineCodes, nameSorter } from '@kubb/core'
 import { ImportsGenerator, OasBuilder } from '@kubb/swagger'
 import { createImportDeclaration, print } from '@kubb/ts-codegen'
 
 import { ZodGenerator } from '../generators/index.ts'
 
 import type { PluginContext } from '@kubb/core'
-import { combineCodes } from '@kubb/core'
 import type { FileResolver, Refs } from '@kubb/swagger'
 
 type Generated = { import: { refs: Refs; name: string }; sources: string[] }
diff --git a/packages/swagger-zod/src/generators/ZodGenerator.ts b/packages/swagger-zod/src/generators/ZodGenerator.ts
index 4990ff1bc..f4259d113 100644
--- a/packages/swagger-zod/src/generators/ZodGenerator.ts
+++ b/packages/swagger-zod/src/generators/ZodGenerator.ts
@@ -1,4 +1,4 @@
-import { getUniqueName, SchemaGenerator, jsStringEscape } from '@kubb/core'
+import { getUniqueName, jsStringEscape, SchemaGenerator } from '@kubb/core'
 import { isReference } from '@kubb/swagger'
 
 import { zodKeywords, zodParser } from '../parsers/index.ts'
diff --git a/packages/swagger-zod/src/plugin.ts b/packages/swagger-zod/src/plugin.ts
index f371a785a..b0380b6ca 100644
--- a/packages/swagger-zod/src/plugin.ts
+++ b/packages/swagger-zod/src/plugin.ts
@@ -1,7 +1,6 @@
 import pathParser from 'node:path'
 
-import type { File } from '@kubb/core'
-import { createPlugin, getPathMode, getRelativePath, renderTemplate, getDependedPlugins, getIndexes } from '@kubb/core'
+import { createPlugin, getDependedPlugins, getIndexes, getPathMode, getRelativePath, renderTemplate } from '@kubb/core'
 import { pluginName as swaggerPluginName } from '@kubb/swagger'
 
 import { camelCase, camelCaseTransformMerge } from 'change-case'
@@ -9,9 +8,9 @@ import { camelCase, camelCaseTransformMerge } from 'change-case'
 import { ZodBuilder } from './builders/index.ts'
 import { OperationGenerator } from './generators/index.ts'
 
-import type { OpenAPIV3 } from '@kubb/swagger'
+import type { File } from '@kubb/core'
+import type { OpenAPIV3, PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 import type { FileMeta, PluginOptions } from './types.ts'
-import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 
 export const pluginName: PluginOptions['name'] = 'swagger-zod' as const
 
diff --git a/packages/swagger-zodios/src/plugin.ts b/packages/swagger-zodios/src/plugin.ts
index fa6ba5e68..45460c733 100644
--- a/packages/swagger-zodios/src/plugin.ts
+++ b/packages/swagger-zodios/src/plugin.ts
@@ -8,9 +8,9 @@ import { camelCase, camelCaseTransformMerge } from 'change-case'
 
 import { OperationGenerator } from './generators/index.ts'
 
+import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 import type { PluginOptions as SwaggerZodPluginOptions } from '@kubb/swagger-zod'
 import type { PluginOptions } from './types.ts'
-import type { PluginOptions as SwaggerPluginOptions } from '@kubb/swagger'
 
 export const pluginName: PluginOptions['name'] = 'swagger-zodios' as const
 
diff --git a/packages/swagger/src/generators/OperationGenerator.ts b/packages/swagger/src/generators/OperationGenerator.ts
index b7d7d5ad4..16a229674 100644
--- a/packages/swagger/src/generators/OperationGenerator.ts
+++ b/packages/swagger/src/generators/OperationGenerator.ts
@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import { combineFiles, Generator } from '@kubb/core'
+import { combineFiles, Generator, Warning } from '@kubb/core'
 
 import { pascalCase, pascalCaseTransformMerge } from 'change-case'
+import { utils } from 'oas'
 
 import { isReference } from '../utils/isReference.ts'
 
@@ -10,9 +11,6 @@ import type { Operation } from 'oas'
 import type { HttpMethods as HttpMethod, MediaTypeObject, RequestBodyObject } from 'oas/dist/rmoas.types.ts'
 import type { OpenAPIV3 } from 'openapi-types'
 import type { ContentType, Oas, OperationSchemas, Resolver, SkipBy } from '../types.ts'
-import { Warning } from '@kubb/core'
-
-import { utils } from 'oas'
 
 const { findSchemaDefinition } = utils
 
diff --git a/packages/swagger/src/parsers/oasParser.ts b/packages/swagger/src/parsers/oasParser.ts
index 6b2cc0655..0de8d77d4 100644
--- a/packages/swagger/src/parsers/oasParser.ts
+++ b/packages/swagger/src/parsers/oasParser.ts
@@ -3,6 +3,8 @@ import pathParser from 'node:path'
 import { URLPath } from '@kubb/core'
 
 import SwaggerParser from '@apidevtools/swagger-parser'
+import Oas from 'oas'
+import OASNormalize from 'oas-normalize'
 import swagger2openapi from 'swagger2openapi'
 
 import { isOpenApiV3Document } from '../utils/index.ts'
@@ -12,9 +14,6 @@ import type oas from 'oas'
 import type { OASDocument } from 'oas/dist/rmoas.types.ts'
 import type { OpenAPIV2 } from 'openapi-types'
 
-import Oas from 'oas'
-import OASNormalize from 'oas-normalize'
-
 export type OasOptions = {
   validate?: boolean
 }
diff --git a/packages/swagger/src/plugin.ts b/packages/swagger/src/plugin.ts
index 8ae130814..9d05bb9de 100644
--- a/packages/swagger/src/plugin.ts
+++ b/packages/swagger/src/plugin.ts
@@ -1,13 +1,13 @@
 import pathParser from 'node:path'
 
-import type { KubbConfig, Logger } from '@kubb/core'
 import { createPlugin } from '@kubb/core'
 
 import { oasParser } from './parsers/oasParser.ts'
+import { getSchemas } from './utils/getSchemas.ts'
 
+import type { KubbConfig, Logger } from '@kubb/core'
 import type { OpenAPIV3 } from 'openapi-types'
 import type { Oas, PluginOptions } from './types.ts'
-import { getSchemas } from './utils/getSchemas.ts'
 
 export const pluginName: PluginOptions['name'] = 'swagger' as const
 
diff --git a/packages/swagger/src/types.ts b/packages/swagger/src/types.ts
index 600815940..8621706e5 100644
--- a/packages/swagger/src/types.ts
+++ b/packages/swagger/src/types.ts
@@ -1,8 +1,8 @@
 import type { Path, PluginFactoryOptions } from '@kubb/core'
-import type { GetSchemasProps } from './utils/getSchemas'
 import type Oas from 'oas'
-import type { OpenAPIV3 } from 'openapi-types'
 import type { HttpMethods as HttpMethod } from 'oas/dist/rmoas.types.ts'
+import type { OpenAPIV3 } from 'openapi-types'
+import type { GetSchemasProps } from './utils/getSchemas'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type ContentType = 'application/json' | (string & {})
diff --git a/packages/swagger/src/utils/getParams.ts b/packages/swagger/src/utils/getParams.ts
index 6e75e9519..56ccc4563 100644
--- a/packages/swagger/src/utils/getParams.ts
+++ b/packages/swagger/src/utils/getParams.ts
@@ -1,23 +1,31 @@
 import { createFunctionParams } from '@kubb/core'
 
-import type { OperationSchema } from '../types.ts'
 import { isParameterObject } from './isParameterObject'
 
+import type { OperationSchema } from '../types.ts'
+
+type FunctionParamsAst = Parameters<typeof createFunctionParams>[0][number]
+
 export function getDataParams(
   operationSchema: OperationSchema | undefined,
-  { typed }: { typed: boolean } = { typed: false },
-): Parameters<typeof createFunctionParams>[0] {
+  { typed = false, override }: { typed?: boolean; override?: (data: FunctionParamsAst) => FunctionParamsAst } = {},
+): FunctionParamsAst[] {
   if (!operationSchema || !operationSchema.schema.properties || !operationSchema.name) {
     return []
   }
   return Object.entries(operationSchema.schema.properties).map(([name, schema]) => {
     const isParam = isParameterObject(schema)
-    return { name, required: isParam ? schema.required : undefined, type: typed ? `${operationSchema.name}["${name}"]` : undefined }
+    const data: FunctionParamsAst = { name, required: isParam ? schema.required : undefined, type: typed ? `${operationSchema.name}["${name}"]` : undefined }
+
+    return override ? override(data) : data
   })
 }
 
-export function getParams(operationSchema: OperationSchema | undefined, { typed }: { typed: boolean } = { typed: false }): string {
-  const data = getDataParams(operationSchema, { typed })
+export function getParams(
+  operationSchema: OperationSchema | undefined,
+  { typed = false, override }: { typed?: boolean; override?: (data: FunctionParamsAst) => FunctionParamsAst } = {},
+): string {
+  const data = getDataParams(operationSchema, { typed, override })
 
   if (!data?.length) {
     return ''
diff --git a/packages/ts-codegen/src/codegen.ts b/packages/ts-codegen/src/codegen.ts
index c480a9179..d064cb762 100644
--- a/packages/ts-codegen/src/codegen.ts
+++ b/packages/ts-codegen/src/codegen.ts
@@ -311,7 +311,7 @@ export function createEnumDeclaration({
    * Enum name in PascalCase.
    */
   typeName: string
-  enums: [key: string, value: string | number | boolean][]
+  enums: [key: string | number, value: string | number | boolean][]
 }) {
   if (type === 'enum') {
     return [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81377af77..9ebfdee78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,9 +34,6 @@ importers:
       prettier-eslint:
         specifier: ^15.0.1
         version: 15.0.1
-      prettier-plugin-curly:
-        specifier: ^0.1.3
-        version: 0.1.3(prettier@3.0.3)
       ts-node:
         specifier: ^10.9.1
         version: 10.9.1(@swc/core@1.3.82)(@types/node@20.8.3)(typescript@5.2.2)
@@ -120,8 +117,8 @@ importers:
         specifier: ^4.36.1
         version: 4.36.1(svelte@3.59.2)
       '@tanstack/vue-query':
-        specifier: ^4.36.1
-        version: 4.36.1(vue@3.3.4)
+        specifier: ^4.36.2
+        version: 4.36.2(vue@3.3.4)
       '@zodios/core':
         specifier: ^10.9.6
         version: 10.9.6(axios@1.5.1)(zod@3.22.4)
@@ -211,8 +208,8 @@ importers:
         specifier: ^4.36.1
         version: 4.36.1(svelte@3.59.2)
       '@tanstack/vue-query':
-        specifier: ^4.36.1
-        version: 4.36.1(vue@3.3.4)
+        specifier: ^4.36.2
+        version: 4.36.2(vue@3.3.4)
       '@zodios/core':
         specifier: ^10.9.6
         version: 10.9.6(axios@1.5.1)(zod@3.22.4)
@@ -388,6 +385,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^4.36.1
         version: 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query-devtools':
+        specifier: ^4.36.1
+        version: 4.36.1(@tanstack/react-query@4.36.1)(react-dom@18.2.0)(react@18.2.0)
       axios:
         specifier: ^1.5.1
         version: 1.5.1
@@ -489,9 +489,6 @@ importers:
         specifier: ^7.2.0
         version: 7.2.0(@swc/core@1.3.82)(ts-node@10.9.1)(typescript@5.2.2)
     devDependencies:
-      '@kubb/ts-config':
-        specifier: workspace:*
-        version: link:../../packages/config/ts-config
       typescript:
         specifier: ^5.2.2
         version: 5.2.2
@@ -532,9 +529,6 @@ importers:
         specifier: ^7.2.0
         version: 7.2.0(@swc/core@1.3.82)(ts-node@10.9.1)(typescript@5.2.2)
     devDependencies:
-      '@kubb/ts-config':
-        specifier: workspace:*
-        version: link:../../packages/config/ts-config
       typescript:
         specifier: ^5.2.2
         version: 5.2.2
@@ -624,8 +618,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/swagger-zod
       '@tanstack/vue-query':
-        specifier: ^4.36.1
-        version: 4.36.1(vue@3.3.4)
+        specifier: ^4.36.2
+        version: 4.36.2(vue@3.3.4)
       axios:
         specifier: ^1.5.1
         version: 1.5.1
@@ -633,15 +627,21 @@ importers:
         specifier: ^3.3.4
         version: 3.3.4
     devDependencies:
-      '@kubb/ts-config':
-        specifier: workspace:*
-        version: link:../../packages/config/ts-config
+      '@vitejs/plugin-vue':
+        specifier: ^4.4.0
+        version: 4.4.0(vite@4.4.11)(vue@3.3.4)
+      msw:
+        specifier: ^1.3.2
+        version: 1.3.2(typescript@5.2.2)
       tsup:
         specifier: ^7.2.0
         version: 7.2.0(@swc/core@1.3.82)(ts-node@10.9.1)(typescript@5.2.2)
       typescript:
         specifier: ^5.2.2
         version: 5.2.2
+      vite:
+        specifier: ^4.4.11
+        version: 4.4.11(@types/node@20.8.3)
 
   examples/zod:
     dependencies:
@@ -1629,7 +1629,7 @@ packages:
     resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
       jsesc: 2.5.2
@@ -1685,7 +1685,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-function-name@7.23.0:
@@ -1700,7 +1700,7 @@ packages:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-module-imports@7.22.15:
@@ -1714,7 +1714,7 @@ packages:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-module-transforms@7.22.5:
@@ -1728,7 +1728,7 @@ packages:
       '@babel/helper-validator-identifier': 7.22.5
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1756,21 +1756,21 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-split-export-declaration@7.22.5:
     resolution: {integrity: sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/helper-string-parser@7.22.5:
@@ -1780,7 +1780,6 @@ packages:
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.22.5:
     resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
@@ -1802,7 +1801,7 @@ packages:
     dependencies:
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/types': 7.23.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1856,7 +1855,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.23.0
-    dev: true
 
   /@babel/plugin-transform-react-jsx-self@7.22.5(@babel/core@7.23.0):
     resolution: {integrity: sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==}
@@ -1899,8 +1897,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.5
-      '@babel/parser': 7.22.7
-      '@babel/types': 7.22.5
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
     dev: true
 
   /@babel/traverse@7.22.5:
@@ -1972,7 +1970,6 @@ packages:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
 
   /@bcoe/v8-coverage@0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -2617,6 +2614,21 @@ packages:
     resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==}
     dev: false
 
+  /@tanstack/react-query-devtools@4.36.1(@tanstack/react-query@4.36.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==}
+    peerDependencies:
+      '@tanstack/react-query': ^4.36.1
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.8.4
+      '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      superjson: 1.13.3
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==}
     peerDependencies:
@@ -2653,8 +2665,8 @@ packages:
       svelte: 3.59.2
     dev: false
 
-  /@tanstack/vue-query@4.36.1(vue@3.3.4):
-    resolution: {integrity: sha512-+dS/+Xb5OL0bdy8iurT2U4oX9R5T+eUJCK3JHIn6JAQKcVk+Zp09uVzF/dwy1Xe/8Xhy593vcr+wWc9fMrsAPQ==}
+  /@tanstack/vue-query@4.36.2(vue@3.3.4):
+    resolution: {integrity: sha512-zZjP1q7Fe+tmvZeJeQ9v56VQ4VgyafdjjCRaYxLNHDBlXB+fpqP4kWhUfTKQEDHSAyzrtX8Bk789jg/yUPyIKQ==}
     peerDependencies:
       '@vue/composition-api': ^1.1.2
       vue: ^2.5.0 || ^3.0.0
@@ -3082,6 +3094,17 @@ packages:
       - supports-color
     dev: true
 
+  /@vitejs/plugin-vue@4.4.0(vite@4.4.11)(vue@3.3.4):
+    resolution: {integrity: sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.4.11(@types/node@20.8.3)
+      vue: 3.3.4
+    dev: true
+
   /@vitest/coverage-v8@0.34.6(vitest@0.34.6):
     resolution: {integrity: sha512-fivy/OK2d/EsJFoEoxHFEnNGTg+MmdZBAVK9Ka4qhXR2K3J0DS08vcGVwzDtXSuUMabLv4KtPcpSKkcMXFDViw==}
     peerDependencies:
@@ -3157,36 +3180,32 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: false
 
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
-    dev: false
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
     dependencies:
-      '@babel/parser': 7.22.7
+      '@babel/parser': 7.23.0
       '@vue/compiler-core': 3.3.4
       '@vue/compiler-dom': 3.3.4
       '@vue/compiler-ssr': 3.3.4
       '@vue/reactivity-transform': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       postcss: 8.4.27
       source-map-js: 1.0.2
-    dev: false
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
     dependencies:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
-    dev: false
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -3195,25 +3214,22 @@ packages:
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
-      '@babel/parser': 7.22.7
+      '@babel/parser': 7.23.0
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.1
-    dev: false
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
-    dev: false
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
-    dev: false
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -3221,7 +3237,6 @@ packages:
       '@vue/runtime-core': 3.3.4
       '@vue/shared': 3.3.4
       csstype: 3.1.2
-    dev: false
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -3231,11 +3246,9 @@ packages:
       '@vue/compiler-ssr': 3.3.4
       '@vue/shared': 3.3.4
       vue: 3.3.4
-    dev: false
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
-    dev: false
 
   /@vueuse/core@10.4.1(vue@3.3.4):
     resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
@@ -3973,6 +3986,13 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+    dependencies:
+      is-what: 4.1.15
+    dev: false
+
   /cosmiconfig@8.3.6(typescript@5.2.2):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -4823,7 +4843,6 @@ packages:
 
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: false
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -5583,6 +5602,11 @@ packages:
       get-intrinsic: 1.2.1
     dev: false
 
+  /is-what@4.1.15:
+    resolution: {integrity: sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==}
+    engines: {node: '>=12.13'}
+    dev: false
+
   /isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
     dev: false
@@ -5860,13 +5884,6 @@ packages:
       es5-ext: 0.10.62
     dev: false
 
-  /magic-string@0.30.0:
-    resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
-
   /magic-string@0.30.1:
     resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==}
     engines: {node: '>=12'}
@@ -6541,19 +6558,6 @@ packages:
       - supports-color
     dev: true
 
-  /prettier-plugin-curly@0.1.3(prettier@3.0.3):
-    resolution: {integrity: sha512-NYr2BPex/0fFwDbiZZr91kfgBko1tmaorLOrVAkT5rN91mIYYJRiWabRxWGFqzRSO7J0eoEcxakY9NWvJWAh4w==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      prettier: ^2 || ^3
-    dependencies:
-      '@babel/parser': 7.22.7
-      '@babel/traverse': 7.22.8
-      prettier: 3.0.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -7234,6 +7238,13 @@ packages:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  /superjson@1.13.3:
+    resolution: {integrity: sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==}
+    engines: {node: '>=10'}
+    dependencies:
+      copy-anything: 3.0.5
+    dev: false
+
   /supports-color@2.0.0:
     resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
     engines: {node: '>=0.8.0'}
@@ -8047,7 +8058,6 @@ packages:
       '@vue/runtime-dom': 3.3.4
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
-    dev: false
 
   /wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
diff --git a/prettier.config.cjs b/prettier.config.cjs
index b3231b1c5..662fcd978 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -19,10 +19,10 @@ const config = {
   semi: false,
   bracketSameLine: false,
   endOfLine: 'auto',
-  plugins: ['@ianvs/prettier-plugin-sort-imports', 'prettier-plugin-curly'],
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
   // `@ianvs/prettier-plugin-sort-imports` plugin's options
   importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
-  importOrderTypeScriptVersion: '5.1.3',
+  importOrderTypeScriptVersion: '5.0.0',
   importOrder: [
     '^(react/(.*)$)|^(react$)',
     '<BUILTIN_MODULES>', // Node.js built-in modules
diff --git a/release-please-config.json b/release-please-config.json
index f32d009b2..e5ad4b650 100644
--- a/release-please-config.json
+++ b/release-please-config.json
@@ -15,6 +15,15 @@
     { "type": "ci", "section": "Continuous Integration", "hidden": true }
   ],
   "packages": {
+    ".": {
+      "changelog-path": "CHANGELOG.md",
+      "release-type": "node",
+      "bump-minor-pre-major": false,
+      "bump-patch-for-minor-pre-major": false,
+      "draft": false,
+      "prerelease": false,
+      "skip-github-release": true
+    },
     "packages/kubb": {
       "component": "kubb",
       "changelog-path": "CHANGELOG.md",