@empla/reforms

Reforms.js

Vue 3 and Bootstrap 5 forms and cards generator

Features

• Info cards
• Forms
• 15+ inputs types and output types
• Forms schemas
• Plugin system
• Internationalization
• Input & Output groups
• Form validation
• Server side validation
• Multiple and sortable fields

Demo

You can try it online

Installation

# Install before
npm i vue@next bootstrap@next

# Install reforms
npm i @empla/reforms

Example

Example with markup

<reforms-form>
  <reforms-input type="string" name="firstname" label="First Name" validation="required|string" />
  <reforms-input type="string" name="lastname" label="Last Name" validation="required|string" />
  <reforms-input type="html" name="notes" label="Notes" />
  <button type="submit" class="btn btn-success">
    Submit
  </button>
</reforms-form>

It creates form:

Example with schema

You can create form with schema:

const schema = {
    firstname: {
      type: 'string',
      attrs: {
        validation: 'required',
        label: 'First name'
      }
    },
    lastname: {
      type: 'string',
      attrs: {
        validation: 'required',
        label: 'Last name'
      }
    },
    notes: {
      type: 'html',
      attrs: {
        label: 'Notes',
      }
    }
};

And pass it to form:

<reforms-form :schema="schema">
  <button type="submit" class="btn btn-success">
    Submit
  </button>
</reforms-form>

Documentation

https://reforms.js.org/documentation/

License

MIT

Copyright © 2021 EMPLA GROUP, LLP

Made with ❤️ by Malik Zharykov️