Skip to content

Use as a custom field of vue-form-generator ‚Äč

Check out the setup in CodeSandbox.

  • Add a component using vue-form-generator's abstractField mixin

    <!-- tel-input.vue -->
      <vue-tel-input v-model="value"></vue-tel-input>
      import { abstractField } from 'vue-form-generator';
      export default {
        name: 'TelephoneInput',
        mixins: [abstractField],
  • Register the new field as a global component

    import Vue from 'vue';
    import TelInput from '<path>/tel-input.vue';
    Vue.component('field-tel-input', TelInput);
  • Now it can be used as tel-input in schema of vue-form-generator

    var schema: {
      fields: [
          type: 'tel-input',
          label: 'Awesome (tel input)',
          model: 'telephone',

    Read more on vue-form-generator's instruction page