Vue3 Json Schema Form powered by Vuetify 🚀

Create dynamic and user-friendly forms effortlessly with the Vue3 and Vuetify. This library is designed to simplify form creation by leveraging the JSON Schema format.

Inspired by https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/

Documentation

The documentation and some of the testing was based on the Storybook application 👉 live

Check the changelog here 👉 @latest

Sample app with schema forms configuration 👉 here

Requirements

To relieve the library of dependencies as peerDependencies library takes:

• [email protected]
• [email protected]
• [email protected] - in order to maintain the configuration from the host (e.g. token interceptor)
• [email protected] - management and formatting of dates including time zones,
• [email protected] - managing the status of each form, reference values
• [email protected] - handling translations in the library
• [email protected] - support for drag&drop interaction

For manage SFC i18n translation devDependencies:

• intlify/[email protected]

npm i [email protected] [email protected] [email protected] [email protected] [email protected] vue-i18n@9 vuedraggable@next

npm install -dev @intlify/[email protected]

Installation

You can install vue3-schema-forms using npm:

npm install vue3-schema-forms

Usage

import { createVueSchemaForms } from 'vue3-schema-forms';

const schemaForms = createVueSchemaForms({});

createApp(App)
  .use(schemaForms)
  .mount('#app');

After importing the plugin, we can invoke the form-generating component and pass the appropriate props.

<template>
  <vue-schema-forms
    v-model='model'
    :schema='schema'
    :options='formOptions'
    :default-form-actions='true'
    :validation-behaviour="'messages'"
  >
  </vue-schema-forms>
</template>

<script>
  const formOptions = ref({});
  const model = ref({});
  const schema = ref({
    type: 'object',
    properties: {
      field1: {
        label: 'Field 1',
        layout: {
          component: 'text-field',
        },
      },
    },
  });
</script>

Props description

| Name | Default | Type | Description | |---------------------|----------|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------| | model | - | object | json object in which the values collected by the form will be stored | | schema | - | Schema | JSON object conforming to the defined Schema interface, is responsible for the appearance, layout and type of fields generated by the form component | | options | - | object | JSON object in which the user can define options common to multiple form fields | | defaultFormActions | false | boolean | flag, which is responsible for the visibility of the default form buttons in the #formActions slot | | validationBehaviour | "scroll" | ValidationBehaviour | A flag that defines the validation behavior after a failed attempt to validate the form. Available options "scroll" / "messages" |

Options

In options, there are priorities in setting props for form fields:

1. Defaults (!)
2. FieldProps (!!)
3. InputType Props (!!!)
4. Specific props defined in layout (!!!!)

Example: If when defining a layout you specify props as they are in the default they will be overwritten

The following table shows the default values for each field

| Name | Default | Type | Description | |--------------------|-------------------------------------------------------------------------|--------|-----------------------------------------------------------| | digitsAfterDecimal | 2 | number | Number of decimal places in the representation of numbers | | fieldProps | - | object | Option to set props for each type of field | | textFieldProps | {'hide-details': 'auto',} | object | Option to set props for text fields | | textAreaProps | {"rows": 3, "hide-details": "auto", "auto-grow": true} | object | Option to set props for text-area fields | | radioButtonProps | {"density": "compact", "hide-details": "auto"} | object | Option to set props for radio fields | | buttonProps | - | object | Option to set props for button (duplicated section) | | checkboxProps | {"density": "compact", "hide-details": "auto", "multiple": true } | object | Option to set props for checkbox fields | | selectProps | {"hide-details": "auto"} | object | Option to set props for autocomplete/select fields |

Component slots

| Name | Description | |-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | formActions | The slot contains predefined default actions for the form: validation, reset validation and reset form. The user is free to override this slot and write his own buttons using exposed functions from the component. Just give "ref" and enjoy a ready-made validation function that takes 3 options: no parameter / scroll / messages example |

Integrated fields

| Name | Default settings | Component | Description | Link | |---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|----------------------------------------------------|----------------------------------------------------------------------------| | v-phone-input | { 'country-icon-mode': 'svg', 'countryLabel': t('countryLabel'), 'guess-country': true, 'include-countries': ['pl', 'gb', 'ru', 'de', 'us', 'es', 'fr', 'it']} | phone | International phone field for Vuetify 3 and Vue 3. | source |

Plugin options

| Name | Default | Type | Description | |------------------|---------|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | formUpdateLogger | false | boolean | enabling this option allows the console to preview the form model update event | | customComponents | - | Components | This option allows you to install your custom form fields. You need to specify the name and the component. The integration is on your side using the composables provided. |

// example of adding options
const customs = {
  'user-input': UserInput,
};

const vueSchemaForms = createVueSchemaForms({
  customComponents: customs,
  formUpdateLogger: true
});

Tests

1. cd to the project directory
2. Install development dependencies: npm install
3. Run the tests: npm test
4. Run the storybook: npm run storybook
5. Run storybook tests: npm run test-storybook

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request