vue-onsubmit

Vue

Vue composable and component for onsubmit.dev. Connect any Vue form to your onsubmit.dev endpoint with zero dependencies. No backend required. Works with Vue 3 and Vue 2.7+.

Installation

bash

npm install vue-onsubmit

Quick start

Option A — OnSubmitForm component (recommended)

Drop-in replacement for a plain <form>. Handles loading state, errors, and success message automatically:

vue

<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.

Option B — useOnSubmit composable (full control)

Use the composable when you need to drive your own UI state:

vue

<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>

Component props

OnSubmitForm accepts the following props. All other attributes are forwarded to the underlying <form> element.

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.

Composable API

Options

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.

Returns

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 uploads

File inputs are handled automatically. When the form contains a file field the data is sent as multipart/form-data. Otherwise JSON is used.

Custom endpoint

Useful for self-hosted deployments:

vue

<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',
});