\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).",[3179,3180,3183,3186,3189],{"name":3152,"color":3153},{"name":3181,"color":3182},"discussion","538de2",{"name":3184,"color":3185},"dx","C39D69",{"name":3187,"color":3188},"nitro","bfd4f2",{"name":3158,"color":3159},20649,"Form actions for progressive enhancement","2024-06-30T11:08:54Z","https://github.com/nuxt/nuxt/issues/20649",0.7639687,{"description":3196,"labels":3197,"number":3201,"owner":3161,"repository":3161,"state":3202,"title":3203,"updated_at":3204,"url":3205,"score":3206},"\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- 🤔 Help wanted - https://otechie.com/nuxt \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🚨 注意事项 🚨\r\n\r\n请务必使用下述链接来创建 issue:\r\n\r\n- 🚨 Bug 提交 - https://bug.nuxtjs.org/ \r\n- 🙋 新功能提案 - https://feature.nuxtjs.org/ \r\n- 🤔 寻求帮助 - https://otechie.com/nuxt \r\n- ❗️ 其他问题 - https://cmty.nuxtjs.org/ \r\n\r\n如果 issue 不是通过上述链接进行创建, **该 issue 会被系统自动关闭**\r\n-->\r\n\r\nHow can I implement generic store which can be reusable? for example:\r\n\r\ninterface BaseState {\r\nlist: []\r\n}\r\n\r\ninterface ChildState extends BaseState {}\r\n\r\nexport default class BaseActions\u003CBaseState> implements ActionTree\u003CBaseState, BaseState>{\r\nadd(context:ActionContext, payload:BaseState){\r\ncontext.commit('ADD', palyload)\r\n}\r\n}\r\n\r\nexport default class ChildActions extends BaseAction\u003CChildState>{\r\n.. need to add actions only if one not available in parent class\r\n}\r\n\r\nor if can I create generic store which contains all (actions, mutations, getters, state)\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/c9337\">#c9337\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3198],{"name":3199,"color":3200},"2.x","d4c5f9",5908,"closed","Re-usability of vuex store using typescript ","2023-01-18T20:25:39Z","https://github.com/nuxt/nuxt/issues/5908",0.72973704,{"description":3208,"labels":3209,"number":3218,"owner":3161,"repository":3219,"state":3202,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Description\n\nI'm basically trying to display the week day full name in the Calendar header slot.\n\nInstead of having `S - M - T - W - T - F -S` as week day headers, I'd like to show `Sunday - Monday - Tuesday - Wednesday - ...`\n\nThe `#week-day` slot only provides the day's letter, so there's no way to reformat it.\n\n```\n\u003Ctemplate #week-day=\"item\">\n {{ item }}\n\u003C/template>\n```\n\nIt simply displays \n```\n{\n \"day\": \"M\"\n}\n```\nWhich is not super helpful\n\nWould it be possible to have, like, the weekday number (0 to 6) ? \n\nSuggestion:\n```\n{\n \"day\": \"M\",\n \"dayNumber\": \"1\",\n}\n```\n\n### Additional context\n\n_No response_",[3210,3212,3215],{"name":3152,"color":3211},"a2eeef",{"name":3213,"color":3214},"v3","49DCB8",{"name":3216,"color":3217},"triage","ffffff",3714,"ui","Pass more complete data to Calendar week-day slots","2025-04-01T11:52:50Z","https://github.com/nuxt/ui/issues/3714",0.7394084,{"description":3225,"labels":3226,"number":3231,"owner":3161,"repository":3219,"state":3202,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Environment\n\n```\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.2.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@11.0.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10\n- Build Modules: -\n------------------------------\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n@nuxt/ui@3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/endquote/github-ugsebknu\n\n### Description\n\nTailwind in general is working fine for layout classes. However if I use a class like `drop-shadow-lg` it does not have an impact as it seems some variables are undefined.\n\n\u003Cimg width=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/1678ab42-b682-416b-9606-2d8605c837a1\" />\n\nPerhaps related, I'm seeing these warnings when building:\n\n```\n[vite:css] Lexical error on line 1: Unrecognized text. 4:12:25 PM\n\n Erroneous area:\n1: infinity * 1px\n^..^\n945| }\n946| .rounded-full {\n947| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n948| }\n949| .rounded-s { (x2)\n\nℹ ✓ 227 modules transformed. 4:12:26 PM\n[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help\n```\n\nIn `nuxt.config.ts` I have this:\n`css: [\"~/assets/css/main.css\"]`\n\nIn `main.css` I have this:\n\n```\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```\n\n### Additional context\n\nI'm new to vue/nuxt/tailwind so it's entirely possible I'm doing something wrong.\n\n\n### Logs\n\n```shell-script\n\n```",[3227,3230],{"name":3228,"color":3229},"bug","d73a4a",{"name":3213,"color":3214},2964,"undefined tailwind variables, css sourcemap warnings","2025-02-15T15:29:19Z","https://github.com/nuxt/ui/issues/2964",0.7415397,{"description":3237,"labels":3238,"number":3239,"owner":3161,"repository":3240,"state":3202,"title":3241,"updated_at":3242,"url":3243,"score":3244},"Right now the docs has a quite limitation and there is no guidance on integrating with a full Nuxt app which contains pages with may api calls, not just plugin or components let alone ts module import.\r\n\r\nIt would be much appreciated if you can expand the docs on for a more specific cases or may be some examples on this repo or say a fiddle, codepen, codesandbox ?",[],265,"test-utils","more docs on how to mock test for a page","2023-12-02T00:18:11Z","https://github.com/nuxt/test-utils/issues/265",0.75718725,{"description":3237,"labels":3246,"number":3247,"owner":3161,"repository":3240,"state":3202,"title":3241,"updated_at":3248,"url":3249,"score":3244},[],355,"2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/355",{"description":3251,"labels":3252,"number":3256,"owner":3161,"repository":3161,"state":3202,"title":3257,"updated_at":3258,"url":3259,"score":3260},"Hi,\r\n\r\nI have a custom node module, and I want to import a vue component from that module to my nuxt project. The external component has its own vuex store and will dispatch its own action. How should I import it to my nuxt project?\r\n\r\nFor the way I import it now, it will throw `[vuex] unknown action type: external_action`. I guess it's because this action is not defined in current nuxt project.\r\n\r\nThe following code is part of the external component, by triggering `toggleModalAuth()`, it will dispatch action `toggleModalAuth `, which is defined in the custom module.\r\n```\r\nmethods: {\r\ntoggleModalAuth() {\r\n if(util.jwtTokenIsHere()) {\r\n this.$store.dispatch('toggleModalIdentity', {\r\n value: !this.$store.state.modalIdentityIsShown\r\n })\r\n } else {\r\n this.$store.dispatch('toggleModalAuth', {\r\n value: !this.$store.state.modalAuthIsShown\r\n })\r\n }\r\n }\r\n}\r\n```\r\n\r\nAny help would be appreciated!!\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/c2509\">#c2509\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3253,3255],{"name":3254,"color":3217},"stale",{"name":3199,"color":3200},2887,"How to import external component with external store","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2887",0.7572739,{"description":3262,"labels":3263,"number":3266,"owner":3161,"repository":3267,"state":3202,"title":3268,"updated_at":3269,"url":3270,"score":3271},"`ProjectModalBranches` and `ProjectModalFiles` share the same logic for combox, the idea is to create a component `components/project/ProjectCombobox.vue` that will handle the logic:\n\n**Props**\n\n- `itemsLabel`\n- `items`\n- `recentItemsLabel` (default `Recent`)\n- `recentItems`\n- `actionsLabel` (default `null`)\n- `actions`",[3264],{"name":3152,"color":3265},"1ad6ff",362,"nuxt.com","Refactor command palette logic into one component","2023-02-15T12:32:14Z","https://github.com/nuxt/nuxt.com/issues/362",0.75841165,["Reactive",3273],{},["Set"],["ShallowReactive",3276],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fHSTRiu3_6DIqvBxJ4z-NkSu2ZBdDLm-xRGpjZ3JO6i8":-1},"/nuxt/nuxt.com/1841"]