@encolajs/enforma

🚀 A powerful Vue 3 form library that renders dynamic forms from JSON schemas! Build complex forms with ease using headless components, field validation, and UI framework presets.

Why Another Form Library?

Building dynamic forms shouldn't be complicated! We built this library to handle real-world form scenarios with Vue 3:

• 🎨 UI Agnostic: Use it with your preferred UI library. Comes with ready-to-use presets for PrimeVue, Vuetify, Quasar, Reka UI and Nuxt UI
• ✅ Multiple Validation Options: Use Enforma with Zod, Yup, Valibot, @encolajs/validator or you can even bring your own validator
• ✨ Schema-Driven: Define forms using JSON schemas, no template code needed
• 🎯 Type-Safe: Full TypeScript support with auto-completion
• 🧩 Headless Components: Maximum flexibility with unstyled, accessible components
• 🔄 Reactive Validation: Built-in integration with @encolajs/validator
• 🌍 i18n Ready: Internationalization support out of the box
• 🪶 Lightweight: Optimized bundle size with tree-shaking support

Quick Start

# Using npm
npm install @encolajs/enforma

# Using yarn
yarn add @encolajs/enforma

# Using pnpm
pnpm add @encolajs/enforma

Simple Example

<template>
  <HeadlessForm :schema="schema" v-model="formData">
    <HeadlessField name="email" #default="{ field, error }">
      <input v-bind="field" placeholder="Email" />
      <span v-if="error">{{ error }}</span>
    </HeadlessField>
    
    <HeadlessField name="name" #default="{ field, error }">
      <input v-bind="field" placeholder="Full Name" />
      <span v-if="error">{{ error }}</span>
    </HeadlessField>
    
    <button @click="submit">Submit</button>
  </HeadlessForm>
</template>

<script setup>
import { ref } from 'vue'
import { HeadlessForm, HeadlessField } from '@encolajs/enforma'

const formData = ref({})

const schema = {
  fields: {
    email: {
      type: 'email',
      validation: 'required|email',
      label: 'Email Address'
    },
    name: {
      type: 'text',
      validation: 'required|min_length:2',
      label: 'Full Name'
    }
  }
}

const submit = () => {
  console.log('Form data:', formData.value)
}
</script>

Amazing Features

UI Framework Presets

Skip the styling and use our pre-built components for popular UI frameworks:

<!-- PrimeVue Preset -->
<script setup>
import { EnformaPlugin } from '@encolajs/enforma'
import { primevuePreset } from '@encolajs/enforma/presets/primevue'

app.use(EnformaPlugin, { 
  preset: primevuePreset 
})
</script>

<!-- Vuetify Preset -->
<script setup>
import { vuetifyPreset } from '@encolajs/enforma/presets/vuetify'

app.use(EnformaPlugin, { 
  preset: vuetifyPreset 
})
</script>

Dynamic Schema Building

Create complex forms with nested objects and arrays:

const schema = {
  fields: {
    user: {
      type: 'object',
      fields: {
        name: { type: 'text', validation: 'required' },
        email: { type: 'email', validation: 'required|email' }
      }
    },
    hobbies: {
      type: 'repeatable',
      itemSchema: {
        type: 'text',
        validation: 'required'
      }
    }
  }
}

Composable Architecture

Use our composables for maximum flexibility:

import { useEnformaField, useEnformaSchema } from '@encolajs/enforma'

const { field, error, validate } = useEnformaField('email', {
  validation: 'required|email'
})

const { schema, formData, isValid } = useEnformaSchema(mySchema)

Validation

Enforma supports multiple validation libraries - choose the one that fits your project:

• @encolajs/validator - Laravel-style validation rules
• Zod - TypeScript-first schema validation
• Yup - Object schema validation with conditional logic
• Valibot - Lightweight, modular validation
• No validation - Use forms without any validation

All validators work seamlessly with useForm() and form components like HeadlessForm.

For detailed usage, examples, and migration guides, see the Validation documentation.

Documentation

• Official Documentation - Complete guide and API reference
• Examples - Real-world examples and demos

Contributing

We'd love your help improving @encolajs/enforma! Check out our Contributing Guide to get started.

Found a bug? Open an issue

Have a great idea? Suggest a feature

License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ by the EncolaJS team