Base on Vue 3.x, Quickly generates custom form configuration interfaces using JSON Schema.
npm i kaer-form-render --save
kear form render
depend on Ant Design of Vue to render from items.so before we use kaer form render
we need to install Ant Design of Vue
and import it to our project:
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd);
app.mount('#app');
<template>
<div>
<formRender
:schema="schema"
:formData="formData"
@on-change="change"
@on-validate="validate"
/>
</div>
</template>
<script>
import {reactive, toRefs} from 'vue';
// render index
import FormRender from 'kaer-form-render';
// form render style
import 'kaer-form-render/lib/kaer-form-render.css';
export default {
name: 'App',
setup() {
const state = reactive({
schema: {
type: 'object',
properties: {
string: {
title: 'string',
type: 'string',
maxLength: 4,
'ui:options': {
placeholder: 'enter more than 4 characters',
},
}
},
},
formData: {
string: 'aaa'
},
});
const change = (v) => {
state.formData = v;
console.log(v);
}
const validate = (v) => {
console.log(v);
}
return {
...toRefs(state),
change,
validate,
}
},
components: {
FormRender,
}
}
</script>
For extensive documentation see the examples folder or read it on form-render
Property | Description | Type | Default |
---|---|---|---|
schame | JSON Schema | object | – |
formData | formData | object | – |
Events Name | Description | Arguments |
---|---|---|
on-change | Callback function for user to trigger form update | function(value: formData) |
on-validate | Validation callback function for user to trigger form update | function(value: validates) |
If you like this project, you can support it by contributing. If you find a bug, please let me know, applying a pull request is welcome. This project needs your support. You can fix typos, add new examples, or build with me new features.
Support this project by giving it a Star ⭐
this Project inspiration from form-render but There is no similar framework for Vue 3.x
Author: muwoo
Demo: https://muwoo.github.io/vue-form-render/
Source Code: https://github.com/muwoo/vue-form-render
#vue #vuejs #javascript