Generate form based on standard json-schema and customize it using ui-schema

Last update: Aug 23, 2019

FFV

npm vue2

Form For Vue

Generate form based on standard json-schema and customize it using ui-schema

Installation

npm install --save ffv

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import Ffv from 'ffv'

Vue.use(Ffv)

Browser

">


<link rel="stylesheet" href="ffv/dist/ffv.css">link>
<script src="ffv/dist/ffv.js">script>


<link rel="stylesheet" href="https://unpkg.com/ffv/dist/ffv.css">link>
<script src="https://unpkg.com/ffv">script>

Form initialization

">
<template>
  <v-form
    :schema="schema"
    v-model="value">
  v-form>
template>

<script>
export default {
  data() {
    return {
      schema: {
        "type": "object",
        "title": "Basic Form",
        "required": [
          "firstName",
          "lastName",
        ],
        "properties": {
          "firstName": {
            "type": "string",
            "title": "First name"
          },
          "lastName": {
            "type": "string",
            "title": "Last name"
          }
        }
      },
      value: null,
    }
  }
}
script>

UiSchema

uiSchema for jsonSchema is just like what css is for HTML. We use it to instruct ffv how we want our form to be seen. To customize each prop pass available options for that widget in ui:options of that prop.

const schema = {
  type: "object",
  properties: {
    firstName: {
      type: "string",
    },
    lastName: {
      type: "string",
    }
  }
}
const uiSchema = {
  firstName: {
    "ui:options": {
      ...
    }
  },
  lastName: {
    "ui:options": {
      ...
    }
  }
}

Widgets

ffv has a very flexible approach in using widgets and props, in fact it simply add form functionality such as validation to components of your own or built-in ffv components. you can pass your own widgets or props based on ffv template or use built-in widgets and props. built-in components are listed below

widget options

  • checkbox
  • file
  • input
  • radio
  • select
  • text-area

Development

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT

GitHub

https://github.com/form-for-vue/ffv
You might also like...

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

Vue Form Components - Clean & minimal vue form elements and form builder with validation

Vue Form Components - Clean & minimal vue form elements and form builder with validation

Nov 5, 2019

Simple, lightweight, and flexible schema-based form for Vue.js

Simple, lightweight, and flexible schema-based form for Vue.js

Simple, lightweight, and flexible schema-based form for Vue.js

May 9, 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

:clipboard: A schema-based form generator component for Vue.js

:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Jul 4, 2022

Dynamic schema-based form rendering for VueJS

Dynamic schema-based form rendering for VueJS

FormVueLate 2.0 (Vue 3) Visit FormVueLate 3.0's full documentation for more detailed information and examples. Getting Started FormVueLate is a zero d

Jun 10, 2022

A schema-based form generator component for Vue.js

A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js Demo JSFiddle simple example Features multiple objects editing 19 built-in field

Mar 12, 2019

A extend schema-based form generator component for Vue.js

A extend schema-based form generator component for Vue.js

vue-form-generator-main A extend schema-based form generator component for Vue.js. Demo JSFiddle simple example Features reactive forms based on schem

May 19, 2020

Vue.js schema based form fields generator

vue-forminator Forminator is a "no magic", extensible, configurable, schema-based form fields factory. import Vue from 'vue'; import Forminator from '

Oct 29, 2020
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
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.

agape-form-builder forked by vue-form-builder A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, crea

Apr 5, 2021
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
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
🍻 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
Vue-form-generator: A schema-based form generator component for Vue.js
Vue-form-generator: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example Features reactive forms based on schemas multiple

Feb 4, 2019
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
FormVueLate is a zero dependency library that allows you to generate schema-driven forms with extreme ease
FormVueLate is a zero dependency library that allows you to generate schema-driven forms with extreme ease

FormVueLate Visit FormVueLate 3.0's full documentation for more detailed information and examples. Getting Started FormVueLate is a zero dependency li

Jun 10, 2022