\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).",[3156,3159,3162,3165,3168],{"name":3157,"color":3158},"enhancement","8DEF37",{"name":3160,"color":3161},"discussion","538de2",{"name":3163,"color":3164},"dx","C39D69",{"name":3166,"color":3167},"nitro","bfd4f2",{"name":3169,"color":3170},"馃嵃 p2-nice-to-have","0E8A16",20649,"Form actions for progressive enhancement","2024-06-30T11:08:54Z","https://github.com/nuxt/nuxt/issues/20649",0.7460053,{"description":3177,"labels":3178,"number":3185,"owner":3146,"repository":3147,"state":3148,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Description\n\nI want to use [motion vue](https://motion.dev/docs/vue) to animate components within NuxtUI.\n\nHugo proposed there is a way to do this within a project, however I don't see how it would be possible without adding motion as a dependency to NuxtUI and modifying the component itself:\n\n> @HugoRCD We could make an example in the docs with Motion based on this example: https://examples.motion.dev/vue/smooth-tabs \n\n _Originally posted by @benjamincanac in [#488](https://github.com/nuxt/ui/issues/488#issuecomment-2869125279)_\n\nSo my questions are:\n\n1. If possible, how could motion animations be added to NuxtUI components within a project without modifying the core component? (If so, I'd be happy to build an example for the docs)\n2. Should we build new motion animated versions of components? (So projects that don't want the animations don't need to import motion-vue)\n3. How do we keep the new components in sync with the original ones if they change?\n4. Should motion animated components be a NuxtUI Pro feature?\n\n### Additional context\n\n_No response_",[3179,3181,3182],{"name":3157,"color":3180},"a2eeef",{"name":3143,"color":3144},{"name":3183,"color":3184},"triage","ffffff",4245,"Motion animated components","2025-05-28T16:47:53Z","https://github.com/nuxt/ui/issues/4245",0.754323,{"description":3191,"labels":3192,"number":3196,"owner":3146,"repository":3147,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Description\n\nI'm trying to use Nuxt UI in a project that doesn't use Vue Router nor Inertia (for the record, it uses https://hybridly.dev/, but I don't want a `Link` component integration at all).\n\nWhen not using the `inertia` parameter, the following error occurs in the browsers' console:\n\n```\nUncaught SyntaxError: The requested module 'http://[::1]:5173/@id/__vite-optional-peer-dep:vue-router:@nuxt/ui' doesn't provide an export named: 'useRoute'\n```\n\n\n\nWhen setting `inertia` to `true`, I have the following one:\n\n```\nUncaught SyntaxError: The requested module 'http://[::1]:5173/@id/__vite-optional-peer-dep:@inertiajs/vue3:@nuxt/ui' doesn't provide an export named: 'usePage'\n```\n\n\n\nBoth of these seem to be due to Nuxt UI expecting either `vue-router` or `inertia-vue3` to be installed, which I don't want.\n\nIt would be nice if Nuxt UI supported a routerless option.\n\n### Additional context\n\n_No response_",[3193,3194,3195],{"name":3157,"color":3180},{"name":3143,"color":3144},{"name":3183,"color":3184},4341,"closed","Opt-out of router integrations","2025-06-16T09:46:25Z","https://github.com/nuxt/ui/issues/4341",0.7053144,{"description":3203,"labels":3204,"number":3210,"owner":3146,"repository":3147,"state":3197,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Environment\n\nOperating System: mac os\nNode Version: v22.14.0\nLaravel Version: 12.12.0\nNitro Version: -\nPackage Manager: bun 1.2.11\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\nN/A\n\n### Description\n\nI'm using the example from the documentation for implementing a login and the button behaves like a link. I've already tried as=\"button\" and it doesn't work.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from 'zod'\nimport type { FormSubmitEvent } from '@nuxt/ui'\n\nconst schema = z.object({\n email: z.string().email('Invalid email'),\n password: z.string().min(8, 'Must be at least 8 characters')\n})\n\ntype Schema = z.output\u003Ctypeof schema>\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n email: undefined,\n password: undefined\n})\n\nconst toast = useToast()\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })\n console.log(event.data)\n}\n\u003C/script>\n\u003Ctemplate>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Email\" name=\"email\">\n \u003CUInput v-model=\"state.email\" />\n \u003C/UFormField>\n \u003CUFormField label=\"Password\" name=\"password\">\n \u003CUInput v-model=\"state.password\" type=\"password\" />\n \u003C/UFormField>\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3205,3208,3209],{"name":3206,"color":3207},"bug","d73a4a",{"name":3143,"color":3144},{"name":3183,"color":3184},4095,"UButton works as a link in Inertia","2025-05-07T08:12:17Z","https://github.com/nuxt/ui/issues/4095",0.72102624,{"description":3216,"labels":3217,"number":3224,"owner":3146,"repository":3147,"state":3197,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.3\n- Nitro Version: -\n- Package Manager: pnpm@10.5.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, ui, runtimeConfig\n- Runtime Modules: @nuxt/ui-pro@3.0.0-beta.2, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n馃憠 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n馃憠 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n馃憠 Read d\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/relaxed-scooby-nv4zrp?file=%2Fapp%2Fpages%2Findex.vue%3A7%2C51\n\n### Description\n\nI was importing type `FormSubmitEvent` from Nuxt UI but when I shifted to nuxt ui pro and replaced the import. But it broke, because nuxt ui pro doesn't export this type\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3218,3219,3220,3223],{"name":3206,"color":3207},{"name":3143,"color":3144},{"name":3221,"color":3222},"nuxt/ui-pro","00dc82",{"name":3183,"color":3184},3465,"type `FormSubmitEvent` not working in nuxt ui pro version 3","2025-05-10T17:33:04Z","https://github.com/nuxt/ui/issues/3465",0.72975546,{"description":3230,"labels":3231,"number":3234,"owner":3146,"repository":3147,"state":3197,"title":3143,"updated_at":3235,"url":3236,"score":3237},"The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.\n\n---\n\nA lot has changed since `@nuxt/ui` was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.\n\nI'll post regular updates on this issue and on https://twitter.com/benjamincanac.\n\n## Documentation\n\nhttps://ui3.nuxt.dev\n\n## Roadmap (Nov 20, 2024)\n\n- [x] Finish the migration to `reka-ui@alpha` on `@nuxt/ui` & `@nuxt/ui-pro` #2448\n- [x] Write the docs for implemented `@nuxt/ui-pro` components\n- [x] Finish `@nuxt/ui-pro` components\n- [x] Make Nuxt UI Pro v3 work with Vue like Nuxt UI https://github.com/nuxt/ui-pro/pull/742\n- [ ] Implement new components in `@nuxt/ui` like\n - [x] `Calendar` #2618\n - [ ] `InputDate` #2524\n - [x] `Tree` #3180\n - [x] `Stepper` #2733\n- [x] Migrate all the Nuxt UI Pro templates\n - [x] Starter\n - [x] Landing\n - [x] Docs\n - [x] SaaS https://github.com/nuxt-ui-pro/saas/pull/86\n - [x] Dashboard https://github.com/nuxt-ui-pro/dashboard/pull/86\n- [ ] Build the Nuxt UI docs marketing pages\n - [x] Landing\n - [x] Figma\n - [x] Pro -> Landing\n - [x] Pro -> Pricing\n - [x] Pro -> Templates\n - [x] Pro -> Activate\n - [ ] Releases\n- [x] Write migration guide https://ui3.nuxt.dev/getting-started/migration\n- [x] Release `@nuxt/ui` & `@nuxt/ui-pro` officially once `tailwindcss` and `reka-ui` are released\n- [x] Migrate all the Nuxt apps (nuxt.com, image.nuxt.com, eslint.nuxt.com, devtools.nuxt.com, fonts.nuxt.com, hub.nuxt.com, nuxt.studio, etc.)\n- [ ] Implement new `@nuxt/ui` & `@nuxt/ui-pro` components\n- [ ] Create new templates like Changelog, Portfolio, etc. \n\n## Breaking Changes\n\nThe biggest change is the switch to `tailwind-variants`, this will cause lots of breaking changes if you've used the `ui` prop or `app.config.ts` to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.\n\n> At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced `tailwind-merge` which now allows us to group those keys together, this is a good opportunity to clean the whole thing. \n\nThe config will now have a `slots` amongst other keys that will specifically target dom nodes. The `ui` prop will only allow you to target those slots.\n\nThese changes alongside the refactor of all components will also improve the types, the `app.config.ts` and `ui` props are now perfectly typed, as well as all components `props`, `slots`, `emits` and `expose`.\n\n> Feel free to comment on this if you have any ideas for the next major.\n\n```[tasklist]\n### Components\n- [x] Accordion\n- [x] Alert\n- [x] Avatar\n- [x] AvatarGroup\n- [x] Badge\n- [x] Breadcrumb\n- [x] Button\n- [x] ButtonGroup\n- [x] Card\n- [x] Carousel\n- [x] Checkbox\n- [x] Chip\n- [x] Collapsible\n- [x] CommandPalette\n- [x] Container\n- [x] ContextMenu\n- [x] Drawer\n- [x] DropdownMenu (Dropdown)\n- [x] Form\n- [x] FormField (FormGroup)\n- [x] Icon\n- [x] Input\n- [x] InputMenu\n- [x] Kbd\n- [x] Link\n- [x] Modal\n- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)\n- [x] Pagination\n- [x] Popover\n- [x] Progress\n- [x] Provider\n- [x] RadioGroup\n- [x] Select\n- [x] SelectMenu\n- [x] Separator (Divider)\n- [x] Skeleton\n- [x] Slideover\n- [x] Slider (Range)\n- [x] Table\n- [x] Tabs\n- [x] Textarea\n- [x] Toast (Notification)\n- [x] Switch (Toggle)\n- [x] Tooltip\n```\n",[3232],{"name":3233,"color":3144},"release",1289,"2025-07-17T12:55:11Z","https://github.com/nuxt/ui/issues/1289",0.7348428,{"description":3239,"labels":3240,"number":3243,"owner":3146,"repository":3147,"state":3197,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\nMy most sincere recommendation, I love Vue, Nuxt, Nuxtui, but the truth is that everything on the market is being made almost exclusively for React, including TailwindCSS, so I advise against having Pro, just the full Free UI and open-source, take it or leave it, you decide.\n\n### Version\n\n2.20.0\n\n### Reproduction\n\nnuxtui.com\n\n### Description\n\nMy most sincere recommendation, I love Vue, Nuxt, Nuxtui, but the truth is that everything on the market is being made almost exclusively for React, including TailwindCSS, so I advise against having Pro, just the full Free UI and open source, take it or leave it, you decide.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3241,3242],{"name":3206,"color":3207},{"name":3183,"color":3184},4297,"yes ui, no ui-pro","2025-06-05T19:46:12Z","https://github.com/nuxt/ui/issues/4297",0.74151164,{"description":3249,"labels":3250,"number":3252,"owner":3146,"repository":3147,"state":3197,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi,\n\nWould it be possible to add an export of all components ?\n\nSomething like:\n\n```js\nexport * from './components'\n```\n\n### Additional context\n\nI'm trying to display a form field according to its value type (ex: boolean => checkbox, number => range ...).\n\nSadly, it looks like in composition API, one cannot use string for `\u003Ccomponent>` `:is` prop.\n\n```vue\n\u003Ctemplate>\n \u003C!-- This doesn't work -->\n \u003Ccomponent :is=\"typeof value === 'boolean' ? 'u-checkbox' : 'u-input'\" />\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[3251],{"name":3157,"color":3180},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.7465539,{"description":3258,"labels":3259,"number":3264,"owner":3146,"repository":3147,"state":3197,"title":3265,"updated_at":3266,"url":3267,"score":3268},"### Description\n\nI want to let customers know what password requirements they've already checked according to create a strong password, but for this I need the model value to know what they are filling in.\n\nYou can validate it on `input` (that somehow doesn't work neither until you blur it once), but that's not really what I want for the full form\n\n### Additional context\n\nhttps://ui3.nuxt.dev/components/input#with-password-strength-indicator",[3260,3261,3262,3263],{"name":3157,"color":3180},{"name":3143,"color":3144},{"name":3221,"color":3222},{"name":3183,"color":3184},3430,"Expose v-model values in authForm","2025-05-14T13:36:42Z","https://github.com/nuxt/ui/issues/3430",0.75071657,["Reactive",3270],{},["Set"],["ShallowReactive",3273],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fv0cGhR7zEjzY8oic_-Citx8gD2qLv8YGdKRUtkCEf3s":-1},"/nuxt/ui/4729"]