Vue
Vue.js is a progressive JavaScript framework for building user interfaces, designed to be approachable, versatile, and easy to integrate, with a focus on declarative rendering and component-based architecture.
Prerequisites
Before you begin, make sure you have:
- A Basestack Forms account
- A Vue.js project with a form component
Quick Setup Guide
Follow these steps to integrate Basestack Forms with your Vue.js application:
Choose your HTTP client
You can use any HTTP client library to send form data from your Vue component. Popular options include:
- Fetch API - Built into modern browsers, no installation needed
- Axios - Popular HTTP client with Vue-friendly features
- Any other HTTP client that supports POST requests
Include mode=rest in your endpoint URL query string to receive JSON responses. This allows you to handle the response and show success or error messages to users.
Implement form submission handler
Copy the example component below into your Vue project. The example demonstrates:
- Form state management using Vue's Composition API
- Form submission with Fetch API
- Basic error handling and success feedback
The example uses Vue 3's Composition API with reactive and toRefs. Adapt it to your Vue version and preferred API style.
<template>
<form @submit.prevent="onHandleSubmit">
<div>
<label for="name">Name</label>
<input
type="text"
v-model="form.name"
id="name"
placeholder="Enter your name"
name="name"
required
autocomplete="name"
aria-label="Name"
/>
</div>
<div>
<label for="email">Email</label>
<input
type="email"
v-model="form.email"
id="email"
name="email"
required
autocomplete="email"
aria-label="Email"
placeholder="Enter your email"
/>
</div>
<div>
<label for="message">Message</label>
<textarea
v-model="form.message"
id="message"
name="message"
required
aria-label="Message"
placeholder="Enter your message"
></textarea>
</div>
<button type="submit">Submit</button>
</form>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
setup() {
const form = reactive({
name: "",
email: "",
message: "",
});
const onHandleSubmit = async () => {
try {
const res = await fetch(
"https://forms-api.basestack.co/v1/s/[KEY]?mode=rest",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(form),
},
);
const data = await res.json();
if (data.code === 200) {
console.log("Form submitted successfully");
}
} catch (error) {
console.log("Error submitting form", error);
}
};
return {
...toRefs(form),
onHandleSubmit,
};
},
};
</script>