src/boot/plugins.ts

@@ -2,22 +2,29 @@ import { boot } from 'quasar/wrappers';
 import { RouteConfig } from 'vue-router';
 import { Module } from 'vuex';
 
-interface PluginRouteConfig extends RouteConfig {
+const config = {
-  example?: unknown;
+  // Do not change required Modules !!
-}
+  requiredModules: ['user'],
+  // here you can import plugins.
+  loadModules: ['plugin1', 'user-plugin']
+};
 
-interface EssentialLink {
+// do not change anything here !!
-  title: string;
+
+interface ShortCutLink {
   link: string;
-  icon?: string;
+  icon: string;
 }
 
 interface Plugin {
   name: string;
-  routes: PluginRouteConfig[] | RouteConfig[];
+  routes: RouteConfig[];
   store?: Module<never, never>[];
   mainLink: PluginMainLink;
   requiredModules: string[];
+  shortCuts: ShortCutLink[];
+  shortCutsOut: ShortCutLink[];
+  version: string;
 }
 
 interface PluginMainLink extends PluginChildLink {
@@ -31,15 +38,29 @@ interface PluginChildLink {
   icon: string;
 }
 
-const config = {
+interface LoadedPlugin {
-  // Do not change required Modules !!
+  name: string;
-  requiredModules: ['user'],
+  version: string;
-  // here you can import plugins.
+}
-  loadModules: ['plugin1', 'user-plugin']
+
+interface LoadedPlugins {
+  plugins: LoadedPlugin[];
+  routes: RouteConfig[];
+  mainLinks: PluginMainLink[];
+  shortcuts: ShortCutLink[];
+  shortcutsOut: ShortCutLink[];
+}
+
+export {
+  Plugin,
+  PluginChildLink,
+  PluginMainLink,
+  ShortCutLink,
+  LoadedPlugins,
+  LoadedPlugin
 };
 
-export { PluginRouteConfig, Plugin, PluginChildLink, PluginMainLink };
+// combine routes from source to target
-
 function combineRoutes(
   target: RouteConfig[],
   source: RouteConfig[]
@@ -52,6 +73,7 @@ function combineRoutes(
       }
     );
     if (targetRouteConfig) {
+      // if exists first layer in target exist iterate through 2nd layer e.g. /main/user, /main/about
       sourceRouteConfig.children?.forEach(
         (sourcePluginChildRouteConfig: RouteConfig) => {
           const targetPluginRouteConfig:
@@ -62,16 +84,20 @@ function combineRoutes(
             }
           );
           if (targetPluginRouteConfig) {
+            // if 2nd layer in target exist check if target has children path.
             if (targetPluginRouteConfig.children) {
+              // if target has children path, add children from source.
               targetPluginRouteConfig.children = Object.assign(
                 targetPluginRouteConfig.children,
                 sourcePluginChildRouteConfig.children
               );
             } else {
+              // if not set children of targen from children of source
               targetPluginRouteConfig.children =
                 sourcePluginChildRouteConfig.children;
             }
           } else {
+            // if target not exists in 2nd layer, add source to children of first targen
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             targetRouteConfig.children.push(sourcePluginChildRouteConfig);
@@ -79,90 +105,105 @@ function combineRoutes(
         }
       );
     } else {
+      // if target not exists in first layer, add source
       target.push(sourceRouteConfig);
     }
   });
   return target;
 }
 
+// combine Links of Plugins from source to target
 function combineMainLinks(
   target: PluginMainLink[],
   source: PluginMainLink
 ): PluginMainLink[] {
-  console.log('target', target);
-  console.log('source', source);
   const targetPluginMainLink: PluginMainLink | undefined = target.find(
     (targetPluginMainLink: PluginMainLink) => {
       console.log(targetPluginMainLink.title, source.title);
       return targetPluginMainLink.title == source.title;
     }
   );
-  console.log('targetPluginMainLink', targetPluginMainLink);
   if (targetPluginMainLink) {
     source.children.forEach((sourcePluginChildLink: PluginChildLink) => {
       targetPluginMainLink.children.push(sourcePluginChildLink);
     });
   } else {
-    console.log('push source', source);
     target.push(source);
   }
-  console.log('merged', target);
   return target;
 }
 
+// loade plugins
+function loadPlugin(
+  loadedPlugins: LoadedPlugins,
+  modules: string[],
+  plugins: Plugin[],
+  store: any
+): LoadedPlugins {
+  modules.forEach(requiredModule => {
+    const plugin = plugins.find(plugin => {
+      return plugin.name == requiredModule;
+    });
+    if (plugin) {
+      loadedPlugins.routes = combineRoutes(loadedPlugins.routes, plugin.routes);
+      if (plugin.store) {
+        plugin.store.forEach(store_module => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+          store.registerModule(store_module);
+        });
+      }
+      loadedPlugins.mainLinks = combineMainLinks(
+        loadedPlugins.mainLinks,
+        plugin.mainLink
+      );
+      loadedPlugins.shortcuts.concat(plugin.shortCuts);
+      loadedPlugins.shortcutsOut.concat(plugin.shortCutsOut);
+      loadedPlugins.plugins.push({
+        name: plugin.name,
+        version: plugin.version
+      });
+    } else {
+      console.exception(`Don't find required Plugin ${requiredModule}`);
+    }
+  });
+  return loadedPlugins;
+}
+
 // "async" is optional;
 // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
 export default boot(({ Vue, router, store }) => {
-  const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
-  let pluginMainLinks: PluginMainLink[] = [];
   const plugins: Plugin[] = [];
+  let loadedPlugins: LoadedPlugins = {
+    routes: [],
+    plugins: [],
+    mainLinks: [],
+    shortcuts: [],
+    shortcutsOut: []
+  };
+
+  // get all plugins
+  const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
   pluginsContext.keys().forEach((fileName: string) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     plugins.push(pluginsContext(fileName).default);
   });
 
-  let routes: RouteConfig[] = [];
+  // load plugins
+  loadedPlugins = loadPlugin(
+    loadedPlugins,
+    config.requiredModules,
+    plugins,
+    store
+  );
+  loadedPlugins = loadPlugin(loadedPlugins, config.loadModules, plugins, store);
 
-  config.requiredModules.forEach(requiredModule => {
+  console.log(loadedPlugins.routes);
-    const plugin = plugins.find(plugin => {
-      return plugin.name == requiredModule;
-    });
-    if (plugin) {
-      routes = combineRoutes(routes, plugin.routes);
-      if (plugin.store) {
-        plugin.store.forEach(store_module => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-          store.registerModule(store_module);
-        });
-      }
-      pluginMainLinks = combineMainLinks(pluginMainLinks, plugin.mainLink);
-    } else {
-      console.exception(`Don't find required Plugin ${requiredModule}`);
-    }
-  });
 
