Nuxt Form Actions is an open-source Nuxt module that brings Form Actions and Server Loaders to Nuxt 3, letting you send data and load type-safe data from your server without writing custom API routes.
Nuxt Form Actions is a Nuxt module distributed as @hebilicious/form-actions-nuxt on npm. It implements the Form Actions and Server Loaders paradigms: Form Actions are a way to send data to your server using native HTML forms that are progressively enhanced, and Server Loaders are a way to load type-safe data from your server into pages and components. The project is maintained by Hebilicious on GitHub under the MIT license, with documentation hosted at form-actions-nuxt.pages.dev and examples at github.com/Hebilicious/form-actions-nuxt-examples.
Key Features
- Form Actions — Send data to your server using native HTML forms that are progressively enhanced: forms work without JavaScript and gain enhanced behavior when JavaScript loads.
- Server Loaders — Load type-safe data from your server into pages and components without manually fetching from an API route, with full TypeScript inference.
- Native HTML-first — Built around standard HTML form semantics, so you can use regular form elements and attributes with no custom client-side framework needed.
- Type safety — Server Loaders are type-safe, meaning data passed from the server to the client is validated and inferred automatically.
- Nuxt 3 integration — Designed for Nuxt 3, leveraging the Nuxt module system and auto-imports for a smooth developer experience.
- Open source — Released under the MIT license, allowing free use in personal and commercial projects.
- Documentation and examples — Official documentation and a dedicated examples repository help you get started quickly with copy-ready patterns.
- Nuxt developers who want to handle form submissions without writing custom API endpoints or client-side fetch calls.
- Teams building data-driven Nuxt apps that need type-safe data loading from the server into components and pages.
- Developers who value progressive enhancement and want forms that function without JavaScript first, then enhance when JavaScript is available.
- Build resilient forms — Create login, contact, or survey forms that submit over the network using the native HTML form action, then enhance with client-side behavior when JavaScript loads.
- Load server data type-safely — Fetch data directly into a page or component with a Server Loader, avoiding manual API route calls and keeping types in sync.
- Reduce boilerplate — Eliminate the need to create separate API endpoints for simple mutations since Form Actions handle the server roundtrip.
- Publish forms quickly — Set up form handling in a Nuxt app using the module's patterns, with examples available to copy or adapt.
FAQ
Yes, the module is open-source under the MIT license, so you can use, modify, and distribute it freely, including in commercial projects.
What versions of Nuxt does it support?
The repository topics list Nuxt 3. The module is built for Nuxt 3, integrating with the Nuxt module system and its server and client architecture.
Does it work with Vue?
Yes — Nuxt is built on Vue, and the module integrates with Nuxt's server and client architecture, so it works with Vue components used in Nuxt applications.
How do I contribute to the project?
The repository welcomes contributions. Fork the repo, install bun at the monorepo root with bun i, make changes following conventional commits, and open a pull request.
