Vuejs async하게 component import 하기

https://forum.vuejs.org/t/vue2-async-components-examples/2066/4

호환성을 위해 일반적인 방식으로 만들어진 함수 사용

function loadComponent(opts) {
   var script = document.createElement('script');

   opts.onLoad = opts.onLoad || function() {};
   opts.onError = opts.onError || function() {};

   script.src = opts.path;
   script.async = true;

   script.onload = function() {
     var component = Vue.component(opts.name);
     if (component) {
       opts.onLoad(component);
     } else {
       opts.onError();
     }
   };

   script.onerror = opts.onError;

   document.body.appendChild(script);
}

Vue에서 dynamic component와 붙여서 사용할때, 이런 식으로:

new Vue({
...
  components: {
       none: { template: "<div>None</div>" },
       dynamicComponent: function(resolve, reject) {
           loadComponent({ name: "dynamic-component", path: "static/js/dynamic_component.js", onLoad: resolve, onError: reject})
       }
   },
 ...

dynamic_components.js 에는,

Vue.component("dynamic-component, {
  template: ...
})

와 같은 Vue component 선언 문이 들어있으면 된다.