-  config.loadModules.forEach(loadModule => {
+  // add new routes for plugins
-    const plugin = plugins.find(plugin => {
+  router.addRoutes(loadedPlugins.routes);
-      return plugin.name == loadModule;
+
-    });
+  // save plugins in VM-variable
-    if (plugin) {
-      routes = combineRoutes(routes, plugin.routes);
-      if (plugin.store) {
-        plugin.store.forEach(store_module => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-          store.registerModule(store_module);
-        });
-      }
-      pluginMainLinks = combineMainLinks(pluginMainLinks, plugin.mainLink);
-    } else {
-      console.exception(`Don't find Plugin ${loadModule}`);
-    }
-  });
-  console.log(routes);
-  router.addRoutes(routes);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  Vue.prototype.$flaschengeistPluginsMainLinks = pluginMainLinks;
+  Vue.prototype.$flaschengeistPlugins = loadedPlugins;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  console.log(loadedPlugins);
-  Vue.prototype.$flaschengeistPlugins = plugins;
-  console.log(pluginMainLinks);
 });

src/components/CompositionComponent.vue

@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <p>{{ title }}</p>
-    <ul>
-      <li v-for="todo in todos" :key="todo.id" @click="increment">
-        {{ todo.id }} - {{ todo.content }}
-      </li>
-    </ul>
-    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
-    <p>Active: {{ active ? 'yes' : 'no' }}</p>
-    <p>Clicks on todos: {{ clickCount }}</p>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent, PropType, computed, ref, toRef, Ref,
-} from '@vue/composition-api';
-import { Todo, Meta } from './models';
-
-function useClickCount() {
-  const clickCount = ref(0);
-  function increment() {
-    clickCount.value += 1
-    return clickCount.value;
-  }
-
-  return { clickCount, increment };
-}
-
-function useDisplayTodo(todos: Ref<Todo[]>) {
-  const todoCount = computed(() => todos.value.length);
-  return { todoCount };
-}
-
-export default defineComponent({
-  name: 'CompositionComponent',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    todos: {
-      type: (Array as unknown) as PropType<Todo[]>,
-      default: () => []
-    },
-    meta: {
-      type: (Object as unknown) as PropType<Meta>,
-      required: true
-    },
-    active: {
-      type: Boolean
-    }
-  },
-  setup(props) {
-    return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
-  },
-});
-</script>

