# vue-formulario

> > Form validator with mongoose-like schema validator for [Vue 3](https://vuejs.org/).

Latest version **1.2.0** (published 2023-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-formulario
pnpm add vue-formulario
yarn add vue-formulario
bun add vue-formulario
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-02-22 |
| First published | 2021-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Arthur Ronconi |
| Maintainers | webarthur |

## Links

- npm: https://www.npmjs.com/package/vue-formulario
- Repository: https://github.com/webarthur/vue-formulario
- Homepage: https://webarthur.github.io/vue-formulario/
- Issues: https://github.com/webarthur/vue-formulario/issues
- npm.io page: https://npm.io/package/vue-formulario

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.47

## Recent versions

- 1.2.0 (latest) — 2023-02-22
- 1.1.14 — 2022-06-09
- 1.1.13 — 2022-06-09
- 1.1.12 — 2022-06-09
- 1.1.11 — 2022-06-09
- 1.1.10 — 2022-06-09
- 1.1.9 — 2022-06-09
- 1.1.8 — 2022-04-20
- 1.1.7 — 2022-04-20
- 1.1.6 — 2022-04-20
- 1.1.5 — 2022-04-20
- 1.1.4 — 2022-04-20
- 1.1.3 — 2022-04-20
- 1.1.2 — 2022-04-17
- 1.1.1 — 2022-04-01
- … 28 more at https://npm.io/package/vue-formulario/versions

## README

# Vue Formulario

> Form validator with mongoose-like schema validator for [Vue 3](https://vuejs.org/).

- 🔑 Mogoose-like schema validation
- 💡 Validate on submit
- ⚡️ Validate while typing
- 🛠️ Custom formats and keywords
- :speech_balloon: Custom error messages

### Try it!

[See the live demo](https://webarthur.github.io/vue-formulario/)

### Install via NPM
```sh
$ npm install vue-formulario
```

### Install via CDN
```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-formulario"></script>
<script>
  const { Formulario, Validation } = VueFormulario
  const app = Vue.createApp({
    data () {
      return {
        form: {
          name: '',
          email: ''
        },
        schema: {
          name: {
            type: String,
            required: true
          },
          email: {
            type: String,
            format: 'email',
            required: [true, 'Custom error message']
          }
        }
      }
    }
  })
  app.use(Formulario)
  app.use(Validation)
  app.mount('#app')
</script>
```

### Register as Component
```js
import { Formulario, Validation } from 'vue-formulario'

export default {
  components: {
    Formulario,
    Validation
  }
}
```

### Quick example

```vue
<template>
  <Formulario v-model="form" :schema="schema" @validated="submitForm" @error="errorHandler">
    <Validation for="firstName">
      <label>First name</label>
      <input v-model="form.firstName" type="text">
    </Validation>
    <Validation for="lastName">
      <label>Last name</label>
      <input v-model="form.lastName" type="text">
    </Validation>
    <Validation for="email">
      <label>Email</label>
      <input v-model="form.email" type="text">
    </Validation>
  </Formulario>
</template>

<script>
import { Formulario, Validation } from 'vue-formulario'

export default {

  name: 'App',

  components: {
    Formulario,
    Validation
  },

  data () {
    return {
      form: {
        firstName: '',
        lastName: '',
        email: ''
      },
      schema: {
        firstName: {
          type: String,
          required: true
        },
        lastName: {
          type: String
          required: [true, 'Custom error message']
        },
        email: {
          type: String,
          format: 'email'
        }
      }
    }
  }

}
</script>
```

## License

Vue Formulario is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-formulario · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._