encolajs-enforma

KO | EN

gitlite — search

#python #ai #typescript #llm #golang #go #android #machine-learning #rust #linux #nodejs #macos #windows #ios

encolajs-enforma

(★ 17)

Build VueJS forms your way with Enforma — UI-agnostic (PrimeVue, Vuetify, Quasar), schema-ready, repeatable fields, powerful validation (Zod, Yup, Valibot or Encola Validator).

encolajs-enforma Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @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.

![CI](https://github.com/encolajs/encolajs-enforma/workflows/CI/badge.svg)
[![npm version](https://badge.fury.io/js/@encolajs%2Fenforma.svg)](https://badge.fury.io/js/@encolajs%2Fenforma)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 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

```bash
# Using npm
npm install @encolajs/enforma

# Using yarn
yarn add @encolajs/enforma

# Using pnpm
pnpm add @encolajs/enforma
```

## Simple Example

```vue
<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>

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:

```vue

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

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

<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:

```typescript
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:

```typescript
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](https://encolajs.com/enforma/core-concepts/validation).

## Documentation

- [Official Documentation](https://encolajs.com/enforma/) - Complete guide and API reference
- [Examples](https://encolajs.com/enforma/examples/) - Real-world examples and demos

## Contributing

We'd love your help improving @encolajs/enforma! Check out our [Contributing Guide](./CONTRIBUTING.md) to get started.

Found a bug? [Open an issue](https://github.com/encolajs/encolajs-enforma/issues/new)

Have a great idea? [Suggest a feature](https://github.com/encolajs/encolajs-enforma/issues/new)

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.

---

Built with ❤️ by the EncolaJS team

encolajs-enforma

encolajs-enforma Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

encolajs-enforma

encolajs-enforma Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README