How do you use a form action at the root?

[StephDietz]

The documentation states that the path of the page and action need to match (i.e. /pages/login.vue and /server/actions/login.ts) how do I use a form action in the root page? I tried naming the files index.vue and index.ts but this did not work and am struggling to find any documentation on this. Is this a bug, or do I need to do something different in order to use actions in the root page?

[Hebilicious]

Hi @StephDietz, thank you for reporting this.

As a workaround, you must use a named action/loader. In this example you can see it uses todos explicitly in the HTML form and in the useFormAction composable. https://github.com/Hebilicious/form-actions-nuxt/blob/main/playgrounds/advanced/pages/todos.vue. This will still work if you move the file to the default route (pages/index.vue)

I think your first assumption is fair, the issue is that /server/actions/index.ts, or (server/routes/index.ts) will create a route literally named index. To solve this with Nitro you have to use a catch all route https://nitro.unjs.io/guide/routing#catch-all-route.

What do you think of this pattern ? We could implement it in this module, or we could document the workaround.