\r\n\u003C!-- ... -->\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n\r\nconst page = ref\u003Cnumber>(1)\r\n\r\n// temporary name \"promise\" -- maybe this could replace the \"pending\" boolean in Nuxt 4?\r\nconst { data, promise } = useFetch('/api/my-items', {\r\n query: {\r\n page: page\r\n }\r\n})\r\n\r\nasync function handleFetchMore() {\r\n page.value += 1\r\n // would this work? or would nextTick() need to be awaited before it?\r\n await promise.value\r\n}\r\n\r\n// ...\r\n\r\n\u003C/script>\r\n```\r\n\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).",[2865,2868],{"name":2866,"color":2867},"enhancement","8DEF37",{"name":2869,"color":2870},"discussion","538de2",26678,"nuxt","open","Return the current promise from `useFetch` in a computed ref","2024-06-30T11:04:44Z","https://github.com/nuxt/nuxt/issues/26678",0.6840034,{"description":2879,"labels":2880,"number":2881,"owner":2872,"repository":2882,"state":2873,"title":2883,"updated_at":2884,"url":2885,"score":2886},"Hi there. Is there any way we could add a feature that minifies the CSS generated by this plugin and/or then extracts the code to a single separate CSS file, rather than having it all output in the ```\u003Chead>``` element?\n\nEven with...\n```javascript\nvite: {\n\tbuild: {\n\t\t\tassetsInlineLimit: 0, // default is 4096 (4 KiB); threshold to inline assets as base64 URLs\n\t\t\tcssCodeSplit: false, // if false, all CSS in the entire project will be extracted into a single CSS file\n\t}\n}\n``` \n...in my ```nuxt.config.ts``` file, the icon-related CSS code from this plugin still gets output onto my pages un-minified *and* un-extracted.\n\nThanks. :-)\n",[],327,"icon","Don't force CSS to be inline","2024-12-22T00:14:16Z","https://github.com/nuxt/icon/issues/327",0.6860059,{"description":2888,"labels":2889,"number":2893,"owner":2872,"repository":2894,"state":2873,"title":2895,"updated_at":2896,"url":2897,"score":2898},"When attempting to render a component for a whitebox test, the entire Nuxt environment is being loaded instead of just the component. This behavior is likely caused by the presence of an authentication guard in the project, which leads to redirection to the sign-in page during test execution.\r\n\r\n### Steps to Reproduce\r\nAccess the following StackBlitz link: [Reproduction Test](https://stackblitz.com/edit/nuxt-vitest-ewepwb?file=test%2Ftest.nuxt.spec.ts)\r\n\r\n### Expected Behavior\r\nThe test should only render the targeted component without triggering global route middleware or redirections.\r\n\r\n### Actual Behavior\r\nUpon running the test, the entire Nuxt environment is loaded, including global route middleware, leading to redirection to the sign-in page due to the presence of the authentication guard.\r\n\r\n### Additional Information\r\nNuxt project info: \r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.5.3\r\n- Nitro Version: 2.4.1\r\n- Package Manager: yarn@3.6.0\r\n- Builder: vite\r\n- User Config: alias, app, build, sourcemap, ssr, runtimeConfig, vite, css, modules, components, ignore, dayjs, typescript, experimental, devtools\r\n- Runtime Modules: dayjs-nuxt@1.1.2, nuxt-vitest@0.10.2, @pinia/nuxt@^0.4.11\r\n- Build Modules: -\r\n------------------------------",[2890],{"name":2891,"color":2892},"vitest-environment","b60205",526,"test-utils","Components tests it is triggering global route middleware","2024-12-22T21:23:11Z","https://github.com/nuxt/test-utils/issues/526",0.69549066,{"description":2900,"labels":2901,"number":2905,"owner":2872,"repository":2872,"state":2873,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### 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).",[2902],{"name":2903,"color":2904},"pending triage","E99695",29788,"`ready` option for `useFetch` to control requests","2024-11-05T06:26:41Z","https://github.com/nuxt/nuxt/issues/29788",0.6969565,{"description":2911,"labels":2912,"number":2915,"owner":2872,"repository":2916,"state":2917,"title":2918,"updated_at":2919,"url":2920,"score":2921},"",[2913],{"name":2866,"color":2914},"1ad6ff",611,"nuxt.com","closed","[Resources] Refactor showcases into a composable","2023-02-15T12:32:38Z","https://github.com/nuxt/nuxt.com/issues/611",0.45034403,{"description":2923,"labels":2924,"number":2931,"owner":2872,"repository":2932,"state":2917,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: app, compatibilityDate, sourcemap, devtools, nitro, experimental, runtimeConfig, routeRules, typescript, css, viewport, i18n, icon, hub, devServer, vite, $development, $production, auth, ui, vue, modules\n- Runtime Modules: @nuxtjs/i18n@9.3.1, @nuxt/ui@3.0.0, @pinia/nuxt@0.10.1, nuxt-viewport@2.2.0, @nuxthub/core@0.8.18, nuxt-auth-utils@0.5.16, @nuxt/eslint@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nInstall nuxt ui and i18n module (to switch to current loacale)\n\nin app.vue: \n```vue\ntemplate>\n \u003CUApp \n :toaster=\"{ position: $viewport.isLessThan('md') ? 'bottom-center' : 'top-center' }\"\n :locale=\"locales[locale as 'fr' | 'en']\" class=\"\"\n >\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UApp>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport { fr, en } from '@nuxt/ui/locale';\nconst locales = { fr, en };\nconst { t, locale } = useI18n();\n\u003C/script>\n```\nAnalyze your bundle:\n`npx nuxi analyze`\n\n### Description\n\nAs you can see, unused locales are still included in the bundle, while only Fr and En have been imported\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2925,2928],{"name":2926,"color":2927},"bug","d73a4a",{"name":2929,"color":2930},"v3","49DCB8",3602,"ui","i18n, Unused locales are included in the bundle","2025-03-18T14:19:38Z","https://github.com/nuxt/ui/issues/3602",0.63540703,{"description":2938,"labels":2939,"number":2942,"owner":2872,"repository":2916,"state":2917,"title":2943,"updated_at":2944,"url":2945,"score":2946},"\n",[2940],{"name":2926,"color":2941},"ff281a",522,"Checkboxes broken on dark mode","2022-05-23T15:16:45Z","https://github.com/nuxt/nuxt.com/issues/522",0.67663306,{"description":2948,"labels":2949,"number":2942,"owner":2872,"repository":2894,"state":2917,"title":2954,"updated_at":2955,"url":2956,"score":2946},"Hey I was using `mockNuxtImport` to mock 2 different users from a nuxt composable in the same test file. It seems to use the last `mockNuxtImport` that is called in the file, not the one scoped to the test.\r\n\r\n```ts\r\nit('renders the users email', () => {\r\n\tmockNuxtImport('useSupabaseUser', () => {\r\n\t\treturn () => mockUser\r\n\t})\r\n\r\n\trender(User)\r\n\r\n\texpect(screen.getByText('jdoe@gmail.com')).toBeInTheDocument()\r\n})\r\n\r\nit('renders the Error when there is no user', () => {\r\n\tmockNuxtImport('useSupabaseUser', () => {\r\n\t\treturn () => {}\r\n\t})\r\n\r\n\trender(User)\r\n\r\n\texpect(screen.getByText('Error')).toBeInTheDocument()\r\n})\r\n```\r\n\r\nThe first test fails here as it thinks `useSupabaseUser` returns {}\r\n\r\nI did manage to get this working with a global variable:\r\n\r\n```ts\r\nlet mockUser = { id: 1, name: 'John Doe', email: 'jdoe@gmail.com' }\r\n\r\nmockNuxtImport('useSupabaseUser', () => {\r\n\treturn () => mockUser\r\n})\r\n\r\nit('renders the users email', () => {\r\n\trender(User)\r\n\r\n\texpect(screen.getByText('jdoe@gmail.com')).toBeInTheDocument()\r\n})\r\n\r\nit('renders the Error when there is no user', () => {\r\n\tmockUser = {}\r\n\r\n\trender(User)\r\n\r\n\texpect(screen.getByText('Error')).toBeInTheDocument()\r\n})\r\n```\r\n\r\nNot really sure if this is expected, it seems a little strange to me, so figured I post my findings.",[2950,2953],{"name":2951,"color":2952},"documentation","0075ca",{"name":2891,"color":2892},"Mocking multiple iterations of nuxt imports in the same test file","2024-01-24T12:25:29Z","https://github.com/nuxt/test-utils/issues/522",{"description":2958,"labels":2959,"number":2964,"owner":2872,"repository":2872,"state":2917,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Environment\r\n\r\nNuxt project info: 10:45:42\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.15.1\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.11.0\r\n- Builder: vite\r\n- User Config: pages\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\n```javascript\r\n\u003Cscript setup>\r\n/**\r\n * 请求api接口\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"响应成功数据:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\n### 标题:在 Nuxt 3.0 中,useFetch 的 onResponse 在 onMounted 中无法被执行\r\n\r\n### 描述:\r\n\r\n在我使用 Nuxt 3.0 的 useFetch 功能时,我发现了一个问题。如果我在 onMounted 的生命周期钩子中调用 useFetch,onResponse 似乎无法获取结果,或者说 onResponse 方法没有被执行。然而,如果我直接在 setup 中调用 useFetch,onResponse 就会被执行。这是我的代码:\r\n\r\n```javascript\r\n\u003Cscript setup>\r\n/**\r\n * 请求api接口\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"响应成功数据:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\u003C/script>\r\n```\r\n### 重现步骤:\r\n\r\n1. 创建一个新的 Nuxt 3.0 项目。\r\n2. 在 onMounted 的生命周期钩子中调用 useFetch。\r\n3. 观察控制台,无法看到 \"响应成功数据\" 的日志输出。\r\n\r\n**期望的行为:**\r\nonResponse 在 onMounted 中被正确执行,并在控制台输出 \"响应成功数据\"。\r\n\r\n**实际的行为:**\r\nonResponse 在 onMounted 中没有被执行。\r\n\r\n**环境信息:**\r\nNuxt.js 版本:3.0\r\n浏览器版本:Firefox 116.0.3 (64 位)\r\n操作系统:Windows 11\r\nNode.js 版本:16.15.1\r\n\r\n**附加信息:**\r\n我尝试在 setup 中直接调用 useFetch,这时 onResponse 可以被正确执行。\r\n\r\n\r\n\r\n*****\r\n\r\n\r\n\r\n\r\n### Title: In Nuxt 3.0, useFetch's onResponse is not executed in onMounted\r\n\r\n### Description:\r\n\r\nWhile using the useFetch feature in Nuxt 3.0, I encountered a problem. If I call useFetch in the onMounted lifecycle hook, onResponse seems unable to obtain a result, or in other words, the onResponse method is not executed. However, if I call useFetch directly in setup, onResponse is executed. Here is my code:\r\n\r\n```javascript\r\n\u003Cscript setup>\r\n/**\r\n * Request API interface\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // Processing response data\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"Successful response data:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\u003C/script>\r\n```\r\n### Steps to reproduce:\r\nCreate a new Nuxt 3.0 project.\r\nCall useFetch in the onMounted lifecycle hook.\r\nObserve the console, the \"Successful response data\" log output is not visible.\r\n\r\n### Expected behavior:\r\nonResponse is correctly executed in onMounted, and \"Successful response data\" is output to the console.\r\n\r\n### Actual behavior:\r\nonResponse is not executed in onMounted.\r\n\r\n### Environment Information:\r\nNuxt.js version: 3.0\r\nBrowser version: Firefox 116.0.3 (64-bit)\r\nOperating System: Windows 11\r\nNode.js version: 16.15.1\r\n\r\n### Additional Information:\r\nWhen I try to call useFetch directly in setup, onResponse is correctly executed.\r\n\r\n### Additional context\r\n\r\n完整代码如下(The complete code is as follows):\r\n``` vue\r\n\u003C!-- index.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>欢迎来到我的首页\u003C/h1>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n/**\r\n * 请求api接口\r\n * @returns {Promise\u003Cany>}\r\n */\r\nconst getData = async () => {\r\n const { data, pending, error, refresh } = await useFetch('/api/test', {\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n // localStorage.setItem('token', response._data.token)\r\n console.log(\"响应成功数据:\", response);\r\n }\r\n })\r\n\r\n console.log(\"data:\", data);\r\n}\r\n\r\nonMounted(() => {\r\n getData()\r\n})\r\n\r\n\r\n\u003C/script>\r\n\r\n\u003Cstyle scoped>\u003C/style> \r\n``` \r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2960,2963],{"name":2961,"color":2962},"3.x","29bc7f",{"name":2903,"color":2904},22688,"在 Nuxt 3.0 中,useFetch 的 onResponse 在 onMounted 中无法被执行","2023-12-29T08:03:51Z","https://github.com/nuxt/nuxt/issues/22688",0.67971367,{"description":2970,"labels":2971,"number":2973,"owner":2872,"repository":2872,"state":2917,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.15.4`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-thrqeevv?file=server%2Fapi%2Furi%2Findex.post.ts\n\n### Describe the bug\n\nI noticed an inconsistency in the blocking behavior of `useFetch` when the method is set to `POST`, where if the user is navigating to a page which uses the same component, the data change is rendered before the suspense of the new page resolves.\n\nIn the provided example, I have 2 `useFetch` calls inside `await Promise.all`. The expected behavior would be that the data on the page visually changes only after both of the promises are resolved - just like when you're navigating from `index.vue` to any of the pages in `dynamic/[uri].vue`.\nHowever, this is not the case when going from `dynamic/[uri].vue` to `dynamic/[uri].vue`.\n\nI suppose this is because we don't include the `body` of the request in the hash for the payload key and thus, the key is the same for both the old & the new request, which updates the data that's currently being rendered on the page.\nhttps://github.com/nuxt/nuxt/blob/f6bbb8e87c0d48b5e45d959715b1f119be75635a/packages/nuxt/src/app/composables/fetch.ts#L248\n\nWould this be an ok fix, or can you see any problems with that?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2972],{"name":2903,"color":2904},31428,"Inconsistent blocking behavior of `useFetch` when the method is `POST`","2025-03-24T23:20:41Z","https://github.com/nuxt/nuxt/issues/31428",0.6810978,["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8eSm9KdRbsTs95ldLc3QtQj9zVPog_VCp1asV4jVYIU":-1},"/nuxt/test-utils/611"]