Getting Started

Install the module to your Nuxt application with one command:

yarn add formidabuild

Usage

Create a form configuration and pass it to the formidabuild component:

'use client'
 
import React, { useState } from 'react'
import { Formidabuild, type Form, type FormValue } from 'formidabuild'
import { z } from 'zod/v4'
 
export const form = [
  {
    fields: [
      [
        {
          type: 'text',
          name: 'text',
          options: {
            placeholder: 'React'
          },
          size: '1/2',
          caption: 'Your name',
          validation: z
            .string({ message: 'Invalid data.' })
            .min(3, { message: 'Name must be at least 3 characters long' })
        }
      ]
    ]
  }
] as const satisfies Form
 
export const data: FormValue<typeof form> = {
  name: 'Jhon Doe'
}
 
export default function Home() {
  const [value, setValue] = useState<FormValue<typeof form>>(data)
  const [error, setError] = useState<boolean | undefined>()
 
  return (
    <Formidabuild
      form={form}
      value={value}
      onChange={(v) => {
        setValue(v as FormValue<typeof form>)
      }}
      onError={setError}
    />
  )
}