idea: load components dynamic

build/media_source/system/js/fields/pagebuilder/pagebuilder.js

@@ -4,7 +4,7 @@ import VueJsModal from 'vue-js-modal';
 import App from './components/app.vue';
 import Translate from './plugins/translate';
 import editelement from './components/settings/editelement.vue';
-import Devices from './components/settings/devices.vue';
+//import Devices from './components/settings/devices.vue';
 import AddElementModal from './components/modals/modal-add-element.vue';
 import store from './store/store';
 import Item from './components/elements/item.vue';
@@ -15,8 +15,15 @@ import VueGridLayout from 'vue-grid-layout';
 Vue.use(Translate);
 Vue.use(VueJsModal);
 
+import componentsJSON from './plugin.components.json';
+
+Object.entries(componentsJSON).forEach( item => {
+  console.log(item[1].basename)
+  Vue.component( item[1].basename, require(`${item[1].path}`).default  );
+})
+
 // Use the Components
-Vue.component('devices', Devices);
+//Vue.component('devices', Devices);
 Vue.component('item', Item);
 Vue.component('grid', Grid);
 Vue.component('grid-layout', VueGridLayout.GridLayout);

build/media_source/system/js/fields/pagebuilder/plugin.components.json

@@ -0,0 +1,11 @@
+{
+	"Devices": {
+		"basename": "Devices",
+		"path": "./components/settings/devices.vue",
+		"props": {
+
+		}
+	}
+}
+
+