Custom Fields

If you are not satisfied with the available field, you can create your own custom fields. There is only a few steps:

  1. These custom fields are like any custom components expect the need to use VueFormGenerator.abstractField as a mixins:

    <!-- fieldAwesome.vue -->
    :readonly="schema.readonly" >
    import { abstractField } from "vue-form-generator";
    export default {
    mixins: [ abstractField ]
  2. Register the new field as a global components. Registered name must validate this RegExp: (field)[A-Z][A-z]*.

    /* main.js */
    import Vue from "vue";
    import VueFormGenerator from "vue-form-generator";
    // Register my awesome field
    import fieldAwesome from "./fieldAwesome.vue";
    Vue.component("fieldAwesome", fieldAwesome);
  3. Last step is to use it in your schema

    var schema: {
    fields: [{
    type: "awesome",
    label: "Awesome (custom field)",
    model: "userName"

If you decide to release your custom field into the wild, please open a new issue so we can add you to a list on the README. Please try to use this naming convention for your custom field : vfg-field-* Exemple :

  • vfg-field-myfield

  • vfg-field-calendar

  • vfg-field-awesome-dropdown

This way, it will be easier for everyone to find it. Thank you !