We are big fans of Vue.js over here at Submit JSON.
Here's how to integrate the JS Client with a basic and full example:
First install submitjson and vue with your favorite package manager (we prefer pnpm).
pnpm add submitjson vue # OR npm i OR yarn add
Next import SubmitJSON from 'submitjson', initialize the client, and handle the form submission.
<script setup>
// ./src/components/MyForm.vue
import SubmitJSON from 'submitjson'
import { reactive } from 'vue'
const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXxXxXxX' })
const myForm = reactive({
name: 'Dude',
message: 'Yo',
})
async function onSubmit() {
try {
const data = await sj.submit(myForm)
console.log('Submission successful :)', data)
}
catch (error) {
alert(error)
}
}
</script>
<template>
<!--
Things to take note of:
1. We prevent the default form submission behavior with @submit.prevent
2. The reactive myForm values are bound to the inputs with v-model
-->
<form @submit.prevent="onSubmit">
<input v-model="myForm.name" name="name">
<input v-model="myForm.message" name="message">
<button type="submit">
Submit
</button>
</form>
</template>
This is a closer representation to something you would see in production.
We like to wire up the form and inputs to Vee Validate, then use Yup to validate the form fields.
First install submitjson and vue, along with vee-validate and yup.
pnpm add submitjson vue vee-validate yup
Create a separate submitjson.ts file so you can re use the client later.
// ./submitjson.ts
import SubmitJSON from 'submitjson'
export const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXxXxXxX' })
Import the client instance, create a validation schema, and handle the submission. Easy peasy.
<script setup lang="ts">
// ./src/components/MyForm.vue
import { Field, Form } from 'vee-validate'
import * as yup from 'yup'
// import the client from ./submitjson.ts
import { sj } from './submitjson.ts'
// define form validation schema with yup
const schema = yup.object({
name: yup.string().required(),
email: yup.string().email(),
powerLevel: yup.number()
})
// Passes the validated form values in an object {} on submit
async function onSubmit(values) {
try {
const response = await sj.submit(values, {
emailNotification: true,
emailReplyTo: values.email,
submissionFormat: 'pretty',
})
alert('Submission successful :)')
}
catch (error) {
console.error(error)
}
}
</script>
<template>
<Form :validation-schema="schema" @submit="onSubmit">
<Field name="name" placeholder="Name" />
<Field name="email" type="email" placeholder="Email" />
<Field name="powerLevel" type="number" placeholder="Power Level" />
<button>Submit</button>
</Form>
</template>
🚛✨💚 Nice job, you successfully integrated Submit JSON with Vue.js. Ready to level up with Nuxt? Check out the Nuxt Example.