\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003CUInput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",2713,"nuxt","ui","open","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.6894276,{"description":2882,"labels":2883,"number":2890,"owner":2874,"repository":2874,"state":2876,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### Describe the feature\n\nIn Nuxt 2, the `fetch` hook has the `fetchDelay` option:\r\n\r\nhttps://nuxtjs.org/docs/features/data-fetching#changing-fetch-behavior\r\n\u003Cimg width=\"735\" alt=\"image\" src=\"https://user-images.githubusercontent.com/31310132/196170408-35f87184-7f36-477d-89d8-90a7cae6c624.png\">\r\n\r\n\r\nAfter reviewing the documentation and going through GitHub issues, I noticed that Nuxt 3 doesn't have this. \r\nAm I missing something? If not, is it possible to add this feature in the future?\r\n\r\nAnyway, thanks for doing good work! \n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2884,2887],{"name":2885,"color":2886},"enhancement","8DEF37",{"name":2888,"color":2889},"discussion","538de2",15181,"Adding \"fetchDelay\" option to useFetch hook","2024-06-30T11:10:06Z","https://github.com/nuxt/nuxt/issues/15181",0.69143575,{"description":2896,"labels":2897,"number":2900,"owner":2874,"repository":2874,"state":2876,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Describe the feature\r\n\r\n# Description:\r\nThe proposal is to implement request and response interceptors for the `useFetch` composable in Nuxt 3, similar to how Axios interceptors function. These interceptors would allow users to globally manage, modify, or intercept HTTP requests before they are sent and responses before they are handled.\r\n\r\n# Use Case:\r\nIntegrating request and response interceptors within the `useFetch` composable would be highly beneficial for various scenarios. For instance, users could add headers, perform pre-processing or transformations on outgoing requests, log requests or responses, handle errors, or modify responses in a uniform and centralized manner across their application.\r\n\r\n# Expected Behavior:\r\nThe request interceptors would enable users to intercept and modify the outgoing request before it is sent, while the response interceptors would allow users to intercept and modify the response before it is further processed. These interceptors should seamlessly integrate with the existing useFetch functionality, ensuring flexibility and ease of use.\r\n\r\n# Examples or Use Scenarios:\r\n```javascript\r\n// Global request interceptor example\r\nonRequest((config) => {\r\n // Modify the request config before sending\r\n const token = useCookie('token');\r\n config.headers['Authorization'] = `Bearer ${token.value}`\r\n return config\r\n});\r\n\r\n// Global response interceptor example\r\nonResponse((response) => {\r\n // Log the response or modify it before further processing\r\n console.log('Response:', response)\r\n return response\r\n});\r\n```\r\n\r\n# Potential Impact:\r\nThis feature would significantly enhance the flexibility and control for developers using the `useFetch` composable in Nuxt 3. It would streamline the process of globally handling requests and responses, making it easier to manage authentication, logging, error handling, and other common functionalities across the application.\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [X] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2898,2899],{"name":2885,"color":2886},{"name":2888,"color":2889},24157,"add global interceptors for `useFetch` without creating `customUseFetch`","2024-06-30T11:06:59Z","https://github.com/nuxt/nuxt/issues/24157",0.6984756,{"description":2906,"labels":2907,"number":2913,"owner":2874,"repository":2874,"state":2876,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Describe the feature\r\n\r\nI propose to add a new option called `resetAfter` to the `useFetch` composable in Nuxt 3. This option would take a number (in milliseconds) and automatically reset the state of the `useFetch` instance after the specified amount of time has passed since the last fetch.\r\n\r\nThis `resetAfter` mainly will set the `status` back to `idle` after the given milliseconds.\r\n\r\nThis feature is particularly useful when you need to fetch data not immediately, but after a certain delay, and possibly several times during the lifecycle of a component. By automatically resetting the state, it reduces the need for manual state management, making it easier to work with time-dependent fetch operations.\r\n\r\n#### Suggested changes:\r\n- Add a new `resetAfter` parameter to the `useFetch` composable.\r\n- Automatically clear and reset the state after the specified milliseconds.\r\n- Optionally allow the reset timer to restart on each new fetch.\r\n\r\n### Example use case\r\nHere's an example of a Vue 3 component using the `resetAfter` option:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>Data: {{ data }}\u003C/p>\r\n \u003Cp>Error: {{ error }}\u003C/p>\r\n \u003Cp>Status: {{ pending ? 'Loading...' : 'Fetched' }}\u003C/p>\r\n \u003Cbutton @click=\"refetch\">Refetch Data\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { ref } from 'vue'\r\nimport { useFetch } from '#imports'\r\n\r\nconst url = ref('https://api.example.com/data')\r\nconst { data, error, pending, refresh } = useFetch(url, {\r\n resetAfter: 5000, // Reset state 5 seconds after the last fetch\r\n lazy: true,\r\n immediate: false\r\n})\r\n\r\nconst refetch = () => {\r\n refresh()\r\n}\r\n\u003C/script>\r\n```\r\n\r\nIn this example, the data is automatically reset after 5 seconds, making the component ready for a new fetch if required.\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2908,2909,2910],{"name":2885,"color":2886},{"name":2888,"color":2889},{"name":2911,"color":2912},"workaround available","11376d",28792,"Add a `resetAfter` option to `useFetch` to automatically reset the state after a specified time.","2024-09-03T13:43:57Z","https://github.com/nuxt/nuxt/issues/28792",0.7053361,{"description":2919,"labels":2920,"number":2924,"owner":2874,"repository":2874,"state":2876,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the feature\n\n```ts\nconst id = ref()\nuseFetch('/api/test', {\n query: {\n id\n },\n ready: () => !!id.value\n})\n```\n\n```ts\ninterface Options {\n /** default `() => true` */\n ready: () => boolean\n // or\n // ready: MaybeRefOrGetter\u003Cboolean>\n}\n```\n\n Whenever the handler is executed, if ready is false, prevent the execution of handler.\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2921],{"name":2922,"color":2923},"pending triage","E99695",29788,"`ready` option for `useFetch` to control requests","2024-11-05T06:26:41Z","https://github.com/nuxt/nuxt/issues/29788",0.7154276,{"description":2930,"labels":2931,"number":2934,"owner":2874,"repository":2935,"state":2936,"title":2937,"updated_at":2938,"url":2939,"score":2940},"If `https://modules.nuxtjs.org/api/modules` does not respond (happened yesterday evening), `useModules -> fetch` fails. And if it fails, being called at the root of `app.vue` makes the whole app to crash.\n\nWe should at least try/catch it.",[2932],{"name":2868,"color":2933},"ff281a",456,"nuxt.com","closed","`fetchModules` call should be protected to avoid the whole app to crash","2022-05-06T11:01:34Z","https://github.com/nuxt/nuxt.com/issues/456",0.45770746,{"labels":2942,"number":2947,"owner":2874,"repository":2874,"state":2936,"title":2948,"updated_at":2949,"url":2950,"score":2951},[2943,2944],{"name":2885,"color":2886},{"name":2945,"color":2946},"3.x","29bc7f",12787,"Pass `useFetch` options to underlying `$fetch`","2023-01-19T16:40:10Z","https://github.com/nuxt/nuxt/issues/12787",0.6448657,{"labels":2953,"number":2954,"owner":2874,"repository":2874,"state":2936,"title":2948,"updated_at":2955,"url":2956,"score":2957},[],12930,"2023-01-19T16:38:28Z","https://github.com/nuxt/nuxt/issues/12930",0.6658119,{"labels":2959,"number":2960,"owner":2874,"repository":2874,"state":2936,"title":2948,"updated_at":2961,"url":2962,"score":2957},[],12972,"2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12972",{"description":2964,"labels":2965,"number":2968,"owner":2874,"repository":2874,"state":2936,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Describe the feature\n\n## The problem\r\n\r\nUses that need to use interceptors or anything else on `useFetch()` require to:\r\n\r\na. Create a new composable `useCustomFetch()` with the new functionality.\r\nb. Create a new compasable with `$fetch` and add the new functionality with the old.\r\nc. Modify the `useFetch()` on each call in every part of the application.\r\n\r\nAll of these scenarios could be fixed by offering the user a way to modify the `useFetch()` function _before_ its given into userland. \r\n\r\n## Solution\r\n\r\nThis could be accomplished easily by allowing the user to _replace_ the `useFetch()` composable with it' own and receive the original object. Each callback registered would be executed without order guarantee.\r\n\r\n```js\r\n// /composables/useFetch.js\r\n\r\nexport default () => {\r\n return useFetch().global(fetch => {\r\n // ...\r\n })\r\n}\r\n```\r\n\r\nThis approach fixes four things:\r\n\r\n- Doesn't replaces `useFetch()`, it extends it.\r\n- Users that already use `useFetch.js` can still use it as always.\r\n- Users that already use `useCustomFetch.js` can still use it as always.\r\n- Remove the `WARN Duplicated imports \"useFetch\", the one from \"#app\" has been ignored`\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2966,2967],{"name":2945,"color":2946},{"name":2922,"color":2923},22778,"Allow to modify global useFetch","2023-08-24T08:25:40Z","https://github.com/nuxt/nuxt/issues/22778",0.69828874,["Reactive",2974],{},["Set"],["ShallowReactive",2977],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_rZec-Oq0HaWkavyjLSoLjo__8jboJa77mJmkAmxiRU":-1},"/nuxt/test-utils/456"]