Skip to content

Commit c59bb0d

Browse files
committed
Merge remote-tracking branch 'origin/main'
# Conflicts: # README.md
2 parents f5f8884 + 3bb989c commit c59bb0d

File tree

1 file changed

+14
-83
lines changed

1 file changed

+14
-83
lines changed

README.md

Lines changed: 14 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,92 +4,23 @@
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+

0 commit comments

Comments
 (0)