vue-form-json-schema
  • Introduction
  • Installation
  • Getting started
  • API
    • vue-form-json-schema
      • components
      • options
        • ajv
      • schema
      • uiSchema
        • field
          • component
          • children
          • displayOptions
          • dynamicOptions
          • errorHandler
          • errorOptions
          • eventProp
          • fieldOptions
            • attrs
            • class
            • domProps
            • key
            • nativeOn
            • on
            • props
            • slot
            • style
          • internalModel
          • valueModel
          • valueProp
Powered by GitBook
On this page
  • Installation
  • Upgrading from v1? Check out the v2 release notes to see if and how migration affects you.
  • UMD
  • Demo
  • Minimal demo
  • Nested UI demo
  • Conditional visibility and Animation demo
  • Vue components demo
  • Vue async loading of form
  • Registration form with validation
  • UMD demos
  • Features
  • Documentation
  • Usage
  • Basic example with one field
  • Dependencies
  • TODO

Introduction

NextInstallation

Last updated 4 years ago

A based form generator, bring your components!

Use any Vue component or HTML element!

There are no prebuilt components for you to puzzle your form together with. Instead you can use any component or element which emits an event, custom or native.

Note that essentially all Vue components that uses v-model emits an input (or similar) event.

Installation

Upgrading from v1? Check out the to see if and how migration affects you.

Install from npm

npm install vue-form-json-schema

Import to your app

import Vue from 'vue';
import VueFormJsonSchema from 'vue-form-json-schema';

Vue.component('vue-form-json-schema', VueFormJsonSchema);

Check out the demos or see a minimal example in the to get started.

UMD

If you're using the UMD version you can find more examples in the examples folder of the and the .

If you want to use vue-form-json-schema directly in a browser you can do so by using the UMD version. The UMD version autoinstalls the vue-form-json-schema component if Vue is found on the window. The entire module is also available on window.VueFormJsonSchema where the named exports such as for example vfjsFieldMixin can be accessed.

Hosted by unkpg

<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>

You can substite vue-form-json-schema@latest to a fixed version, such as vue-form-json-schema@2.3.0

Installed from npm

<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>

Demo

Note that all demos use Bootstrap styling, but no styling is included in this package and it is up to you what styles should be used.

The least amount of configuration to render an input element.

Using Bootstrap classes to show how layout can be different for devices with different screen sizes. In this example two input fields will be wrapped inside a div with col-12 col-sm-6 classes. Try resizing your browser window too see it in action.

Sometimes a field should only be shown if a condition is met. Uses <transition> to provide animation.

See how to use your own or third party Vue components in vue-form-json-schema.

Loading the form from a backend? Check out this example.

A more complete example with validation and error messages

UMD demos

All the examples above are replicated using the UMD version in the examples folder of this repo.

Features

  • Supports any HTML element or Vue component

  • Small (32K uncompressed, 6.5K gzipped)

  • Layout is independent from data structure

Documentation

Usage

Basic example with one field

For using the UMD version, check out the examples folder where all the demos above are replicated using the UMD version

<template>
    <vue-form-json-schema
      v-model="model"
      :schema="schema"
      :ui-schema="uiSchema"
    >
  </vue-form-json-schema>
</template>

<script>
  export default {
    data() {
      return {
        // An object which holds the form values
        model: {},
        // A valid JSON Schema object
        schema: {
          type: 'object',
          properties: {
            firstName: {
              type: 'string',
            },
          },
        },
        // Array of HTML elements or Vue components
        uiSchema: [{
          component: 'input',
          model: 'firstName',
          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
          fieldOptions: {
            class: ['form-control'],
            on: ['input'],
            attrs: {
              placeholder: 'Please enter your first name',
            },
          },
        }],
      };
    }
  };
</script>

Dependencies

Ajv

Lodash

get, set and merge are used throughout the package. Bundle size is very important though and is always considered and so we heavily strip down lodash to only include the absolute necessities

Vue

Tested with v2.5.9 but will probably work on any version >= v2.4.0

TODO

  • Write tests

  • Add i18n support

    • Added in 1.15.2 with options.ajv.locale setting

  • Write this README

  • Use Ajv internally to validate:

    • vfs-global prop ui-schema

    • vfs-component prop ui-schema

  • Write docs

  • Publish with Gitbook

Standardized for annotation and validation (by )

For form validation using and internal validation

Minimal demo
Nested UI demo
Conditional visibility and Animation demo
Vue components demo
Vue async loading of form
Registration form with validation
Online version of the first demo
JSON schema
Ajv
Gitbook
See demo
JSON Schema
JSON schema
See Vue's guide for more info
v2 release notes
github repo
usage instructions
UMD demo below