Creating Formly Fields

Before you jump into creating your own formly fields, note that there's a Formly Bootstrap project underway which will eventually have a full bootstrap setup. If you still want to make your own then carry on. It'd be a good idea to have a read through the source code for that project to see how you can bundle everything together nicely. But anyway...

Vue Formly provides a method addType which allows you to add a new field. It takes an ID and an object which should be an extended vue instance. eg:

let myNewField = Vue.extend({
  props: ['form', 'field', 'model', 'to'],
  template: '<input type="text" v-model="model[field.key]">'
});

Vue.$formly.addType('text', myNewField);

Or even better, with .vue files

//main.js
import vueFormly from 'vue-formly';
import vueFormlyBootstrap from 'vue-formly-bootstrap';

Vue.use(vueFormly);
Vue.use(vueFormlyBootstrap);

import myField from './my-field.vue';
vueFormly.addType('my-field', myField);

//my-field.vue
<template>
    <div>
        <input type="text" v-model="model[field.key]">
    </div>
</template>
<script>
//not required but this baseField has a lot of useful stuff already in it, check it out
import baseField from 'vue-formly-bootstrap/src/fields/baseField';
export default {
    mixins: [baseField]
}
</script>