\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```",[2919,2920],{"name":2857,"color":2858},{"name":2921,"color":2922},"triage","ffffff",2713,"UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.74278367,{"description":2929,"labels":2930,"number":2931,"owner":2860,"repository":2860,"state":2862,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Describe the feature\n\nWhen `useFetch` re-fetches (e.g. after a watched state changes), `data` is reset to `null` during the fetch. That causes visible flickering or full UI resets, even when only minor changes happen like pagination or filters.\n\nIn many apps, it's more useful to keep the previous data visible while the new request is in progress.\n\n## Suggested API\n\n```javascript\nconst { data } = await useFetch(\"/api/items\", {\n query: {\n 'page': page\n },\n watch: [page],\n preservePreviousData: true\n});\n```\nWhen preservePreviousData is true, data should hold the last successful value during the next fetch until the new result arrives.\n\n## Current workaround\n\nRight now, we have to manually store the previous data in a separate `ref` using `watch`, and use a `computed` to fall back to it when the current `data` is `null`. This adds boilerplate for a fairly common use case.\n\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).",[],31999,"[useFetch] Option to preserve previous data during refresh","2025-05-15T11:09:43Z","https://github.com/nuxt/nuxt/issues/31999",0.74478525,{"description":2937,"labels":2938,"number":2942,"owner":2860,"repository":2943,"state":2944,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: modules, devtools\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/test-utils/module@3.10.0\r\n- Build Modules: -\n\n### Reproduction\n\n[Minimal reproduction](https://stackblitz.com/edit/github-ftohct?file=app.nuxt.test.ts)\n\n### Describe the bug\n\nHi all! Do I understand correctly that on the current version of `@nuxt/test-utils` there is no way to pre-fill a store using this instruction from the [Pinia](https://pinia.vuejs.org/cookbook/testing.html#Initial-State) documentation.\r\n\r\n```\r\nimport { describe, test, expect, vi } from 'vitest';\r\nimport { createTestingPinia } from '@pinia/testing';\r\nimport { mountSuspended } from '@nuxt/test-utils/runtime';\r\nimport App from './app.vue';\r\n\r\nconst siteInfoMock = {\r\n title: 'Nuxt 3',\r\n url: 'https://nuxt.com',\r\n};\r\n\r\ndescribe('App link', async () => {\r\n const wrapper = await mountSuspended(App, {\r\n global: {\r\n plugins: [\r\n createTestingPinia({\r\n initialState: {\r\n Site: {\r\n siteInfo: siteInfoMock,\r\n },\r\n },\r\n createSpy: vi.fn,\r\n }),\r\n ],\r\n },\r\n });\r\n\r\n test('Should render the link with a substitute title', () => {\r\n expect(wrapper.get('[data-test-id=\"link\"]').text()).toBe(\r\n siteInfoMock.title\r\n );\r\n\r\n // The test passes because the data in the \"Site\" store has not been changed.\r\n // expect(wrapper.get('[data-test-id=\"link\"]').text()).toBe('Example.com');\r\n });\r\n\r\n test('Should render the link with the spoofed link', () => {\r\n expect(wrapper.get('[data-test-id=\"link\"]').attributes().href).toBe(\r\n siteInfoMock.url\r\n );\r\n\r\n // The test passes because the data in the \"Site\" store has not been changed.\r\n // expect(wrapper.get('[data-test-id=\"link\"]').attributes().href).toBe('https://example.com');\r\n });\r\n});\r\n```\r\nThe component is also rendered, receiving default data from the store. In turn, I expect replacement data in the store.\r\n\r\nI tried to look for information about a similar case in local chats and here in different threads, but I just didn’t receive any information. Several users have raised a similar issue.\r\n\r\n* https://discordapp.com/channels/473401852243869706/1199858451833168004/1199858605831241820\r\n* https://discordapp.com/channels/473401852243869706/496371343542059011/1195669478403489862\r\n* https://discordapp.com/channels/473401852243869706/496371343542059011/1153407426087886942\r\n\r\nIt seems like `@pinia/nuxt` & `@nuxt/test-utils` are not fully compatible, namely the `createTestingPinia` & `mountSuspended` methods.\r\n\r\nPlease tell me, someone was able to solve the problem of how to create a test instance of Pinia.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nstdout | createSuspenseBoundary (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1439:43)\r\n\u003CSuspense> is an experimental feature and its API will likely change.\r\n\r\nstderr | warn$1 (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:46:13)\r\n[Vue warn]: App already provides property with key \"Symbol(pinia)\". It will be overwritten with the new value.\n```\n",[2939],{"name":2940,"color":2941},"pending triage","5D08F5",737,"test-utils","closed","mountSuspended & createTestingPinia","2024-11-28T08:58:33Z","https://github.com/nuxt/test-utils/issues/737",0.6752058,{"description":2950,"labels":2951,"number":2952,"owner":2860,"repository":2953,"state":2944,"title":2954,"updated_at":2955,"url":2956,"score":2957},"Hi, \r\n\r\nWe just replaced nuxt-icon with the new @nuxt/icon and our build time went from around 150 seconds to 450 seconds.\r\nThe increased delay appears to be from the prerendering phase, please see differences below.\r\n\r\nBefore:\r\n\r\n```\r\n(...)\r\nServer built in 20910ms\r\n[nitro] ℹ Initializing prerenderer\r\n[nitro] ℹ Prerendering 1 routes\r\n[nitro] ├─ /api/_content/cache.1720712707379.json (2480ms)\r\n[nitro] ℹ Prerendered 1 routes in 37.293 seconds\r\n[nitro] ✔ Generated public .output/public\r\n[nitro] ℹ Building Nuxt Nitro server (preset: node-server)\r\n[nitro] ✔ Nuxt Nitro server built\r\n ├─ .output/server/chunks/_/empty.mjs (161 B) (151 B gzip)\r\n ├─ .output/server/chunks/_/empty.mjs.map (173 B) (145 B gzip)\r\n ├─ .output/server/chunks/_/error-500.mjs (4.83 kB) (2.05 kB gzip)\r\n ├─ .output/server/chunks/_/error-500.mjs.map (190 B) (157 B gzip)\r\n ├─ .output/server/chunks/_/node.mjs (176 B) (156 B gzip)\r\n ├─ .output/server/chunks/_/node.mjs.map (216 B) (170 B gzip)\r\n ├─ .output/server/chunks/_/node2.mjs (169 B) (152 B gzip)\r\n ├─ .output/server/chunks/_/node2.mjs.map (210 B) (167 B gzip)\r\n ├─ .output/server/chunks/_/pure.mjs (2.06 kB) (903 B gzip)\r\n ├─ .output/server/chunks/_/pure.mjs.map (178 B) (150 B gzip)\r\n ├─ .output/server/chunks/_/renderer.mjs (14.8 kB) (4.32 kB gzip)\r\n ├─ .output/server/chunks/_/renderer.mjs.map (1.37 kB) (305 B gzip)\r\n(...)\r\n```\r\n\r\nAfter:\r\n\r\n```\r\n(...)\r\nServer built in 21261ms\r\n[nitro] ℹ Initializing prerenderer\r\n[nitro] ℹ Prerendering 1 routes\r\n[nitro] ├─ /api/_content/cache.1721052129200.json (3168ms)\r\n[nitro] ℹ Prerendered 1 routes in 204.492 seconds\r\n[nitro] ✔ Generated public .output/public\r\n[nitro] ℹ Building Nuxt Nitro server (preset: node-server)\r\n[nitro] ✔ Nuxt Nitro server built\r\n ├─ .output/server/chunks/_/empty.mjs (161 B) (151 B gzip)\r\n ├─ .output/server/chunks/_/empty.mjs.map (173 B) (145 B gzip)\r\n ├─ .output/server/chunks/_/error-500.mjs (4.83 kB) (2.05 kB gzip)\r\n ├─ .output/server/chunks/_/error-500.mjs.map (190 B) (157 B gzip)\r\n ├─ .output/server/chunks/_/icons.mjs (983 kB) (251 kB gzip)\r\n ├─ .output/server/chunks/_/icons.mjs.map (7.35 kB) (118 B gzip)\r\n ├─ .output/server/chunks/_/icons2.mjs (7.25 MB) (2.65 MB gzip)\r\n ├─ .output/server/chunks/_/icons2.mjs.map (8.74 kB) (121 B gzip)\r\n ├─ .output/server/chunks/_/icons3.mjs (893 kB) (218 kB gzip)\r\n ├─ .output/server/chunks/_/icons3.mjs.map (8.83 kB) (121 B gzip)\r\n ├─ .output/server/chunks/_/icons4.mjs (1.76 MB) (275 kB gzip)\r\n ├─ .output/server/chunks/_/icons4.mjs.map (16.9 kB) (129 B gzip)\r\n ├─ .output/server/chunks/_/index_bg.mjs (1.06 MB) (435 kB gzip)\r\n ├─ .output/server/chunks/_/index_bg.mjs.map (110 B) (103 B gzip)\r\n ├─ .output/server/chunks/_/node.mjs (176 B) (156 B gzip)\r\n ├─ .output/server/chunks/_/node.mjs.map (216 B) (170 B gzip)\r\n ├─ .output/server/chunks/_/node2.mjs (169 B) (152 B gzip)\r\n ├─ .output/server/chunks/_/node2.mjs.map (210 B) (167 B gzip)\r\n ├─ .output/server/chunks/_/pure.mjs (2.06 kB) (903 B gzip)\r\n ├─ .output/server/chunks/_/pure.mjs.map (178 B) (150 B gzip)\r\n ├─ .output/server/chunks/_/renderer.mjs (14.8 kB) (4.3 kB gzip)\r\n ├─ .output/server/chunks/_/renderer.mjs.map (1.27 kB) (287 B gzip)\r\n(...)\r\n```\r\n\r\nNote the very large IconsX.mjs files with the new module (I'm assuming it's caching the icons locally maybe?)\r\n\r\nBut what we find very strange is that the delay is apparently when pre-rendering the endpoint from nuxt-content that went from 37 to 204 seconds (!)\r\n\r\nAny ideas why this can be happening or how we can speed this up?\r\n\r\nThank you, cheers.\r\n\r\n",[],203,"icon","@nuxt/icon greatly increases build prerender time vs nuxt-icon","2024-07-18T22:45:11Z","https://github.com/nuxt/icon/issues/203",0.70257574,{"description":2959,"labels":2960,"number":2963,"owner":2860,"repository":2860,"state":2944,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-ftrxnd?file=pages%2Ffetch.vue\r\n\r\n### Describe the bug\r\n\r\nWhile playing around using `useRouteQuery` composable fromVueUse library, I have noticed different behaviour watching the `ref` retrieved from `useRouteQuery` when using it with `useFetch` vs `useAsyncData`.\r\nWhenever `useAsyncData` is used to call the API and `ref` from `useRouteQuery` is listed inside `watch` array, API is being called only once whenever ref value changes. As expected.\r\nBut it is different with `useFetch`, where whenever `ref` value updates, there are two API calls made where one is cancelled by dedupe.\r\n\r\nI have prepared reproduction with two different pages, each for different implementation where behaviour can be observed.\r\nI would assume it has to do with `ref` being updated twice because URL query sync, but I am not sure why it differs.\r\n\r\nAlso I am aware of https://github.com/nuxt/nuxt/issues/24788 but trying to use vueuse implementation as of now.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2961],{"name":2940,"color":2962},"E99695",25852,"`useAsyncData` watch vs `useFetch` watch with `useRouteQuery` ref","2025-04-02T12:46:45Z","https://github.com/nuxt/nuxt/issues/25852",0.70313317,["Reactive",2969],{},["Set"],["ShallowReactive",2972],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fc6rrkmi38YOtPpa8pUqAO0XOD2quD-XpjpZ9hInEoh4":-1},"/nuxt/icon/189"]