Formboost with Nuxt

    Integrate Formboost with Nuxt applications

    The Problem

    Nuxt form handling often means writing a server route (Nitro) just to proxy submissions to a database or email service, adding a maintenance burden to an otherwise static-friendly app.

    The Solution

    Submit directly from a Nuxt component to your Formboost endpoint using $fetch. Nuxt handles the UI, Formboost handles storage, spam filtering, and delivery — no server route required.

    Setup in 5 Steps

    1

    Create a Formboost form endpoint

    2

    Add the endpoint ID to your Nuxt runtime config or component

    3

    Use $fetch to POST form data from a component

    4

    Handle loading and success states

    5

    Deploy — no Nitro server route needed

    Code Example

    <template>
      <form @submit.prevent="handleSubmit">
        <input v-model="form.email" type="email" placeholder="Email" required />
        <textarea v-model="form.message" placeholder="Message" required />
        <button type="submit" :disabled="loading">
          {{ loading ? 'Sending...' : 'Send' }}
        </button>
        <p v-if="sent">Thanks! We'll be in touch.</p>
      </form>
    </template>
    
    <script setup>
    const form = reactive({ email: '', message: '' });
    const loading = ref(false);
    const sent = ref(false);
    
    const handleSubmit = async () => {
      loading.value = true;
      try {
        await $fetch('https://formboost.app/f/YOUR_ENDPOINT_ID', {
          method: 'POST',
          body: form
        });
        sent.value = true;
        form.email = form.message = '';
      } finally {
        loading.value = false;
      }
    };
    </script>

    Frequently Asked Questions

    Common questions about using Formboost with Nuxt

    Why use Formboost with Nuxt?

    Submit directly from a Nuxt component to your Formboost endpoint using $fetch. Nuxt handles the UI, Formboost handles storage, spam filtering, and delivery — no server route required.

    How do I set up Formboost in Nuxt?

    Follow the setup steps above. It typically takes less than 5 minutes to integrate Formboost with Nuxt. No additional packages or complex configuration needed.

    Can I use Formboost with my existing Nuxt project?

    Yes! Formboost works with any Nuxt project, whether it's a new project or an existing one. Simply add your Formboost endpoint and start sending submissions.

    Do I need a backend server to use Formboost with Nuxt?

    No! That's the whole point of Formboost. We handle all the backend logic, so you can focus on your Nuxt frontend without managing a server.

    Start building with Formboost and Nuxt

    It takes less than a minute to set up. No credit card required.