@formhaus/vue

Renders a JSON form definition in Vue 3: multi-step, conditional and branching forms on top of @formhaus/core. Native HTML inputs by default. Part of Formhaus.

Install

npm install @formhaus/core @formhaus/vue

Requires Vue 3.3 or later and Node 22.12 or later.

Usage

<script setup lang="ts">
import { FormRenderer } from '@formhaus/vue';
import definition from './contact-form.json';

async function handleSubmit(values: Record<string, unknown>) {
  await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify(values),
  });
}
</script>

<template>
  <FormRenderer :definition="definition" @submit="handleSubmit" />
</template>

Features

• Built-in field types, sections, repeatable groups and conditional visibility. See fields.
• Multi-step forms with lifecycle hooks, radio autoAdvance, async step validation and branching routes.
• Custom components through the components prop, plus HeadlessFormRenderer to keep the built-in fields out of your bundle. Integrations: Vuetify.
• Dynamic select options with optionsFrom and optionsProviders. See fields.
• Form events through @formEvent, for analytics.
• Translations: the locale prop.
• Server-side validation of the same definition with @formhaus/core/server.
• Formhaus Cloud: FormhausForm from @formhaus/vue/cloud renders a published form and submits to the hosted endpoint, with file uploads and the bot check.
• Theming: import '@formhaus/core/style.css', then override the --fh-* custom properties.
• Nuxt support.

Formhaus Cloud

<script setup lang="ts">
import { FormhausForm } from '@formhaus/vue/cloud';
</script>

<template>
  <FormhausForm id="form_id" />
</template>

Network

Only @formhaus/vue/cloud makes network requests.

• It calls https://api.formhaus.cc, or the apiBase you pass, and loads a challenge frame from https://formhaus.cc.
• @formhaus/vue makes no network requests.

Docs

• Guide, API reference and recipes
• Framework overview and playground
• Source and issues

License

MIT