@formitiva/vue

@formitiva/vue

Vue 3 adapter for Formitiva — build dynamic, schema-driven forms with a single component.

Features

• Single component — render any form from a JSON schema with <Formitiva />
• Vue 3 Composition API — composables for context, validation, debouncing, and more
• 25+ built-in field types — text, email, phone, dropdown, date, file, rating, slider, unit values, and more
• Dynamic validation — onEdit, onBlur, or onSubmission modes with built-in and custom validators
• Conditional visibility — show/hide fields based on other field values via parent-child relationships
• Computed values — derive field values from other fields automatically
• Plugin system — register custom components, validators, submission handlers, and visibility rules
• Theming — CSS variable-based theming with light/dark support
• Localization — 29+ languages with CDN-based translation loading
• TypeScript — fully typed API

Installation

npm install @formitiva/vue
# or
pnpm add @formitiva/vue

Peer dependencies: vue >=3.3

Quick Start

<script setup lang="ts">
import { Formitiva } from "@formitiva/vue";

const definition = {
  name: "contactForm",
  version: "1.0.0",
  displayName: "Contact Form",
  properties: [
    { name: "fullName", displayName: "Full Name", type: "text", defaultValue: "", required: true },
    { name: "email", displayName: "Email", type: "email", defaultValue: "", required: true },
    { name: "message", displayName: "Message", type: "multiline", defaultValue: "" },
  ],
};

const handleSubmit = (_def: any, _instanceName: any, values: any) => {
  console.log("Submitted:", values);
  return undefined;
};
</script>

<template>
  <Formitiva :definition-data="definition" :on-submit="handleSubmit" />
</template>

Props

Advanced Layouts

Pass layout to let the Vue app choose nav, tab, or wizard presentation while the JSON schema remains focused on field data. The same definitionData can be rendered as a default form, a left-nav form, tabs, or wizard steps.

<script setup lang="ts">
import { Formitiva } from "@formitiva/vue";

const definition = {
  name: "profile",
  version: "1.0.0",
  properties: [
    { name: "firstName", type: "text", displayName: "First Name", required: true },
    { name: "lastName", type: "text", displayName: "Last Name", required: true },
    { name: "email", type: "email", displayName: "Email", required: true },
    { name: "newsletter", type: "switch", displayName: "Newsletter" },
  ],
};

const tabLayout = {
  name: "profileTabs",
  type: "tab" as const,
  displayName: "Profile Tabs",
  defaultValue: "personal",
  sections: [
    { label: "Personal", name: "personal", props: ["firstName", "lastName"] },
    { label: "Contact", name: "contact", props: ["email", "newsletter"] },
  ],
};
</script>

<template>
  <Formitiva :definition-data="definition" :layout="tabLayout" />
</template>

Layout types:

Each sections[].props entry must match field name values from the schema. definition.layoutRef and registerLayout() still work as a compatibility fallback, but new Vue code should pass layout directly.

Composables

Extending

Custom Components

import { registerComponent } from "@formitiva/vue";

registerComponent("my-custom-field", MyCustomFieldComponent);

Custom Validators

import { registerFieldValidator, registerTypeValidator } from "@formitiva/vue";

// Per-definition field validator
registerFieldValidator("myForm", "validateAge", (fieldName, value, t) => {
  if (Number(value) < 18) return t("Must be at least 18");
  return undefined;
});

// Global type validator
registerTypeValidator("currency", (field, input, t) => {
  if (Number.isNaN(Number(input))) return t("Must be a valid number");
  return undefined;
});

Plugins

import { registerPlugin } from "@formitiva/vue";

registerPlugin({
  name: "my-plugin",
  version: "1.0.0",
  components: { "my-field": MyFieldComponent },
  fieldTypeValidators: { "my-field": myValidator },
});

Themes

Import a built-in theme CSS file from @formitiva/core:

import "@formitiva/core/themes/material-dark.css";

Or customize via CSS variables:

:root {
  --formitiva-color-primary: #3b82f6;
  --formitiva-color-error: #ef4444;
  --formitiva-border-radius: 8px;
}

Links

• Documentation
• Visual Form Builder
• GitHub
• Monorepo README

License

MIT