\r\n \u003C/label>\r\n \u003Clabel>\r\n Password\r\n \u003Cinput name=\"password\" type=\"password\" value=\"password\" />\r\n \u003C/label>\r\n \u003Cbutton>Log in\u003C/button>\r\n \u003C/form>\r\n \u003Cform method=\"POST\" action=\"api/pespa?logout\">\r\n \u003Cbutton>Log Out\u003C/button>\r\n \u003C/form>\r\n\u003C/template>\r\n```\r\n\r\nHowever here we have to use \"/api\" for the action attribute, and the DX isn't the best for multiple reasons.\r\n\r\nIt would be nice to have a `/actions` directory (in `/server` for nuxt) so that we can define form actions more easily. \r\n(This probably needs a discussion/RFC somewhere so that the Nuxt/Nitro/H3 side can be updated together, let me know if I should repost this somewhere else)\r\n\r\nFor the nitro syntax, the `defineFormAction` I proposed above could be integrated in nitro, as a replacement for defineEventHandler. \r\n\r\nI'm not sure if manually redirecting in the action handler is the best way to do things, perhaps what would need to happen for Nuxt specifically is to generate POST only handlers for these form actions, while these GET methods to the same URL are handled by the corresponding route or nuxt page.\r\n\r\nIf I'm not mistaken, for Nuxt we also need a way to easily pass data back and forth, perhaps the existing ways can be used, but a new composable feels appropriate. \r\n\r\nThere's also a need for something similar to sveltekit [use:enhance / applyAction](https://kit.svelte.dev/docs/form-actions#progressive-enhancement) to make it easier to progressively enhance forms (altough, e.preventDefault() could be enough, the DX is a little barebones)\r\n\r\nHaving something like `getNativeRequest` from H3 would be really useful too: \r\n\r\n```ts\r\neventHandler(event => {\r\nconst request = getNativeRequest(event)\r\nconst data = request.formData()\r\n//do stuff\r\n})\r\n```\r\n*This might need some change in @vue/core, see [React here.](https://github.com/facebook/react/pull/26749)*\r\n\r\n### Proposed API :\r\n\r\nI'm suggesting an API here to illustrate what we could do. \r\n\r\n`pages/signIn.vue`\r\n```vue\r\n\u003Cscript setup> \r\nconst { enhance } = useEnhance(({form, data, action, cancel, submitter }) => {\r\n // Using SvelteKit API to illustrate, but the Nuxt one could/should be different ...\r\n // `form` is the `\u003Cform>` element;`data` is its `FormData` object\r\n // `action` is the URL to which the form is posted;v`cancel()` will prevent the submission\r\n // `submitter` is the `HTMLElement` that caused the form to be submitted\r\n return async ({ result, update }) => {\r\n // `result` is returned by the matching defineFormAction ....\r\n // `update` is a function which triggers the logic that would be triggered if this callback wasn't set\r\n };\r\n})\r\n\r\n// Alternatively something like this, which I personally prefer...\r\nconst { result, loading, error, enhance } = useAction(\"signIn\", (actionSettings) => {\r\n// actions settings could contain form, data, action, cancel ... like in useEnhance\r\n}) \r\n//Can use result/loading/error etc in the template for conditional rendering\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cform method=\"post\" action=\"signIn\" v-enhance=\"enhance\">\r\n \u003Clabel>\r\n Email\r\n \u003Cinput name=\"email\" type=\"email\" value=\"john@doe.com\" />\r\n \u003C/label>\r\n \u003Clabel>\r\n Password\r\n \u003Cinput name=\"password\" type=\"password\" value=\"password\" />\r\n \u003C/label>\r\n \u003Cbutton>Log in\u003C/button>\r\n \u003C/form>\r\n\u003C/template>\r\n```\r\n\r\n`server/signIn.vue`\r\n```ts\r\nexport defineFormAction((event) => {\r\n const request = getNativeRequest(event)\r\n const data = request.formData()\r\n \r\n// signin the User\r\n// Not that we should have a way to return something that works \r\n// well with progressive enhancement to the client,\r\n//Like a JSON payload that can contain data and \"metadata\" (errors, redirects )\r\n// so they can be applied smoothly in CSR. \r\n// A `respondWithFormAction` helper could be added too.\r\nconst result = `This was sent ${JSON.stringify(data)}`\r\nreturn actionResponse(event, { result } )\r\n})\r\n```\r\n\r\nTo recap here : \r\n\r\n- New vue directive for nuxt, `v-enhance` to use on forms to enhance them\r\n- New event handler for Nitro or H3, `defineFormAction`. Could accept a function or an object of functions\r\n- New server directory for Nitro `/server/actions` to define server actions.\r\n- New helpers for H3 `getNativeRequest()` and `actionResponse()` to simplify the action workflow\r\n- New feature for Nuxt, `useAction` or `useEnhance`, to work with actionResponse and v-enhance. \r\n\r\nOverall I feel like this API is respectful of the standard web semantics, and feels vue-ish. Feel free to suggest any improvements for it.\r\n\r\n### Reference from other frameworks : \r\n- [Svelte Form actions](https://kit.svelte.dev/docs/form-actions), [Discussion for semantic form actions](https://github.com/sveltejs/kit/discussions/5875)\r\n- [Solid Start actions](https://start.solidjs.com/core-concepts/actions)\r\n- [Remix Actions](https://remix.run/docs/en/main/route/action)\r\n- [Kent PESPA article](https://www.epicweb.dev/the-webs-next-transition)\r\n- [Next.js Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)\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).",[3023,3026,3029,3032,3035],{"name":3024,"color":3025},"enhancement","8DEF37",{"name":3027,"color":3028},"discussion","538de2",{"name":3030,"color":3031},"dx","C39D69",{"name":3033,"color":3034},"nitro","bfd4f2",{"name":3036,"color":3037},"馃嵃 p2-nice-to-have","0E8A16",20649,"nuxt","open","Form actions for progressive enhancement","2024-06-30T11:08:54Z","https://github.com/nuxt/nuxt/issues/20649",0.77021074,{"labels":3046,"number":3052,"owner":3039,"repository":3039,"state":3053,"title":3054,"updated_at":3055,"url":3056,"score":3057},[3047,3048,3051],{"name":3024,"color":3025},{"name":3049,"color":3050},"3.x","29bc7f",{"name":3033,"color":3034},11470,"closed","Hook into global errors","2023-01-19T15:35:15Z","https://github.com/nuxt/nuxt/issues/11470",0.75823957,{"description":3059,"labels":3060,"number":3067,"owner":3039,"repository":3039,"state":3053,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Version\r\n\r\n[v2.6.2](https://github.com/nuxt.js/releases/tag/v2.6.2)\r\n\r\n### Reproduction link\r\n\r\n[https://jsfiddle.net/abr2nxz7/13/](https://jsfiddle.net/abr2nxz7/13/)\r\n\r\n### Steps to reproduce\r\n\r\nusing \"@nuxtjs/axios\": \"^5.4.1\",\r\n\r\nI call this function with a ref in the parent component.\r\n\r\n```js\r\nasync submit() {\r\nconst { status, data } = await this.$axios.post(\r\n `[my api ult]/post/${this.id}`,\r\n serialize(this.$refs.form)\r\n )\r\n}\r\n```\r\n\r\n### What is expected ?\r\n\r\n1 outgoing call to my API\r\n\r\n### What is actually happening?\r\n\r\n2 outgoing calls and received 2 responses\r\n\r\n\r\n \r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9063\">#c9063\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3061,3064],{"name":3062,"color":3063},"pending triage","E99695",{"name":3065,"color":3066},"2.x","d4c5f9",5548,"this","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5548",0.7608615,{"description":3073,"labels":3074,"number":3077,"owner":3039,"repository":3078,"state":3053,"title":3079,"updated_at":3080,"url":3081,"score":3082},"",[3075],{"name":3024,"color":3076},"1ad6ff",1021,"nuxt.com","[Code] /modules","2022-11-18T14:52:28Z","https://github.com/nuxt/nuxt.com/issues/1021",0.7609365,{"description":3073,"labels":3084,"number":3093,"owner":3039,"repository":3039,"state":3053,"title":3094,"updated_at":3095,"url":3096,"score":3097},[3085,3086,3089,3090],{"name":3024,"color":3025},{"name":3087,"color":3088},"chore","D0F1A9",{"name":3036,"color":3037},{"name":3091,"color":3092},"4.x","3B01A5",26959,"Refreshed NuxtWelcome design (+ other error pages?)","2024-10-19T11:03:49Z","https://github.com/nuxt/nuxt/issues/26959",0.7610749,{"description":3099,"labels":3100,"number":3102,"owner":3039,"repository":3039,"state":3053,"title":3103,"updated_at":3104,"url":3105,"score":3106},"\u003C!--\r\n馃毃 IMPORTANT 馃毃\r\n\r\nPlease use the following link to create a new issue:\r\n\r\n- 馃毃 Bug report - https://bug.nuxtjs.org/ \r\n- 馃檵 Feature request - https://feature.nuxtjs.org/ \r\n- 鉂楋笍 All other issues - https://cmty.nuxtjs.org/ \r\n\r\nIf your issue was not created using the app above, **it will be closed immediately**.\r\n-->\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8166\">#c8166\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3101],{"name":3065,"color":3066},4359,"I get 'Cannot read property 'extend' of undefined' when customize component","2023-01-18T20:06:09Z","https://github.com/nuxt/nuxt/issues/4359",0.7615213,{"description":3073,"labels":3108,"number":3110,"owner":3039,"repository":3078,"state":3053,"title":3111,"updated_at":3112,"url":3113,"score":3114},[3109],{"name":3024,"color":3076},719,"[Community] Guide page should have all three links from `https://v3.nuxtjs.org/community/getting-help`","2023-02-15T12:31:31Z","https://github.com/nuxt/nuxt.com/issues/719",0.7618683,{"description":3116,"labels":3117,"number":3120,"owner":3039,"repository":3039,"state":3053,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://github.com/jovanmaric/nuxt-axios-error](https://github.com/jovanmaric/nuxt-axios-error)\n\n### Steps to reproduce\n\nThe reproduction link contains a generated app with the latest Nuxt and the following setup:\n- Custom error layout page\n- axios module\n- nuxt-i18n module \n- axios plugin which throws an error if 404 or 500 or higher error is returned.\n- Express with /api proxy\n\nTo reproduce you should run `yarn dev` and open the console on chrome. \n\n### What is expected ?\n\nThat the error component is injected instead of the original component, removing all the semantics of the original component. \n\n### What is actually happening?\n\n`Uncaught (in promise) TypeError: Cannot read property '_t' of null` while no code of the original component should be ran. \n\n### Additional comments?\n\nThe above error does not only apply to the `created()` method. Leading me to think that the re-render is retriggered on server side, while this shouldn't be when the error component injects itself instead of the original component. \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8377\">#c8377\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3118,3119],{"name":3062,"color":3063},{"name":3065,"color":3066},4649,"Nuxt error() does not stop execution of previous component","2024-06-30T09:26:25Z","https://github.com/nuxt/nuxt/issues/4649",0.76189566,{"description":3126,"labels":3127,"number":3134,"owner":3039,"repository":3078,"state":3053,"title":3135,"updated_at":3136,"url":3137,"score":3138},"Add the current [Agencies](https://nuxt.com/support/agencies) page",[3128,3131],{"name":3129,"color":3130},"design","00bd6f",{"name":3132,"color":3133},"dev","018415",1346,"Agencies Page","2023-10-10T14:44:54Z","https://github.com/nuxt/nuxt.com/issues/1346",0.7640548,{"description":3073,"labels":3140,"number":3142,"owner":3039,"repository":3078,"state":3053,"title":3143,"updated_at":3144,"url":3145,"score":3146},[3141],{"name":3024,"color":3076},226,"Add project url in `import` form","2022-03-28T14:57:46Z","https://github.com/nuxt/nuxt.com/issues/226",0.7643745,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmz7QLC5ZcebtOpxj0miXpiMsEGQIE5pv1otmg2sPuKo":-1},"/nuxt/nuxt.com/264"]