File tree Expand file tree Collapse file tree 2 files changed +93
-2
lines changed Expand file tree Collapse file tree 2 files changed +93
-2
lines changed Original file line number Diff line number Diff line change 1
1
# 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
+
Original file line number Diff line number Diff line change 1
1
import { setMessages } from "@/validators/messages.js" ;
2
2
import { isObject } from "@/helpers" ;
3
+ import { abstractField } from "@/mixins" ;
3
4
4
5
import FormGenerator from "@/FormGenerator.vue" ;
5
6
import FormGeneratorFields from "@/fields"
@@ -25,4 +26,7 @@ const VueFormGenerator = {
25
26
validators
26
27
}
27
28
28
- export default VueFormGenerator ;
29
+ export default VueFormGenerator
30
+ export {
31
+ abstractField
32
+ }
You can’t perform that action at this time.
0 commit comments