\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\r\n\r\nAs by default each time you update reactive data that is being used in usefetch - a fetch is called, often one may only want fetch to happen on change after a set amount of time. \r\n\r\nFor example, if you have a todo list per day and have arrows on the top to navigate between the days, you wouldn’t want the fetch to happen every time navigate happens rather only after a set amount of milliseconds which would indicate that user is not just scrolling lists rather wishes to view list/day?\r\n\r\nThoughts?\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).",[2921],{"name":2922,"color":2923},"pending triage","E99695",26686,"[useFetch] add delay for default watch","2024-06-30T11:04:43Z","https://github.com/nuxt/nuxt/issues/26686",0.707038,{"description":2930,"labels":2931,"number":2933,"owner":2874,"repository":2874,"state":2876,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### 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).",[2932],{"name":2922,"color":2923},29788,"`ready` option for `useFetch` to control requests","2024-11-05T06:26:41Z","https://github.com/nuxt/nuxt/issues/29788",0.7154276,{"description":2939,"labels":2940,"number":2941,"owner":2874,"repository":2942,"state":2943,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### What problem does this feature solve?\r\n\r\nThis feature would make testing ability a first class citizen in Nuxt and it's future iterations.\r\n\r\nWhen running component tests on a nuxt project, there is a fair amount of \"extra\" stuff that we currently have to shim on top of vue-test-utils in order to add specs around our components.\r\n\r\n### What does the proposed changes look like?\r\n\r\nThis is more of a policy change but i'm happy to contribute. Currently when a feature is released, there is little consideration on the ability to test the concepts inside of core external testling libraries like 'vue-test-utils' for unit tests. I would love to help that not be the case any more. \r\n\r\nThe current recommendation is mostly to run a full request spec by booting your entire nuxt server and then run a spec against that. That is great for tiny projects or when you want to make sure something really works end to end. On large projects though it would take many minutes to boot which would cause devs to skip writing tests in the real world. \r\n\r\nA great example of this is the very useful `$fetch` utility. In order to use this and have component tests on components, we will have to create a custom $fetch that we attach to a vue prototype that we assert around. It would be much better if we could have something like this from the nuxt repo or a sidecar repo (nuxt-test-utils?)\r\n\r\n```\r\nconst vm = createNuxtInstance()\r\n```\r\n\r\ncreateNuxtInstance could take many options such as\r\n - whether it should include the reflected store (something we have written custom code to do and are happy to contribute)\r\n - whether is should include a router\r\n - etc\r\n\r\nThis would also pave the way for additional hooks so that library authors could provide the ability to hook into this ecosystem in order to attach to the instance in a \"mock\" way\r\n\r\nNuxt hooks\r\n\r\n`test:nuxtInstanceMounted`\r\n`test:nuxtInstanceCreated`\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c10775\">#c10775\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[],456,"test-utils","closed","Nuxt Test Utils","2023-12-02T00:13:11Z","https://github.com/nuxt/test-utils/issues/456",0.45770746,{"labels":2949,"number":2954,"owner":2874,"repository":2874,"state":2943,"title":2955,"updated_at":2956,"url":2957,"score":2958},[2950,2951],{"name":2885,"color":2886},{"name":2952,"color":2953},"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":2960,"number":2961,"owner":2874,"repository":2874,"state":2943,"title":2955,"updated_at":2962,"url":2963,"score":2964},[],12930,"2023-01-19T16:38:28Z","https://github.com/nuxt/nuxt/issues/12930",0.6658119,{"labels":2966,"number":2967,"owner":2874,"repository":2874,"state":2943,"title":2955,"updated_at":2968,"url":2969,"score":2964},[],12972,"2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12972",["Reactive",2971],{},["Set"],["ShallowReactive",2974],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuv_RTVsjyqmYO2E3Wyj0dX7BZ6vu3MERDixwLeMS3f0":-1},"/nuxt/nuxt.com/456"]