Skip to content

WIP: Vue 3 and Bootstrap 5 forms and cards generator

License

Notifications You must be signed in to change notification settings

malikzh/reforms

Repository files navigation

Reforms.js

Reforms.js

Vue 3 and Bootstrap 5 forms and cards generator


Build GitHub npm npm GitHub Repo stars


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:

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