Use a json file is used to describe the page structure and a UI page is automatically generated

Last update: Jan 12, 2019

schema-render-vue

中文文档

Use a json file is used to describe the page structure and a UI page is automatically generated.

Demo

Install

npm install --save schema-render-vue

Usage

In your Vue file:

">
<template>
  <SchemaRenderVue :schema="schema" :components="components" />
template>

<script>
import SchemaRenderVue from 'schema-render-vue'
import Avatar from 'Avatar.vue'
import schema from 'schema.js'
export default {
  data() {
    return {
      schema: schema,
      components: {
        Avatar
      }
    }
  }
}
script>

The sample of schema:

export default {
  component: 'Avatar',
  attributes: {
    props: {
      // your props
    }
  },
  children: [
    // child components
    {
      component: 'Name',
      attributes: {}
    }
  ]
}

API

props

  • schema Object default: {}

    The JSON Schema object.

  • components Object default: {}

    Custom component list

GitHub

https://github.com/imhxc/schema-render-vue
You might also like...

A JSON Scheme parse for Form with Element-UI

A JSON Scheme parse for Form with Element-UI

vue-form A JSON Scheme parse for Form with Element-UI support switch,input,input-number,select,radio,checkbox,date components. support minimun,maximun

Aug 10, 2021

https://json-drived-configurable-platform.github.io/form-generator-iview

form-generator-iview description A form generator with json schema based on iview ui. design developer zhengxkq, BingBlog, longkele xiaomiCat, changyu

Feb 15, 2022

A Form Render Based on JSON Schema for Vue

A Form Render Based on JSON Schema for Vue

vue-schema-render A Form Render Based on JSON Schema for Vue Features 内置 ElementUI 组件 支持自定义组件 支持自由布局 支持样式覆盖 支持多语言 支持列表组件拖拽 支持无限嵌套表单以及嵌套校验,自定义校验规则 支持组件

Jan 1, 2022

VueJS library for generating forms from JSON schemas

vue-json-schema-form Generate forms from your JSON schemas! ✨ Background JSON Schema makes it possible to define form validation rules in an environme

Apr 28, 2022

Easy to use AJAX forms written to handle symfony form errors

vue-symfony-form Easy to use AJAX forms written to handle symfony form errors. Set Up Enable symfony-form plugin and add connector: import symfonyForm

Aug 19, 2021

Form Building using drag-and-drop. Uses Quasar Framework and Vue.

Form Building using drag-and-drop. Uses Quasar Framework and Vue.

QFormBuilder Simple, reusable, drag-and-drop form editor (and renderer) for Quasar (v1) and Vue.js Live Demo Application (Live demo source) Want to bu

Jul 1, 2022

This component is a form with validation and more using only javascript objects

ic-formly This component is a form with validation and more using only javascript objects Installation Using yarn yarn add ic-formly Using npm npm i -

Jul 30, 2020

A set of Vue components to rapidly build forms with Tailwind CSS v2.0. It supports validation, model binding, includes default vendor styling and is fully customizable!

A set of Vue components to rapidly build forms with Tailwind CSS v2.0. It supports validation, model binding, includes default vendor styling and is fully customizable!

Jun 28, 2022

A Notion-like forn using Vue 3, Vite and TailwindCSS

Vue Contenteditable Form Prototype: A Notion-like Form written in Vue 3, Vite, and TailwindCSS Demo Live Demo Installation Use the package manager npm

Mar 31, 2022
form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON
form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

Jul 5, 2022
Build powerful vue form with JSON schema and composition api.
Build powerful vue form with JSON schema and composition api.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

Jun 20, 2022
Build powerful vue form with JSON schema and composition api.
Build powerful vue form with JSON schema and composition api.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

Jun 30, 2022
Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚡️
Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚡️

Blitzar Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚡️ npm i blitzar Documentation Vue 3 blitzar.cycraft.co Vue 2 blitzar0.

Jun 19, 2022
📝 A JSON configuration Render form Component for Vue.js and Element-UI

?? A JSON configuration Render form Component for Vue.js and Element-UI

Nov 4, 2020
Build forms with textfield, options, checkboxes, datatables and ... by defining a schema in json

WorkInProgress Vuetify FormJSON Demos: Example: Showcase Example: 2 way binding Example: FormSchema builder Example: Full features Example: Datatable

Jun 8, 2020
Generate form based on standard json-schema and customize it using ui-schema

FFV Form For Vue Generate form based on standard json-schema and customize it using ui-schema Installation npm install --save ffv Usage Bundler (Webpa

Aug 23, 2019
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )

ncform 中文版 ncform, a nice form development way that generates form UIs and their interactions with just configuration. Comes with standard components

Jun 28, 2022
Vue Form 是一套基于 JSON Schema 使用 Vue.js 自动生成表单的库

Vue Form Vue Form 是一套基于 JSON Schema 使用 Vue.js 自动生成表单的库。 特性 使用 JSON Schema 校验表单(基于ajv) 使用 Form Definition 简化表单类型、属性、顺序定义 实现了常见的表单元素 支持数组动态增减、上下拖拽移动 支持编

May 11, 2022
Cheetah Forms - An Json Based Form Generator for Vuetify
Cheetah Forms - An Json Based Form Generator for Vuetify

Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON

May 5, 2021