Vue.js Integration Guide

npm create vue@latest my-staticbox-app
cd my-staticbox-app
npm install
npm run dev

<!-- components/ContactForm.vue -->
<template>
  <div>
    <div v-if="isSubmitted" class="success-message">
      <h3>Thank you!</h3>
      <p>Your message has been sent successfully.</p>
    </div>
    <form v-else @submit.prevent="handleSubmit">
      <div>
        <label for="name">Name</label>
        <input
          v-model="form.name"
          type="text"
          id="name"
          name="name"
          required
        />
      </div>
      <div>
        <label for="email">Email</label>
        <input
          v-model="form.email"
          type="email"
          id="email"
          name="email"
          required
        />
      </div>
      <div>
        <label for="message">Message</label>
        <textarea
          v-model="form.message"
          id="message"
          name="message"
          required
        />
      </div>
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? 'Sending...' : 'Send Message' }}
      </button>
      <p v-if="error" class="error">{{ error }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const form = reactive({
  name: '',
  email: '',
  message: ''
})

const isSubmitting = ref(false)
const isSubmitted = ref(false)
const error = ref(null)

const handleSubmit = async () => {
  isSubmitting.value = true
  error.value = null
  
  const formData = new FormData()
  formData.append('name', form.name)
  formData.append('email', form.email)
  formData.append('message', form.message)
  
  try {
    const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
      method: 'POST',
      body: formData,
    })
    
    if (response.ok) {
      isSubmitted.value = true
      Object.keys(form).forEach(key => form[key] = '')
    } else {
      throw new Error('Failed to submit form')
    }
  } catch (err) {
    error.value = err.message
  } finally {
    isSubmitting.value = false
  }
}
</script>

<!-- App.vue -->
<template>
  <div id="app">
    <h1>Contact Us</h1>
    <ContactForm />
  </div>
</template>

<script setup>
import ContactForm from './components/ContactForm.vue'
</script>

// stores/contact.js
import { defineStore } from 'pinia'

export const useContactStore = defineStore('contact', {
  state: () => ({
    isSubmitting: false,
    isSubmitted: false,
    error: null
  }),
  
  actions: {
    async submitForm(formData) {
      this.isSubmitting = true
      this.error = null
      
      try {
        const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
          method: 'POST',
          body: formData,
        })
        
        if (response.ok) {
          this.isSubmitted = true
        } else {
          throw new Error('Failed to submit form')
        }
      } catch (err) {
        this.error = err.message
      } finally {
        this.isSubmitting = false
      }
    }
  }
})