Skip to content
Docs
Français formerie.com
formerie.com Français

Vue Quickstart

Add a working contact form to a Vue app. You write the form, and Formerie checks it, stores it, and emails you.

Install

Install @formerie/vue
Shell 
npm install @formerie/vue

Add The Form

Save this as ContactForm.vue.

VUE
<script setup lang="ts">
import { useFormerieSubmit } from "@formerie/vue";

const { submit, isSubmitting, result } = useFormerieSubmit({ workspace: "acme", form: "contact" });

function onSubmit(event: Event) {
  submit({ fields: Object.fromEntries(new FormData(event.target as HTMLFormElement)) });
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input name="name" placeholder="Name" required />
    <input name="email" type="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message" required></textarea>
    <button :disabled="isSubmitting">Send</button>
    <p v-if="result?.ok === true">Thanks!</p>
    <p v-else-if="result?.ok === false">{{ result.error.message }}</p>
  </form>
</template>

Each input’s name is the field it fills in Formerie.

Set Up The Form In The App

  1. Open app.formerie.com and create a form named Contact. It comes with the name, email, and message fields this code sends.
  2. On the Delivery tab, add your email address, then choose Save delivery. Confirm the email Formerie sends you.
  3. On the Publish tab, choose API-only and add the address your dev server prints, such as http://localhost:5173, under Your website addresses. localhost and 127.0.0.1 count as different addresses. Add your live site’s address the same way when you deploy.
  4. Choose Publish form.
  5. In the code above, replace acme with the workspace handle shown on the Publish tab.

Check It Arrived

Run your app, fill in the form, and send it. “Thanks!” appears on the page. In the app, your response shows under Submissions, and its email under Deliveries.

Seeing a CORS error, or NETWORK_ERROR? Your site’s address isn’t on the Publish tab yet, or you haven’t published since adding it. See Troubleshooting.

View as Markdown