Vue

Use NBForms with Vue

Drop NBForms into any Vue 3 component to handle form submissions without a backend. Uses the native FormData API and Vue's reactivity to manage loading and success states, with the script setup pattern for minimal boilerplate.

Official Vue docs

Vue

<template>
  <p v-if="success">Thanks — we'll be in touch!</p>
  <form v-else @submit.prevent="submit">
    <input type="hidden" name="_token" value="YOUR_TOKEN" />
    <label>Name</label>
    <input type="text" name="name" required />
    <label>Email</label>
    <input type="email" name="email" required />
    <label>Message</label>
    <textarea name="message" required></textarea>
    <button type="submit" :disabled="sending">
      {{ sending ? 'Sending…' : 'Send' }}
    </button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const sending = ref(false)
const success = ref(false)

async function submit(e) {
  sending.value = true
  const res = await fetch('https://api.nbforms.com', {
    method: 'POST',
    body: new FormData(e.target),
  })
  success.value = res.ok
  sending.value = false
}
</script>

Why NBForms?

Works with Vue 3 and the Composition API
No Vuex or Pinia store required
Script setup pattern keeps the component lean
Handles loading, success, and error states reactively

Add to your Vue app in minutes

Free tier included. No credit card. No backend setup — just copy the snippet above and go.

Get started free