File tree Expand file tree Collapse file tree 1 file changed +14
-83
lines changed Expand file tree Collapse file tree 1 file changed +14
-83
lines changed Original file line number Diff line number Diff line change 44![ NPM Version] ( https://img.shields.io/npm/v/%40kevinkosterr%2Fvue3-form-generator?logo=npm )
55![ GitHub License] ( https://img.shields.io/github/license/kevinkosterr/vue3-form-generator )
66<br >
7- A schema-based form generator component for Vue 3, based on ` vue-form-generator `
7+ A schema-based form generator component for Vue 3, based on the original
8+ [ ` vue-form-generator ` ] ( https://github.com/vue-generators/vue-form-generator ) library.
89
10+ You can find documentation on the [ documentation page] ( https://kevinkosterr.github.io/vue3-form-generator-docs ) .
911
10- ## Basic usage
11- 1 . Install plugin in your Vue app, this will make all necessary components globally available in your app.
12- ``` javascript
13- // ...
14-
15- import VueFormGenerator from ' @kevinkosterr/vue3-form-generator'
16-
17- app .use (VueFormGenerator)
18-
19- // ...
12+ ## Building for development
13+ 1 . Install the dependencies
14+ ``` bash
15+ yarn install
2016```
21- 2 . Define a schema inside your Vue component
22- <br ><br >
23- #### Composition API:
24- ``` vue
25- <template>
26- <vue-form-generator :schema="form.schema" :model="form.model"/>
27- </template>
28-
29- <script setup>
30- import { ref } from 'vue'
31-
32- const form = ref({
33- model: {
34- name: '',
35- terms: false,
36- },
37- schema: {
38- fields: [
39- {
40- name: 'name',
41- label: 'Name',
42- type: 'input',
43- inputType: 'text',
44- model: 'name',
45- placeholder: "Write name...",
46- readonly: false,
47- required: true,
48- },
49- {
50- name: 'terms',
51- label: 'Accept terms and conditions',
52- type: 'input',
53- inputType: 'checkbox',
54- model: 'terms',
55- }
56- ]
57- }
58- })
59- </script>
17+ 2 . Create a schema inside the playground folder, for this you can copy ` schema.example.js ` .
18+ ``` bash
19+ cp playground/schema.example.js playground/schema.js
6020```
61- #### Options API:
62- ``` vue
63- <template>
64- <vue-form-generator :schema="form.schema" :model="form.model"/>
65- </template>
66-
67- <script>
68- export default {
69- data () {
70- return {
71- form: {
72- model: {
73- name: '',
74- },
75- schema: {
76- fields: [
77- {
78- name: 'name',
79- label: 'Name',
80- type: 'input',
81- inputType: 'text',
82- model: 'name',
83- placeholder: "Write name...",
84- readonly: false,
85- required: true,
86- }
87- ]
88- }
89- }
90- }
91- }
92- }
93- </script>
21+ 3 . Run the development playground
22+ ``` bash
23+ yarn run dev
9424```
9525
26+
You can’t perform that action at this time.
0 commit comments