Add a contact form to a Vue 3 app
Build a reactive contact form in Vue 3 that POSTs to FormLoom.
- 1
Create a reactive form object
Use `reactive()` or `ref()` to hold the form field values.
- 2
Call fetch on submit
In the submit handler, POST the form object to your FormLoom endpoint with `Content-Type: application/json`.
- 3
Show a success state
Update a `success` ref to show a confirmation message.
example.vue
<script setup lang="ts">
import { reactive, ref } from "vue";
const form = reactive({ email: "", message: "" });
const success = ref(false);
async function submit() {
await fetch("https://api.formloom.ai/submit/YOUR_ACCESS_KEY", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(form),
});
success.value = true;
}
</script>FAQ
Yes — Nuxt 3 is Vue-based. You can also use a Nuxt server route for a server-side variant.