Actions

Use app/pages/**/action.ts for mutating requests.

Actions are the server-side counterpart to route loaders.

export async function action({ formData }: { formData: FormData }) {
  const title = formData.get('title')

  if (!title) {
    return { ok: false }
  }

  return { ok: true }
}

Reading action state

Use these composables in route components:

  • useActionData() for the current matched node
  • useRouteActionData(routeId) for an explicit route id
  • useActionState() for the raw reactive action state wrapper

Forms

Vuloom progressively enhances normal HTML forms. A route action works with SSR first, and then upgrades to client-side form submission once the app hydrates.