Vue composable and component for onsubmit.dev.
Connect any Vue form to your onsubmit.dev endpoint with zero dependencies. No backend required.
npm install vue-onsubmitDrop-in replacement for a plain <form>. Handles loading state, errors, and success message automatically:
<script setup lang="ts">
import { OnSubmitForm } from 'vue-onsubmit';
</script>
<template>
<OnSubmitForm form-id="YOUR_FORM_ID" success-message="Thanks! We'll be in touch.">
<input name="name" placeholder="Your name" required />
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" />
<button type="submit">Send</button>
</OnSubmitForm>
</template>Your form ID is available in the onsubmit.dev dashboard after creating a form.
Use the composable when you need to drive your own UI state:
<script setup lang="ts">
import { useOnSubmit } from 'vue-onsubmit';
const { handleSubmit, isLoading, isSuccess, error, reset } = useOnSubmit({
formId: 'YOUR_FORM_ID',
onSuccess: (data) => console.log('Submitted!', data),
onError: (err) => console.error('Failed:', err),
});
</script>
<template>
<div v-if="isSuccess">
<p>Thanks! We'll be in touch.</p>
<button @click="reset">Send another</button>
</div>
<form v-else @submit="handleSubmit">
<input name="name" placeholder="Your name" required />
<input name="email" type="email" placeholder="Email" required />
<p v-if="error" style="color: red">{{ error }}</p>
<button type="submit" :disabled="isLoading">
{{ isLoading ? 'Sending…' : 'Send' }}
</button>
</form>
</template>| Prop | Type | Description |
|---|---|---|
formId |
string |
Required. Your onsubmit.dev form ID. |
successMessage |
string |
Text rendered in place of the form on success. |
endpoint |
string |
Override the default API base URL. |
onSuccess |
(data: unknown) => void |
Called after a successful submission. |
onError |
(error: unknown) => void |
Called when submission fails. |
All other attributes are forwarded to the underlying <form> element.
| Option | Type | Description |
|---|---|---|
formId |
string |
Required. Your onsubmit.dev form ID. |
endpoint |
string |
Override the default API base URL. |
onSuccess |
(data: unknown) => void |
Called after a successful submission. |
onError |
(error: unknown) => void |
Called when submission fails. |
| Property | Type | Description |
|---|---|---|
handleSubmit |
(e: Event) => Promise<void> |
Pass directly to <form @submit="...">. |
isLoading |
Ref<boolean> |
true while the request is in flight. |
isSuccess |
Ref<boolean> |
true after a successful submission. |
error |
Ref<string | null> |
Error message, or null if none. |
data |
Ref<unknown> |
Raw response from the API. |
reset |
() => void |
Resets all state back to initial values. |
File inputs are handled automatically. When the form contains a file field the data is sent as multipart/form-data. Otherwise JSON is used.
Useful for self-hosted deployments:
<OnSubmitForm form-id="YOUR_FORM_ID" endpoint="https://your-instance.example.com/f">
...
</OnSubmitForm>Or with the composable:
const { handleSubmit } = useOnSubmit({
formId: 'YOUR_FORM_ID',
endpoint: 'https://your-instance.example.com/f',
});MIT