Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 14 additions & 82 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,89 +1,21 @@
# Vue 3 Form Generator
A schema-based form generator component for Vue 3, based on `vue-form-generator`
A schema-based form generator component for Vue 3, based on the original
[`vue-form-generator`](https://github.com/vue-generators/vue-form-generator) library.

## Basic usage
1. Install plugin in your Vue app, this will make all necessary components globally available in your app.
```javascript
// ...
You can find documentation on the [documentation page](https://kevinkosterr.github.io/vue3-form-generator-docs).

import VueFormGenerator from '@kevinkosterr/vue3-form-generator'

app.use(VueFormGenerator)

// ...
## Building for development
1. Install the dependencies
```bash
yarn install
```
2. Define a schema inside your Vue component
<br><br>
#### Composition API:
```vue
<template>
<vue-form-generator :schema="form.schema" :model="form.model"/>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
model: {
name: '',
terms: false,
},
schema: {
fields: [
{
name: 'name',
label: 'Name',
type: 'input',
inputType: 'text',
model: 'name',
placeholder: "Write name...",
readonly: false,
required: true,
},
{
name: 'terms',
label: 'Accept terms and conditions',
type: 'input',
inputType: 'checkbox',
model: 'terms',
}
]
}
})
</script>
2. Create a schema inside the playground folder, for this you can copy `schema.example.js`.
```bash
cp playground/schema.example.js playground/schema.js
```
#### Options API:
```vue
<template>
<vue-form-generator :schema="form.schema" :model="form.model"/>
</template>

<script>
export default {
data () {
return {
form: {
model: {
name: '',
},
schema: {
fields: [
{
name: 'name',
label: 'Name',
type: 'input',
inputType: 'text',
model: 'name',
placeholder: "Write name...",
readonly: false,
required: true,
}
]
}
}
}
}
}
</script>
3. Run the development playground
```bash
yarn run dev
```