feat: refactor

docs/content/1.setup/1.quick-start.md

@@ -33,9 +33,7 @@ export default defineNuxtConfig({
   openFetch: {
     clients: {
       pets: {
-        fetchOptions: {
-          baseURL: 'https://petstore3.swagger.io/api/v3'
-        }
+        baseURL: 'https://petstore3.swagger.io/api/v3'
       }
     }
   }
@@ -56,15 +54,17 @@ nuxt.config.ts
 
 ```vue
 <script setup lang="ts">
-const { data, error } = await usePetsFetch('/pet/{petId}', {
+const { $petsFetch } = useNuxtApp()
+
+const data = await $petsFetch('/pet/{petId}', {
   path: {
     petId
   }
 })
 
 // or
 
-const data = await $petsFetch('/pet/{petId}', {
+const { data, error } = await usePetsFetch('/pet/{petId}', {
   path: {
     petId
   }

docs/content/1.setup/2.configuration.md

@@ -18,10 +18,12 @@ export default defineNuxtConfig({
 | **Key**                      | **Type**   | **Default**           | **Description**                                                                                      |
 | ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
 | `openAPITS`                  | `OpenAPITSOptions`   |                  | OpenAPI TS [options](https://openapi-ts.pages.dev/node/#options)                                                     |
+| `addPlugin`                  | `boolean`   |      `true`            | If enable default plugin to create fetch clients                                                   |
 | **Clients**                  |            |                       |                                                                                                      |
-| `clients`                    | `Record<string, OpenFetchClientOptions>`   | `{}`                  | Configures your OpenAPI clients.                                                                        |
 | `clients.[client]`           | `OpenFetchClientOptions`   |                       | Client options                                                             |
-| `clients.[client].schema`     | `OpenAPI3Schema`   |                       | Local or remote schema file (YAML or JSON)                                                                  |
-| `clients.[client].functionSuffix`      | `string`   |    `'fetch'`                   | Suffix for generated fetch composables/utils ('fetch' -> 'use\[Client\]Fetch').                                                                     |
-| `clients.[client].fetchOptions`      | `OpenFetchOptions`   |                       | Serializable [ofetch](https://github.com/unjs/ofetch) options, except `method` and `params`                                                                   |
+| `clients.[client].baseURL`      | `string`   |       | Base URL for the request.      |
+| `clients.[client].headers`      | `HeadersInit`   |       | Request headers.    |
+| `clients.[client].query`      | `SearchParameters`   |       | Adds query search params to URL   |
+| `clients.[client].schema`     | `OpenAPI3Schema`   |                       | Local or remote schema file (YAML or JSON)                                                  |
+
 

docs/content/1.setup/3.schemas.md

@@ -1,13 +1,14 @@
 # Schemas
 
-By default NuxtOpenFetch will search for OpenAPI schemas in `/openapi/[client]` directory, where `[client]` is the name specified in the Nuxt config (f.e. `pets`):
+By default NuxtOpenFetch searches for OpenAPI schemas in `/openapi/[client]` directory, where `[client]` is the name specified in the Nuxt config (f.e. `pets`):
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   openFetch: {
     clients: {
-      // `$petsFetch`/`usePetsFetch`/`useLazyPetsFetch` will be generated, but without default options
-      pets: {} 
+      pets: {
+        baseURL: 'https://petstore3.swagger.io/api/v3/'
+      } 
     }
   }
 })
@@ -20,7 +21,7 @@ openapi/
 nuxt.config.ts
 ```
 
-You can also manually specify schema for each client using [schema](/setup/configuration) option in Nuxt config.
+You can manually specify schema for each client using [schema](/setup/configuration) option in Nuxt config.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -35,3 +36,28 @@ export default defineNuxtConfig({
   }
 })
 ```
+
+Client can also be configured using `runtimeConfig` or environment variables:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  openFetch: {
+    clients: {
+      pets: {}
+    }
+  },
+  runtimeConfig: {
+    openFetch: {
+      pets: {
+        schema: 'https://petstore3.swagger.io/api/v3/openapi.json',
+        baseURL: 'https://petstore3.swagger.io/api/v3/'
+      },
+    },
+  },
+})
+```
+or:
+```sh
+NUXT_OPEN_FETCH_PETS_SCHEMA=https://petstore3.swagger.io/api/v3/openapi.json
+NUXT_OPEN_FETCH_PETS_BASE_URL=https://petstore3.swagger.io/api/v3/
+```

docs/content/1.setup/4.proxy.md

@@ -9,9 +9,7 @@ export default defineNuxtConfig({
   openFetch: {
     clients: {
       pets: {
-        fetchOptions: {
-          baseURL: '/petsProxy'
-        }
+        baseURL: '/petsProxy'
       }
     }
   },
@@ -39,5 +37,3 @@ export default defineNuxtConfig({
   }
 })
 ```
-
-That's it :) You can use fetch composables/utils as usual, but now all the requests will go to Nuxt server first and then proxied to the target server.

docs/content/3.utils/1.$[client]Fetch.md

@@ -6,6 +6,8 @@ It has the same API as Nuxt's [$fetch](https://nuxt.com/docs/api/utils/dollarfet
 
 ```vue
 <script setup lang="ts">
+const { $petsFetch } = useNuxtApp()
+
 const data = await $petsFetch('/pet/{petId}', {
   path: {
     petId: 12

docs/content/4.advanced/1.custom-plugin.md

@@ -0,0 +1,35 @@
+# Custom plugin
+
+**NuxtOpenFetch** uses Nuxt plugin to provide fetch clients to the app.
+If you need to add non-serializable fetch options which can't be specified in Nuxt config, such as `onRequest`, `onResponse` etc, you can create custom Nuxt plugin.
+
+First you need disable default plugin:
+```ts
+export default defineNuxtConfig({
+  openFetch: {
+    disablePlugin: true,
+    // ...
+  },
+})
+```
+
+For example if you need to add logging on each request:
+```ts
+export default defineNuxtPlugin(() => {
+  const { public: { openFetch: clients }} = useRuntimeConfig()
+
+  return {
+    provide: Object.fromEntries(Object.entries(clients).map(([name, client]) => [
+      `${name}Fetch`,
+      createOpenFetch((options) => ({
+        ...clients.pets,
+        ...options,
+        onRequest(ctx) {
+          console.log('My logging', ctx.request)
+          return options.onRequest?.(ctx)
+        }
+      }))
+    ]))
+  }
+})
+```

docs/content/4.advanced/_dir.yml

@@ -0,0 +1,2 @@
+title: 'Advanced'
+icon: heroicons-outline:bookmark-alt

playground/app.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
-const { execute } = await usePetsFetch('/pet/{petId}', {
+const { execute, data } = await usePetsFetch('/pet/{petId}', {
   path: {
-    petId: 1,
-  }
+    petId: 12,
+  },
+  immediate: false,
 })
-
-// const result = await $petsFetch('/pet', {
-//   method: 'post',
-//   body: {
-//     name: 'david',
-//     photoUrls: ['https://www.baidu.com']
-//   }
-// })
-
 </script>
 
 <template>

playground/nuxt.config.ts

@@ -1,4 +1,19 @@
 export default defineNuxtConfig({
+  modules: ['../src/module'],
   extends: ['./pets'],
-  devtools: { enabled: true }
+  devtools: { enabled: false },
+  openFetch: {
+    clients: {
+      foo: {
+        baseURL: '/petsProxy'
+      },
+    },
+  },
+  runtimeConfig: {
+    openFetch: {
+      pets: {
+        baseURL: '/petsProxy',
+      },
+    },
+  },
 })