How to submit Vue forms to Notion

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It emphasizes simplicity, reactivity, and component-based architecture, making it easy to integrate with existing projects while offering powerful state management and a flexible ecosystem.

You can easily connect forms built with Vue to Notion using Notion Monkey.

Once you create a form in the Notion Monkey dashboard, Notion Monkey will provide a form url or "form action" where you can start posting data. This unique action is all you need to post data into the Notion DB.

Then in your Vue form, post your data to the Notion Monkey endpoint as in the following example:

<template>
  <div>
    <h2>Contact Form</h2>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="formData.name" required />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" v-model="formData.email" required />
      </div>
      <div>
        <label for="message">Message:</label>
        <textarea id="message" v-model="formData.message" required></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        message: ''
      }
    };
  },
  methods: {
    async handleSubmit() {
      const url = 'https://api.notionmonkey.io/form/vB1pUYCBvUqnSarEvAgsd6';
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.formData)
      });

      if (response.ok) {
        console.log('Form submitted successfully!');
        // Reset form fields if needed
        this.formData = {
          name: '',
          email: '',
          message: ''
        };
      } else {
        console.error('Form submission failed:', response.status);
      }
    }
  }
};
</script>

Once you submit this form, the data will appear in the linked db like this: