Skip to content

Commit 0398e7a

Browse files
committed
docs: add basic usage to README.md
1 parent 6e6e782 commit 0398e7a

File tree

2 files changed

+93
-2
lines changed

2 files changed

+93
-2
lines changed

README.md

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,89 @@
11
# Vue 3 Form Generator
2-
A Vue 3 version of `vue-form-generator`, a schema-based form generator.
2+
A Vue 3 version of `vue-form-generator`, a schema-based form generator.
3+
4+
## Basic usage
5+
1. Install plugin in your Vue app, this will make all necessary components globally available in your app.
6+
```javascript
7+
// ...
8+
9+
import VueFormGenerator from 'vue3-form-generator'
10+
11+
app.use(VueFormGenerator)
12+
13+
// ...
14+
```
15+
2. Define a schema inside your Vue component
16+
<br><br>
17+
#### Composition API:
18+
```vue
19+
<template>
20+
<vue-form-generator :schema="form.schema" :model="form.model"/>
21+
</template>
22+
23+
<script setup>
24+
import { ref } from 'vue'
25+
26+
const form = ref({
27+
model: {
28+
name: '',
29+
terms: false,
30+
},
31+
schema: {
32+
fields: [
33+
{
34+
name: 'name',
35+
label: 'Name',
36+
type: 'input',
37+
inputType: 'text',
38+
model: 'name',
39+
placeholder: "Write name...",
40+
readonly: false,
41+
required: true,
42+
},
43+
{
44+
name: 'terms',
45+
label: 'Accept terms and conditions',
46+
type: 'input',
47+
inputType: 'checkbox',
48+
model: 'terms',
49+
}
50+
]
51+
}
52+
})
53+
</script>
54+
```
55+
#### Options API:
56+
```vue
57+
<template>
58+
<vue-form-generator :schema="form.schema" :model="form.model"/>
59+
</template>
60+
61+
<script>
62+
export default {
63+
data () {
64+
return {
65+
form: {
66+
model: {
67+
name: '',
68+
},
69+
schema: {
70+
fields: [
71+
{
72+
name: 'name',
73+
label: 'Name',
74+
type: 'input',
75+
inputType: 'text',
76+
model: 'name',
77+
placeholder: "Write name...",
78+
readonly: false,
79+
required: true,
80+
}
81+
]
82+
}
83+
}
84+
}
85+
}
86+
}
87+
</script>
88+
```
89+

src/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { setMessages } from "@/validators/messages.js";
22
import { isObject } from "@/helpers";
3+
import { abstractField } from "@/mixins";
34

45
import FormGenerator from "@/FormGenerator.vue";
56
import FormGeneratorFields from "@/fields"
@@ -25,4 +26,7 @@ const VueFormGenerator = {
2526
validators
2627
}
2728

28-
export default VueFormGenerator;
29+
export default VueFormGenerator
30+
export {
31+
abstractField
32+
}

0 commit comments

Comments
 (0)