src/components/navigation/PluginChildrenLinks.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <essential-link
-      v-for="(link, index) in links"
-      :key="index"
-      :title="link.title"
-      :link="link.link"
-      :icon="link.icon"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-const links = [
-  { title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
-  { title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
-];
-import { defineComponent } from '@vue/composition-api';
-import EssentialLink from 'components/navigation/EssentialLink.vue';
-export default defineComponent({
-  // name: 'ComponentName'
-  components: { EssentialLink },
-  setup() {
-    return { links };
-  }
-});
-</script>

src/components/navigation/ShortCutLink.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-btn flat dense :icon="icon" :to="{ name: link }" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  name: 'ShortCutLink',
+  props: {
+    link: {
+      required: true,
+      type: String
+    },
+    icon: {
+      required: true,
+      type: String
+    }
+  }
+});
+</script>

src/layouts/MainLayout.vue

@@ -23,8 +23,12 @@
 
         <!-- Hier kommen die Shortlinks hin -->
         <div>
-          <q-btn flat round dense icon="sim_card" />
+          <short-cut-link
-          <q-btn flat round dense icon="gamepad" />
+            v-for="(shortcut, index) in $flaschengeistPlugins.shortcuts"
+            :key="'shortcut' + index"
+            :link="shortcut.link"
+            :icon="shortcut.icon"
+          />
         </div>
         <q-btn
           flat
@@ -47,7 +51,7 @@
       <!-- Plugins -->
       <q-list>
         <essential-link
-          v-for="(link, index) in $flaschengeistPluginsMainLinks"
+          v-for="(link, index) in $flaschengeistPlugins.mainLinks"
           :key="'plugin' + index"
           :title="link.title"
           :link="link.link"
@@ -101,8 +105,9 @@
 
 <script lang="ts">
 import EssentialLink from 'components/navigation/EssentialLink.vue';
+import ShortCutLink from 'components/navigation/ShortCutLink.vue';
 import { Screen } from 'quasar';
-import { PluginMainLink } from 'boot/plugins';
+import { LoadedPlugins, PluginMainLink } from 'boot/plugins';
 import { defineComponent, ref, computed } from '@vue/composition-api';
 
 const links = [
@@ -114,15 +119,30 @@ const links = [
   }
 ];
 
