acacha / adminlte-vue

Adminlte bootstrap template vue components
6 stars 1 forks source link

How to create vue plugin or vue components library #3

Open acacha opened 7 years ago

acacha commented 7 years ago

Example here:

acacha commented 7 years ago

Important file:

https://github.com/formly-js/vue-formly/blob/master/src/index.js

Using Vue.use and method install to extend/add components and other vue functionality:

import Components from './components/index';
import Filters from './filters/index';
import Util,{getTypes, addType, addValidationMessage} from './util';

let Formly = {
  getTypes,
  addType,
  addValidationMessage,
  install(Vue, options){

    //install our components
    Components(Vue);
    Filters(Vue);

    Vue.$formly = {getTypes, addType, addValidationMessage};
  }
};

//auto install
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Formly);
  //expose formly functions if auto installed
  window.Vue.$formly = {getTypes, addType, addValidationMessage};
}
export default Formly;

Code taken from https://github.com/formly-js/vue-formly/blob/master/src/index.js

acacha commented 7 years ago

Components installation:

import FormlyForm from './FormlyForm.vue';
import FormlyField from './FormlyField.vue';

export default function(Vue){
    Vue.component('formly-form', FormlyForm);

    Vue.component('formly-field', (resolve) => {
        /**
         * FormlyField must be loaded asyncronously so that any fields added in 
         * via Formly.addType are available
         */
        resolve(FormlyField);
    });
}

https://github.com/formly-js/vue-formly/blob/master/src/components/index.js

seemX17 commented 6 years ago

It would be great if you shared the details on creating and publishing vue components as library.