minimal main.js

index.html

@@ -10,7 +10,7 @@
   <div id="vue-app">
     <div is="app">Lade, bitte warten...</div>
   </div>
-  <script src="build/main.bundle.js"></script>
+  <script src="build/baseui-main.bundle.js"></script>
 </body>
 
 </html>

src/lib/baseui.js

@@ -4,6 +4,8 @@ import VueRouter from 'vue-router';
 import Axios from 'axios';
 import JwtDecode from 'jwt-decode';
 
+import App from 'app.vue';
+
 import MyForm from 'components/my-form.vue';
 import MyInput from 'components/my-input.vue';
 import TextareaInput from 'components/textarea-input.vue';
@@ -176,5 +178,55 @@ export default {
     Vue,
     Router,
     Store,
-    Axios
+    Axios,
+    InitApp(config) { // config: {initUrl, views, el}
+        Axios.get(config.initUrl)
+            .then(results => {
+                // set navigation
+                if (!Array.isArray(results.data.routes)) {
+                    alert('invalid data in init.json, no routes');
+                    return;
+                }
+
+                // set ui config in store
+                Store.commit("setUI", results.data.ui);
+
+                // add routes
+                let routes = [];
+                let rIdx = 0;
+                results.data.routes.forEach(({ name, to, content, data }) => routes.push({
+                    name: name,
+                    path: to,
+                    meta: {
+                        title: name
+                    },
+                    component: {
+                        template: '<div id="' + name + rIdx + '">' + content + '</div>',
+                        components: config.views,
+                        data: function (data) {
+                            if (typeof data != 'object') {
+                                return () => { return {}; };
+                            }
+                            return () => { return data; };
+                        }(data)
+                    }
+                }));
+                Router.addRoutes(routes);
+                Router.beforeEach((to, from, next) => {
+                    document.title = (to.meta && to.meta.title) ? results.data.ui.title + ': ' + to.meta.title : results.data.title;
+                    next();
+                });
+
+                // load app, when init finishs
+                new Vue({
+                    el: config.el,
+                    render: h => h(App),
+                    router: Router,
+                    store: Store
+                });
+            })
+            .catch(error => {
+                alert('error loading: ' + error.message);
+            });
+    }
 };

src/main.js

@@ -1,57 +1,10 @@
-import BaseUI from './baseui.js';
+import BaseUI from './lib/baseui.js';
-import App from './app.vue';
+import Views from './views/views.js';
-// import Views from './views/views.js';
 
 
-// load views
+// load init
-import(/* webpackChunkName: "views" */ './views/views.js').then(Views => {
+BaseUI.InitApp({
-    // load init
+    el: '#vue-app',
-    BaseUI.Axios.get('conf/init.json')
+    initUrl: 'conf/init.json',
-        .then(results => {
+    views: Views
-        // set navigation
-            if (!Array.isArray(results.data.routes)) {
-                alert('invalid data in init.json, no routes');
-                return;
-            }
-
-            // set ui config in store
-            BaseUI.Store.commit("setUI", results.data.ui);
-
-            // add routes
-            let routes = [];
-            let rIdx = 0;
-            results.data.routes.forEach(({name, to, content, data}) => routes.push({
-                name: name,
-                path: to,
-                meta: {
-                    title: name
-                },
-                component: {
-                    template: '<div id="' + name + rIdx + '">' + content + '</div>',
-                    components: Views.default,
-                    data: function(data) {
-                        if (typeof data != 'object') {
-                            return () => { return {}; };
-                        }
-                        return () => { return data; };
-                    }(data)
-                }
-            }));
-            BaseUI.Router.addRoutes(routes);
-            BaseUI.Router.beforeEach((to, from, next) => {
-                document.title = (to.meta && to.meta.title) ? results.data.ui.title + ': ' + to.meta.title : results.data.title;
-                next();
-            });
-
-            // load app, when init finishs
-            new BaseUI.Vue({
-                el: '#vue-app',
-                render: h => h(App),
-                router: BaseUI.Router,
-                store: BaseUI.Store
-            });
-        })
-        .catch(error => {
-            alert('error loading: ' + error.message);
-        });
 });

webpack.config.js

@@ -30,17 +30,25 @@ if (env === 'production') {
 
 // Main Settings config
 module.exports = {
-    entry: [
+    entry: {
-        'intersection-observer',
+        lib: [
-        'babel-polyfill',
+            'intersection-observer',
-        entryPoint
+            'babel-polyfill',
-    ],
+            './src/lib/baseui.js'
+        ],
+        main: [
+            'intersection-observer',
+            'babel-polyfill',
+            entryPoint
+        ]
+    },
     devtool: 'source-map',
     output: {
         path: exportPath,
         publicPath: 'build/',
-        filename: '[name].bundle.js',
+        filename: 'baseui-[name].bundle.js',
-        chunkFilename: '[name].bundle.js'
+        library: 'baseUI',
+        libraryTarget: 'umd'
     },
     module: {
         loaders: [{