+const shortcuts = [
+  {
+    link: 'about',
+    icon: 'mdi-information'
+  },
+  {
+    link: 'user',
+    icon: 'mdi-account'
+  },
+  {
+    link: 'user-plugin1',
+    icon: 'mdi-account-plus'
+  }
+];
+
 declare module 'vue/types/vue' {
   interface Vue {
-    $flaschengeistPluginsMainLinks: PluginMainLink[];
+    $flaschengeistPlugins: LoadedPlugins;
   }
 }
 
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink },
+  components: { EssentialLink, ShortCutLink },
   setup(_, ctx) {
     const leftDrawer = ref(false);
 
@@ -142,7 +162,7 @@ export default defineComponent({
     const pluginChildLinks = computed(() => {
       const test:
         | PluginMainLink
-        | undefined = ctx.root.$flaschengeistPluginsMainLinks.find(
+        | undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
         (plugin: PluginMainLink) => {
           if (ctx.root.$route.matched.length > 1) {
             return plugin.name == ctx.root.$route.matched[1].name;
@@ -170,7 +190,8 @@ export default defineComponent({
       leftDrawerClicker,
       links,
       pluginChildLinks,
-      showRoute
+      showRoute,
+      shortcuts
     };
   }
 });

src/pages/Index.vue

@@ -1,49 +0,0 @@
-<template>
-  <q-page class="row items-center justify-evenly">
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
-  </q-page>
-</template>
-
-<script lang="ts">
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/CompositionComponent.vue';
-import { defineComponent, ref } from '@vue/composition-api';
-
-export default defineComponent({
-  name: 'PageIndex',
-  components: { ExampleComponent },
-  setup() {
-    const todos = ref<Todo[]>([
-      {
-        id: 1,
-        content: 'ct1'
-      },
-      {
-        id: 2,
-        content: 'ct2'
-      },
-      {
-        id: 3,
-        content: 'ct3'
-      },
-      {
-        id: 4,
-        content: 'ct4'
-      },
-      {
-        id: 5,
-        content: 'ct5'
-      }
-    ]);
-    const meta = ref<Meta>({
-      totalCount: 1200
-    });
-    return { todos, meta };
-  }
-});
-</script>

src/pages/about/About.vue

@@ -36,12 +36,12 @@
       </q-card-section>
       <q-card-section v-if="$route.name == 'about'">
         <q-chip
-          v-for="(plugin, index) in $flaschengeistPlugins"
+          v-for="(plugin, index) in $flaschengeistPlugins.plugins"
           :key="'plugin' + index"
         >
           {{ plugin.name }}
           <q-separator vertical color="black" class="q-ma-xs" />
-          Version
+          {{ plugin.version }}
         </q-chip>
       </q-card-section>
       <q-separator />

src/plugins/plugin-example/pages/Plugin.vue

@@ -15,7 +15,7 @@ import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
-    const a = ctx.root.$flaschengeistPluginsMainLinks;
+    const a = ctx.root.$flaschengeistPlugins.mainLinks;
     return { a, mainLink };
   }
 });

src/plugins/plugin-example/plugin.ts

@@ -26,7 +26,10 @@ const plugin: Plugin = {
   routes,
   mainLink,
   name: mainLink.name,
-  requiredModules: []
+  requiredModules: [],
+  shortCuts: [],
+  shortCutsOut: [],
+  version: '1.0.2'
 };
 
 export { mainLink };

src/plugins/user-plugin/pages/Plugin.vue

@@ -15,7 +15,7 @@ import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
-    const a = ctx.root.$flaschengeistPluginsMainLinks;
+    const a = ctx.root.$flaschengeistPlugins.mainLinks;
     return { a, mainLink };
   }
 });

src/plugins/user-plugin/plugin.ts

@@ -1,4 +1,4 @@
-import { Plugin, PluginMainLink } from 'boot/plugins';
+import { Plugin, PluginMainLink, ShortCutLink } from 'boot/plugins';
 import routes from './routes';
 
 const mainLink: PluginMainLink = {
@@ -22,11 +22,21 @@ const mainLink: PluginMainLink = {
   ]
 };
 
+const shortCuts: ShortCutLink[] = [
+  {
+    link: 'user-plugin2',
+    icon: 'mdi-account-minus'
+  }
+];
+
 const plugin: Plugin = {
   routes,
   mainLink,
   name: mainLink.name,
-  requiredModules: ['user']
+  requiredModules: ['user'],
+  shortCuts,
+  shortCutsOut: [],
+  version: '0.1.0'
 };
 
 export { mainLink };

src/plugins/user/pages/User.vue

@@ -21,7 +21,7 @@ import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {
-    const a = ctx.root.$flaschengeistPluginsMainLinks;
+    const a = ctx.root.$flaschengeistPlugins.mainLinks;
     return { a, mainLink };
   }
 });

src/plugins/user/plugin.ts

@@ -13,7 +13,10 @@ const plugin: Plugin = {
   routes,
   mainLink,
   name: mainLink.name,
-  requiredModules: []
+  requiredModules: [],
+  shortCutsOut: [],
+  shortCuts: [],
+  version: '0.0.1'
 };
 
 export { mainLink };