https://github.com/alaa-aqeel/veebuilder
Builder Form with Vue3+VeeValidate
https://github.com/alaa-aqeel/veebuilder
formbuilder scheama vee-validate vite vitejs vue vue3 vuejs
Last synced: about 2 months ago
JSON representation
Builder Form with Vue3+VeeValidate
- Host: GitHub
- URL: https://github.com/alaa-aqeel/veebuilder
- Owner: alaa-aqeel
- Created: 2021-11-29T10:03:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-01T01:35:28.000Z (over 4 years ago)
- Last Synced: 2025-04-10T17:05:31.090Z (about 1 year ago)
- Topics: formbuilder, scheama, vee-validate, vite, vitejs, vue, vue3, vuejs
- Language: Vue
- Homepage:
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Form Builder with Vite+Vue3+VeeValidate
VeeBuilder is form builder for `Vue3` with `VeeValidate` that makes form development a breeze.
## Download ^^
#### `$ git clone https://github.com/AlaaProg/VeeBuilder.git `
#### `$ cd ./VeeBuilder `
#### `$ npm install`
#### `$ npm run dev`
# Usage
### Init
[i18n](https://vee-validate.logaretm.com/v4/guide/i18n#using-vee-validatei18n)
```js
import VeeBuilder from "./plugins/FormBuilder"
import en from '@vee-validate/i18n/dist/locale/en.json';
app.use(VeeBuilder, locale={
en: {
...en
},
})
```
### Simple
```html
```
### Define component
```html
import { defineAsyncComponent } from 'vue';
import { FormBuilder } from './plugins/FormBuilder';
// import schema form
import schema from './form.json';
```
### schema: from.js
[Available Rules](https://vee-validate.logaretm.com/v4/guide/global-validators#available-rules)
```json
[
{
"placeholder": "Enter Email",
"class": "w-full",
"name": "email",
"rules": "required|email"
},
{
"placeholder": "Full Name",
"class": "w-full",
"name": "fullname",
"rules": "required",
"label": "Full Name"
},
{
"placeholder": "Select Avtar",
"class": "w-full",
"name": "avtar",
"rules": "required|image",
"type": "file"
}
]
```
### Slot Field
[Field Props](https://vee-validate.logaretm.com/v4/api/field#props)
```html
```
### Slot label and message error for field
```html
{{ message }}
{{ field.label }}
```
### Slot label and message error for all field
```html
{{ message }}
{{ field.label }}
```