https://github.com/malikzh/reforms

WIP: Vue 3 and Bootstrap 5 forms and cards generator
https://github.com/malikzh/reforms

bootstrap bootstrap5 form generator input javascript js schema vue vue3

Last synced: 26 days ago
JSON representation

WIP: Vue 3 and Bootstrap 5 forms and cards generator

• Host: GitHub
• URL: https://github.com/malikzh/reforms
• Owner: malikzh
• License: mit
• Created: 2021-02-18T12:29:44.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T12:07:13.000Z (over 1 year ago)
• Last Synced: 2024-04-24T11:03:12.446Z (29 days ago)
• Topics: bootstrap, bootstrap5, form, generator, input, javascript, js, schema, vue, vue3
• Language: Vue
• Homepage:
• Size: 1.3 MB
• Stars: 15
• Watchers: 2
• Forks: 1
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-vue - Reforms.js - Vue 3 and Bootstrap forms and cards generator. Validation, multiple fields, grouping, schema and more. (Components & Libraries / UI Utilities)
• awesome-stars - malikzh/reforms - WIP: Vue 3 and Bootstrap 5 forms and cards generator (Vue)

README

        





# Reforms.js

Vue 3 and Bootstrap 5 forms and cards generator

---

[![Build](https://github.com/empla/reforms/actions/workflows/build.yml/badge.svg)](https://github.com/empla/reforms/actions/workflows/build.yml)

![GitHub](https://img.shields.io/github/license/empla/reforms)

![npm](https://img.shields.io/npm/v/@empla/reforms)

![npm](https://img.shields.io/npm/dt/@empla/reforms)

![GitHub Repo stars](https://img.shields.io/github/stars/empla/reforms?style=social)

---



## 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](https://codesandbox.io/s/reforms-demo-jbpyv) 

## Installation

```sh

# Install before

npm i vue@next bootstrap@next

# Install reforms

npm i @empla/reforms

```

## Example

### Example with markup

```vue

  

  

  

  

    Submit

  

```

It creates form:

![Form](content/form1.png)

### Example with schema

You can create form with schema:

```js

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:

```vue

  

    Submit

  

```

## Documentation

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

## License

[MIT](LICENSE)

---

Copyright © 2021 EMPLA GROUP, LLP

Made with ❤️ 

by [Malik Zharykov](https://github.com/malikzh)️