\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```",[2875,2878],{"name":2876,"color":2877},"bug","d73a4a",{"name":2879,"color":2880},"triage","ffffff",2713,"ui","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.7737144,{"description":2888,"labels":2889,"number":2899,"owner":2866,"repository":2866,"state":2867,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Describe the feature\n\nA smart wrapper around `useAsyncData`. We automatically handle the page key bit, routing, etc. data would be located in `nuxtApp.payload.data[kebabCase(route.path)][key]`\n\nuseful for data that needs to update/refresh on page transition, but we need to keep unique.... we could even pass the page/route to the fetching function:\n\n```ts\nconst { data } = useAsyncRouteData(route => {\n // use route.path here\n})\n```\n\nthe data would automatically be keyed to `route.path`, and we could have a validate function to automatically throw a 404.\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).",[2890,2893,2896],{"name":2891,"color":2892},"enhancement","8DEF37",{"name":2894,"color":2895},"discussion","538de2",{"name":2897,"color":2898},"🍰 p2-nice-to-have","0E8A16",31556,"`useAsyncRouteData`","2025-03-27T14:16:44Z","https://github.com/nuxt/nuxt/issues/31556",0.77521574,{"description":2905,"labels":2906,"number":2909,"owner":2866,"repository":2866,"state":2867,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Describe the feature\r\n\r\nNow that I think I understand composables better, especially useFetch, I see myself using it everytime I communicate to my api. Even when posting a form, because I like the out of the box reactive properties it provides.\r\n\r\nAnd now that Nuxt 3.11 adds `clear()` I feel its complete.\r\n\r\nI often end up doing this:\r\n\r\n```js\r\nconst formData = reactive({\r\n firstName: 'Peter',\r\n lastName: 'Griffin',\r\n ...\r\n});\r\n\r\nconst { status, execute: submit, clear, error } = useFetch('...', {\r\n watch: false,\r\n immediate: false,\r\n \r\n body: formData,\r\n method: 'POST',\r\n});\r\n\r\nonBeforeMount(clear); // maybe theres an even better way to automatically clear things up?\r\n```\r\n\r\nI propose to add a new composable, analog to `useLazyFetch`.\r\n\r\nIt could be named `useManualFetch`, `usePostFetch` (`usePost`?) or `useSubmitFetch` (`useSubmit`?)\r\n\r\nAnd it could be used like this:\r\n\r\n```\r\nconst formData = reactive({ ... });\r\nconst { status, error, execute: submit } = useSubmit('...', formData);\r\n```\r\n\r\nMaybe `lazy: true` and `server: false` is also a good default here? I'm not at all familiar enough with SSR and nitro at this point–\r\n\r\nI know I could make (and have made) that composable myself, but I think this is a good thing to offer out of the box to everybody.\r\n\r\nWhat do you think?\r\n\r\n### Additional information\r\n\r\n- [X] 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).",[2907,2908],{"name":2891,"color":2892},{"name":2894,"color":2895},26306,"adding useManualFetch / usePostFetch / useSubmitFetch composable","2024-06-30T11:05:09Z","https://github.com/nuxt/nuxt/issues/26306",0.7760836,{"description":2915,"labels":2916,"number":2919,"owner":2866,"repository":2920,"state":2921,"title":2922,"updated_at":2923,"url":2924,"score":2925},"Blocked by #293 \n\nMedia files \"data\" (content and dimensions) are stored via `useState` and never cleared.\nEnsure that behavior does not cause issues or fix it, in case we save a media file \"data\" for a specific path then later a completely different file with the same path exists.\n\nUsecase:\n`public/foo.png` exists => fetch and save data for this path.\nrename `public/foo.png` to `public/bar.png` => fetch and save data for this path.\ncreate a new file `public/foo.png` => this new file should have old data and will not refresh it",[2917],{"name":2891,"color":2918},"1ad6ff",311,"nuxt.com","closed","Manage `medias` when doing actions on files","2023-02-15T12:32:07Z","https://github.com/nuxt/nuxt.com/issues/311",0.47089803,{"description":2927,"labels":2928,"number":2930,"owner":2866,"repository":2920,"state":2921,"title":2931,"updated_at":2932,"url":2933,"score":2934},"Keep landing pages, but subnavbar links should go to respective documentation websites for:\n\n- [ ] Framework `v2`\n- [ ] Framework `v3`\n- [ ] Content",[2929],{"name":2891,"color":2918},539,"[Docs] Remove `.md` files and link to external websites","2022-05-20T17:04:15Z","https://github.com/nuxt/nuxt.com/issues/539",0.75995886,{"description":2936,"labels":2937,"number":2930,"owner":2866,"repository":2947,"state":2921,"title":2948,"updated_at":2949,"url":2950,"score":2934},"Hi 👋 \r\n\r\nWe're experiencing issues with Nuxt plugins that utilize `vueApp.provide()` to inject values. Consuming those injected values in components works fine when using the dev server. However when testing with `nuxt-vitest` these values are not set.\r\n\r\nWe've tried to pass the nuxtApp.vueApp as `localVue` in the `mountSuspended()` options but this seems to have no effect.\r\n\r\nI've created a failing test case for this [here](https://github.com/oskarols/nuxt-vitest/tree/test-app-injection) ([diff](https://github.com/danielroe/nuxt-vitest/compare/main...oskarols:nuxt-vitest:test-app-injection?expand=1))\r\n\r\nThe new component for the test case should look like this:\r\n\r\n\r\n\r\nBut in tests the content (which is the injected value) is empty.",[2938,2941,2944],{"name":2939,"color":2940},"documentation","0075ca",{"name":2942,"color":2943},"vitest-environment","b60205",{"name":2945,"color":2946},"pending triage","5D08F5","test-utils","Vue provide/inject is not testable in components","2023-12-19T16:00:34Z","https://github.com/nuxt/test-utils/issues/539",{"description":2952,"labels":2953,"number":2954,"owner":2866,"repository":2866,"state":2921,"title":2955,"updated_at":2956,"url":2957,"score":2958},"**Summary (generated)**:\n\n\"I want to request server data in real-time, and I don't want the request to be cached. I've tried adding a timestamp as the key in the request, but it didn't work. Can you help me find a solution?\"\n\n\u003Chr>\n\nAfter entering the page and completing the request, refreshing the page will not re-issue the request. My demand is to obtain the server data in real time, so I do not want to go to the cache. I have tried to add a time stamp as the key in the request, but my demand is still not met, please help me solve it, thank you very much",[],27879,"How to solve the issue where data fetched using useFetch isn't requested again after refreshing the page, you can achieve this by using React Query or by using useLayoutEffect in combination with useState and useEffect.","2024-06-28T06:07:56Z","https://github.com/nuxt/nuxt/issues/27879",0.76493496,{"description":2960,"labels":2961,"number":2963,"owner":2866,"repository":2882,"state":2921,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.15.0\n- Nuxt Version: 3.12.4\n- CLI Version: 3.12.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@1.22.19\n- Builder: -\n- User Config: extends, uiPro, typescript, colorMode, runtimeConfig, imports, app, compatibilityDate\n- Runtime Modules: -\n- Build Modules: -\n\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ucgnmg?file=app.vue\n\n### Description\n\nUSelectMenu throws regex error while filtering special chars, the select stops filtering, but in the console it throws the following error:\nDaS55lpH.js:14 SyntaxError: Invalid regular expression: /(/i: Unterminated group (at DaS55lpH.js:39:107506)\n at new RegExp (\u003Canonymous>)\n at DaS55lpH.js:39:107506\n at Array.some (\u003Canonymous>)\n at DaS55lpH.js:39:107428\n at u (DaS55lpH.js:10:7546)\n at Array.filter (\u003Canonymous>)\n at Do (DaS55lpH.js:10:7636)\n at Proxy.filter (DaS55lpH.js:10:6121)\n at xz.fn (DaS55lpH.js:39:107324)\n at DC (DaS55lpH.js:10:3093)\n\nIt is reproducable even on official documentation.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2962],{"name":2876,"color":2877},2308,"[USelectMenu] regex error on filtering special characters (.,)","2024-10-10T15:51:47Z","https://github.com/nuxt/ui/issues/2308",0.7697671,{"description":2969,"labels":2970,"number":2974,"owner":2866,"repository":2866,"state":2921,"title":2975,"updated_at":2976,"url":2977,"score":2978},"I've got an issue where I'm setting some data with asyncData, I then update that data, then I change page and the data reverts.\r\n\r\nSo basically I call another function from asyncData in a page component like this:\r\n```js\r\nasyncData (context) {\r\n return ApiPage.getPage(context, context.params.page, 'pages', 'page')\r\n}\r\n```\r\n\r\nThen the file with that function is this (_ApiPage.js):\r\n```js\r\nconst masterData = {\r\n body: '',\r\n form: null,\r\n formData: null,\r\n hasChildren: false,\r\n header: '',\r\n id: '',\r\n label: '',\r\n name: '',\r\n sideMenu: [],\r\n subLabel: '',\r\n subHeader: null\r\n}\r\n\r\nconst AxiosError = function (status, message) {\r\n return {\r\n response: {\r\n status: status,\r\n data: {\r\n message: message\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport default {\r\n mixins: {\r\n methods: {\r\n reloadSideMenu () {\r\n if (this.slug !== '' && this.hasChildren) {\r\n this.$axios.get(this.$store.getters.getApiUrl('menus/home/' + this.slug))\r\n .then((res) => {\r\n this.sideMenu = res.data\r\n })\r\n }\r\n }\r\n }\r\n },\r\n getPage ({ error, store, app }, slug, patchUrlPrefix, cmsKey) {\r\n return app.$axios.get(slug)\r\n .then((res) => {\r\n if (res.statusCode) {\r\n throw new AxiosError(res.statusCode, res.message)\r\n }\r\n if (typeof res.data !== 'object' || !res.data.id) {\r\n throw new AxiosError(404, '')\r\n }\r\n let newData = Object.assign({\r\n slug: slug\r\n }, masterData, res.data)\r\n if (store.getters.getAuthUser() && store.getters.hasRole('ROLE_ADMIN')) {\r\n newData.patchUrl = store.getters.getApiUrl(patchUrlPrefix + '/' + res.data.id)\r\n store.commit('cms/initEndpoint', {\r\n endpoint: newData.patchUrl,\r\n initKey: cmsKey\r\n })\r\n }\r\n // Set whether any further requests are now needed\r\n let loadSideMenu = newData.slug !== '' && newData.hasChildren\r\n let loadForm = newData.form\r\n if (!loadSideMenu && !loadForm) {\r\n return newData\r\n }\r\n // Setup extra requests\r\n let requests = []\r\n let loadPaths = {\r\n form: store.getters.getApiUrl('form/' + slug),\r\n sideMenu: store.getters.getApiUrl('menus/home/' + slug)\r\n }\r\n if (loadForm) {\r\n requests.push(app.$axios.get(loadPaths.form))\r\n }\r\n if (loadSideMenu) {\r\n requests.push(app.$axios.get(loadPaths.sideMenu))\r\n }\r\n // Process sub-requests\r\n return Promise.all(requests)\r\n .then((allRes) => {\r\n for (const res of allRes) {\r\n switch (res.config.url) {\r\n case loadPaths.form:\r\n newData = Object.assign(newData, {\r\n formData: Object.assign(\r\n {},\r\n {\r\n lastModified: res.headers['last-modified']\r\n },\r\n res.data\r\n )\r\n })\r\n break\r\n case loadPaths.sideMenu:\r\n newData = Object.assign(newData, {\r\n sideMenu: res.data\r\n })\r\n break\r\n }\r\n }\r\n return newData\r\n })\r\n .catch((err) => {\r\n error({\r\n statusCode: err.response.status,\r\n message: 'The page\\'s dependencies could not be loaded'\r\n })\r\n })\r\n })\r\n .catch((err) => {\r\n if (err.response) {\r\n error({\r\n statusCode: err.response.status,\r\n message: (err.response.status === 404 ? 'Page could not be found' : err.response.data.message)\r\n })\r\n } else {\r\n if (typeof err === 'string') {\r\n error({\r\n statusCode: 500,\r\n message: err\r\n })\r\n } else {\r\n error({\r\n statusCode: 500,\r\n message: 'An error occurred'\r\n })\r\n }\r\n }\r\n })\r\n }\r\n}\r\n```\r\n\r\nSo I load data and populate `sideMenu`. When I update some pages, the title will affect the URL that needs to be in the menu. So I refresh the menu with the `reloadSideMenu` method - so far so good.\r\n\r\nI then go to another page which using the `_ApiPage.js` file. The sideMenu variable then reverts to the original state that asyncData had set for the page. I've tried logging to the console, and nowhere in my scripts where I set that variable is being reached.\r\n\r\nAny ideas?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c996\">#c996\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2971],{"name":2972,"color":2973},"2.x","d4c5f9",1134,"asyncData reverting after data modified","2023-01-18T15:40:52Z","https://github.com/nuxt/nuxt/issues/1134",0.77028495,["Reactive",2980],{},["Set"],["ShallowReactive",2983],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fHYI21rmDxg0O8IZfRJUKkH7rm7r2yNMgbhyIK3GsK80":-1},"/nuxt/test-utils/311"]