Strukturänderung im Plugin

Plugins haben nun PluginRouteConfig für mainRoute und outRoute. Dabei werden die wirklichen routes, shortcuts und mainlinks daraus generiert.

src/boot/plugins.ts

@@ -2,172 +2,171 @@ import { boot } from 'quasar/wrappers';
 import { RouteConfig } from 'vue-router';
 import { Module, Store } from 'vuex';
 import { StateInterface } from 'src/store';
+import { FG_Plugin } from 'src/plugins';
+import routes from 'src/router/routes';
 
 const config = {
   // Do not change required Modules !!
-  requiredModules: ['user'],
+  requiredModules: ['User'],
   // here you can import plugins.
   loadModules: []
 };
 
 // do not change anything here !!
 
-interface ShortCutLink {
-  link: string;
-  icon: string;
-}
-
-interface Plugin {
-  name: string;
-  routes: RouteConfig[];
-  store?: Map<string, Module<any, StateInterface>>;
-  mainLink: PluginMainLink;
-  requiredModules: string[];
-  shortcuts: ShortCutLink[];
-  shortcutsOut: ShortCutLink[];
-  version: string;
-}
-
-interface PluginMainLink extends PluginChildLink {
-  children: PluginChildLink[];
-}
-
-interface PluginChildLink {
-  name: string;
-  title: string;
-  link: string;
-  icon: string;
-}
-
-interface LoadedPlugin {
-  name: string;
-  version: string;
-}
-
-interface LoadedPlugins {
-  plugins: LoadedPlugin[];
-  routes: RouteConfig[];
-  mainLinks: PluginMainLink[];
-  shortcuts: ShortCutLink[];
-  shortcutsOut: ShortCutLink[];
-}
-
-export {
-  Plugin,
-  PluginChildLink,
-  PluginMainLink,
-  ShortCutLink,
-  LoadedPlugins,
-  LoadedPlugin
-};
-
 // combine routes from source to target
-function combineRoutes (
+
+function combineRoutes(
   target: RouteConfig[],
-  source: RouteConfig[]
+  source: FG_Plugin.PluginRouteConfig[],
+  mainPath: '/' | '/main' = '/'
 ): RouteConfig[] {
-  // iterate first layer e.g. /main, / etc.
+  target.forEach(target => {
-  source.forEach((sourceRouteConfig: RouteConfig) => {
+    if (target.path === mainPath) {
-    const targetRouteConfig: RouteConfig | undefined = target.find(
+      console.log('target', target.path);
-      (routeConfig: RouteConfig) => {
+      source.forEach((sourceMainConfig: FG_Plugin.PluginRouteConfig) => {
-        return sourceRouteConfig.path == routeConfig.path;
+        console.log('sourceMainconfig', sourceMainConfig);
+        const targetMainConfig = target.children?.find(
+          (targetMainConfig: RouteConfig) => {
+            return sourceMainConfig.path === targetMainConfig.path;
           }
         );
-    if (targetRouteConfig) {
+        if (targetMainConfig) {
-      // if exists first layer in target exist iterate through 2nd layer e.g. /main/user, /main/about
+          const sourceChildren: RouteConfig[] = [];
-      sourceRouteConfig.children ?.forEach(
+          sourceMainConfig.children?.forEach(child => {
-        (sourcePluginChildRouteConfig: RouteConfig) => {
+            sourceChildren.push(<RouteConfig>child);
-          const targetPluginRouteConfig:
+          });
-            | RouteConfig
+          if (targetMainConfig.children) {
-            | undefined = targetRouteConfig.children ?.find(
+            targetMainConfig.children = Object.assign(
-              (routeConfig: RouteConfig) => {
+              targetMainConfig.children,
-                return sourcePluginChildRouteConfig.path == routeConfig.path;
+              sourceChildren
-              }
-            );
-          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
+            targetMainConfig.children = sourceChildren;
-              targetPluginRouteConfig.children =
-                sourcePluginChildRouteConfig.children;
           }
         } else {
-            // if target not exists in 2nd layer, add source to children of first targen
+          if (target.children === undefined) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            target.children = [];
-            // @ts-ignore
-            targetRouteConfig.children.push(sourcePluginChildRouteConfig);
           }
+          target.children.push(<RouteConfig>sourceMainConfig);
         }
-      );
+      });
-    } 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 (
+function combineMainLinks(
-  target: PluginMainLink[],
+  target: FG_Plugin.PluginMainLink[],
-  source: PluginMainLink
+  source: FG_Plugin.PluginRouteConfig
-): PluginMainLink[] {
+): FG_Plugin.PluginMainLink[] {
-  const targetPluginMainLink: PluginMainLink | undefined = target.find(
+  const targetPluginMainLink:
-    (targetPluginMainLink: PluginMainLink) => {
+    | FG_Plugin.PluginMainLink
+    | undefined = target.find(
+    (targetPluginMainLink: FG_Plugin.PluginMainLink) => {
       console.log(targetPluginMainLink.title, source.title);
       return targetPluginMainLink.title == source.title;
     }
   );
   if (targetPluginMainLink) {
-    source.children.forEach((sourcePluginChildLink: PluginChildLink) => {
+    source.children?.forEach(
-      targetPluginMainLink.children.push(sourcePluginChildLink);
+      (sourcePluginChildLink: FG_Plugin.PluginRouteConfig) => {
+        targetPluginMainLink.children.push(<FG_Plugin.PluginChildLink>{
+          title: sourcePluginChildLink.title,
+          icon: sourcePluginChildLink.icon,
+          link: sourcePluginChildLink.name,
+          name: sourcePluginChildLink.name
         });
+      }
+    );
   } else {
-    target.push(source);
+    const mainLink: FG_Plugin.PluginMainLink = <FG_Plugin.PluginMainLink>{
+      title: source.title,
+      icon: source.icon,
+      link: source.name,
+      name: source.name
+    };
+    source.children?.forEach(child => {
+      if (mainLink.children === undefined) {
+        mainLink.children = [];
+      }
+      mainLink.children.push(<FG_Plugin.PluginChildLink>{
+        title: child.title,
+        icon: child.icon,
+        link: child.name,
+        name: child.name
+      });
+    });
+    target.push(mainLink);
   }
   return target;
 }
 
+function loadShortCuts(
+  target: FG_Plugin.ShortCutLink[],
+  source: FG_Plugin.PluginRouteConfig[]
+): FG_Plugin.ShortCutLink[] {
+  source.forEach(route => {
+    if (route.shortcut) {
+      target.push(<FG_Plugin.ShortCutLink>{
+        link: route.name,
+        icon: route.icon
+      });
+    }
+    if (route.children) {
+      target = loadShortCuts(target, route.children);
+    }
+  });
+  return target;
+}
+
 // loade plugins
-function loadPlugin (
+function loadPlugin(
-  loadedPlugins: LoadedPlugins,
+  loadedPlugins: FG_Plugin.LoadedPlugins,
   modules: string[],
   plugins: Plugin[],
   store: Store<any>
-): LoadedPlugins {
+): FG_Plugin.LoadedPlugins {
   modules.forEach(requiredModule => {
-    const plugin = plugins.find(plugin => {
+    const plugin = <FG_Plugin.Plugin | undefined>plugins.find(plugin => {
       return plugin.name == requiredModule;
     });
     if (plugin) {
-      loadedPlugins.routes = combineRoutes(loadedPlugins.routes, plugin.routes);
+      if (plugin.mainRoutes) {
+        loadedPlugins.routes = combineRoutes(
+          loadedPlugins.routes,
+          plugin.mainRoutes,
+          '/main'
+        );
+        plugin.mainRoutes.forEach(route => {
+          loadedPlugins.mainLinks = combineMainLinks(
+            loadedPlugins.mainLinks,
+            route
+          );
+        });
+        loadedPlugins.shortcuts = loadShortCuts(
+          loadedPlugins.shortcuts,
+          plugin.mainRoutes
+        );
+      }
+      if (plugin.outRoutes) {
+        loadedPlugins.routes = combineRoutes(
+          loadedPlugins.routes,
+          plugin.outRoutes
+        );
+        loadedPlugins.shortcutsOut = loadShortCuts(
+          loadedPlugins.shortcutsOut,
+          plugin.outRoutes
+        );
+      }
       if (plugin.store) {
         console.log(plugin.store);
         console.log(plugin.store.keys());
         plugin.store.forEach((store_plugin, store_namespace) => {
           store.registerModule(store_namespace, store_plugin);
         });
-        //.forEach(store_key => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-        //store.registerModule(store_key, plugin.store.get(store_key));
-        //});
       }
-      loadedPlugins.mainLinks = combineMainLinks(
-        loadedPlugins.mainLinks,
-        plugin.mainLink
-      );
-      loadedPlugins.shortcuts = loadedPlugins.shortcuts.concat(
-        plugin.shortcuts
-      );
-      loadedPlugins.shortcutsOut = loadedPlugins.shortcutsOut.concat(
-        plugin.shortcutsOut
-      );
       loadedPlugins.plugins.push({
         name: plugin.name,
         version: plugin.version
@@ -183,8 +182,8 @@ function loadPlugin (
 // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
 export default boot<Store<StateInterface>>(({ Vue, router, store }) => {
   const plugins: Plugin[] = [];
-  let loadedPlugins: LoadedPlugins = {
+  let loadedPlugins: FG_Plugin.LoadedPlugins = {
-    routes: [],
+    routes,
     plugins: [],
     mainLinks: [],
     shortcuts: [],

src/layouts/MainLayout.vue

@@ -99,10 +99,10 @@
 import EssentialLink from 'components/navigation/EssentialLink.vue';
 import ShortCutLink from 'components/navigation/ShortCutLink.vue';
 import { Screen } from 'quasar';
-import { LoadedPlugins, PluginMainLink } from 'boot/plugins';
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
+import { FG_Plugin } from 'src/plugins';
 
 const links = [
   {
@@ -130,7 +130,7 @@ const shortcuts = [
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $flaschengeistPlugins: LoadedPlugins;
+    $flaschengeistPlugins: FG_Plugin.LoadedPlugins;
   }
 }
 
@@ -155,9 +155,9 @@ export default defineComponent({
 
     const pluginChildLinks = computed(() => {
       const link:
-        | PluginMainLink
+        | FG_Plugin.PluginMainLink
         | undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
-        (plugin: PluginMainLink) => {
+        (plugin: FG_Plugin.PluginMainLink) => {
           if (ctx.root.$route.matched.length > 1) {
             return plugin.name == ctx.root.$route.matched[1].name;
           }

src/plugins.d.ts

@@ -0,0 +1,49 @@
+import { RouteConfig } from 'vue-router';
+import { Module } from 'vuex';
+import { StateInterface } from 'src/store';
+declare namespace FG_Plugin {
+  interface ShortCutLink {
+    link: string;
+    icon: string;
+  }
+
+  interface PluginRouteConfig extends RouteConfig {
+    shortcut?: boolean;
+    title: string;
+    icon: string;
+    children?: PluginRouteConfig[];
+  }
+
+  interface Plugin {
+    name: string;
+    mainRoutes?: PluginRouteConfig[];
+    outRoutes?: PluginRouteConfig[];
+    store?: Map<string, Module<any, StateInterface>>;
+    requiredModules: string[];
+    version: string;
+  }
+
+  interface PluginMainLink extends PluginChildLink {
+    children: PluginChildLink[];
+  }
+
+  interface PluginChildLink {
+    name: string;
+    title: string;
+    link: string;
+    icon: string;
+  }
+
+  interface LoadedPlugin {
+    name: string;
+    version: string;
+  }
+
+  interface LoadedPlugins {
+    plugins: LoadedPlugin[];
+    routes: RouteConfig[];
+    mainLinks: PluginMainLink[];
+    shortcuts: ShortCutLink[];
+    shortcutsOut: ShortCutLink[];
+  }
+}

src/plugins/plugin-example/components/navigation/PluginLinks.vue

@@ -1,32 +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 Plugin1',
-    link: 'plugin1_1',
-    icon: 'mdi-information-outline'
-  },
-  { title: 'Altes Plugin1', link: 'plugin1_2', icon: 'mdi-information-variant' }
-];
-
-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/plugins/plugin-example/pages/NewPlugin.vue

@@ -1,17 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section> Neues {{ mainLink.title }} </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-
-export default defineComponent({
-  // name: 'PageName'
-  setup() {
-    return { mainLink };
-  }
-});
-</script>

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

@@ -1,16 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section> Altes {{ mainLink.title }} </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-export default defineComponent({
-  // name: 'PageName'
-  setup() {
-    return { mainLink };
-  }
-});
-</script>

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

@@ -1,22 +0,0 @@
-<template>
-  <q-page padding class="fit row justify-center content-center items-center">
-    <q-card class="col-4" height="" v-if="$route.name == mainLink.link">
-      <q-card-section>
-        {{ mainLink.title }}
-      </q-card-section>
-    </q-card>
-    <router-view />
-  </q-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-export default defineComponent({
-  // name: 'PageName'
-  setup(_, ctx) {
-    const a = ctx.root.$flaschengeistPlugins.mainLinks;
-    return { a, mainLink };
-  }
-});
-</script>

src/plugins/plugin-example/plugin.ts

@@ -1,37 +0,0 @@
-import { Plugin, PluginMainLink, ShortCutLink } from 'boot/plugins';
-import routes from 'src/plugins/plugin-example/routes';
-
-const mainLink: PluginMainLink = {
-  name: 'plugin1',
-  title: 'Plugin1',
-  link: 'plugin1',
-  icon: 'mdi-toy-brick',
-  children: [
-    {
-      name: 'plugin1',
-      title: 'Neues Plugin1',
-      link: 'plugin1_1',
-      icon: 'mdi-information-outline'
-    },
-    {
-      name: 'plugin1',
-      title: 'Altes Plugin1',
-      link: 'plugin1_2',
-      icon: 'mdi-information-variant'
-    }
-  ]
-};
-
-const plugin: Plugin = {
-  routes,
-  mainLink,
-  name: mainLink.name,
-  requiredModules: [],
-  shortcuts: [],
-  shortcutsOut: [],
-  version: '1.0.2'
-};
-
-export { mainLink };
-
-export default plugin;

src/plugins/plugin-example/routes/index.ts

@@ -1,37 +0,0 @@
-import { RouteConfig } from 'vue-router';
-
-const routes: RouteConfig[] = [
-  {
-    path: '/main',
-    components: {
-      default: () => import('layouts/MainLayout.vue')
-    },
-    children: [
-      {
-        path: 'plugin1',
-        name: 'plugin1',
-        meta: { permissions: ['user'] },
-        components: {
-          default: () => import('../pages/Plugin.vue'),
-          'plugin-nav': () => import('../components/navigation/PluginLinks.vue')
-        },
-        children: [
-          {
-            path: 'plugin1_1',
-            name: 'plugin1_1',
-            meta: { permissions: ['user'] },
-            component: () => import('../pages/NewPlugin.vue')
-          },
-          {
-            path: 'plugin1_2',
-            name: 'plugin1_2',
-            meta: { permissions: ['user'] },
-            component: () => import('../pages/OldPlugin.vue')
-          }
-        ]
-      }
-    ]
-  }
-];
-
-export default routes;

src/plugins/user-plugin/components/navigation/PluginLinks.vue

@@ -1,32 +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 Plugin2',
-    link: 'plugin2_1',
-    icon: 'mdi-information-outline'
-  },
-  { title: 'Altes Plugin2', link: 'plugin2_2', icon: 'mdi-information-variant' }
-];
-
-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/plugins/user-plugin/pages/NewPlugin.vue

@@ -1,17 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section> Neues {{ mainLink.title }} </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-
-export default defineComponent({
-  // name: 'PageName'
-  setup() {
-    return { mainLink };
-  }
-});
-</script>

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

@@ -1,16 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section> Altes {{ mainLink.title }} </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-export default defineComponent({
-  // name: 'PageName'
-  setup() {
-    return { mainLink };
-  }
-});
-</script>

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

@@ -1,22 +0,0 @@
-<template>
-  <q-page padding class="fit row justify-center content-center items-center">
-    <q-card class="col-4" height="" v-if="$route.name == mainLink.link">
-      <q-card-section>
-        {{ mainLink.title }}
-      </q-card-section>
-    </q-card>
-    <router-view />
-  </q-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-export default defineComponent({
-  // name: 'PageName'
-  setup(_, ctx) {
-    const a = ctx.root.$flaschengeistPlugins.mainLinks;
-    return { a, mainLink };
-  }
-});
-</script>

src/plugins/user-plugin/plugin.ts

@@ -1,43 +0,0 @@
-import { Plugin, PluginMainLink, ShortCutLink } from 'boot/plugins';
-import routes from './routes';
-
-const mainLink: PluginMainLink = {
-  name: 'user-plugin',
-  title: 'User',
-  link: 'user',
-  icon: 'mdi-account',
-  children: [
-    {
-      name: 'user-plugin',
-      title: 'Erstes Plugin für User',
-      link: 'user-plugin1',
-      icon: 'mdi-account-plus'
-    },
-    {
-      name: 'user-plugin',
-      title: 'Zweites Plugin für User',
-      link: 'user-plugin2',
-      icon: 'mdi-account-minus'
-    }
-  ]
-};
-
-const shortcuts: ShortCutLink[] = [
-  {
-    link: 'user-plugin2',
-    icon: 'mdi-account-minus'
-  }
-];
-
-const plugin: Plugin = {
-  routes,
-  mainLink,
-  name: mainLink.name,
-  requiredModules: ['user'],
-  shortcuts,
-  shortcutsOut: [],
-  version: '0.1.0'
-};
-
-export { mainLink };
-export default plugin;

src/plugins/user-plugin/routes/index.ts

@@ -1,31 +0,0 @@
-import { RouteConfig } from 'vue-router';
-
-const routes: RouteConfig[] = [
-  {
-    path: '/main',
-    components: {
-      default: () => import('layouts/MainLayout.vue')
-    },
-    children: [
-      {
-        path: 'user',
-        name: 'user',
-        component: () => import('src/plugins/user/pages/User.vue'),
-        children: [
-          {
-            path: 'user-plugin',
-            name: 'user-plugin1',
-            component: () => import('../pages/NewPlugin.vue')
-          },
-          {
-            path: 'user-plugin2',
-            name: 'user-plugin2',
-            component: () => import('../pages/OldPlugin.vue')
-          }
-        ]
-      }
-    ]
-  }
-];
-
-export default routes;

src/plugins/user/pages/MainPage.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <q-page padding v-if="checkMain">
+      <q-card>
+        <q-card-section>
+          <q-list
+            v-for="(mainRoute, index) in mainRoutes"
+            :key="'mainRoute' + index"
+          >
+            <essential-link
+              v-for="(route, index2) in mainRoute.children"
+              :key="'route' + index2"
+              :title="route.title"
+              :icon="route.icon"
+              :link="route.name"
+            />
+          </q-list>
+        </q-card-section>
+      </q-card>
+    </q-page>
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import EssentialLink from 'src/components/navigation/EssentialLink.vue';
+import mainRoutes from 'src/plugins/user/routes';
+export default defineComponent({
+  // name: 'PageName'
+  components: { EssentialLink },
+  setup(_, { root }) {
+    const checkMain = computed(() => {
+      return root.$route.matched.length == 2;
+    });
+    return { checkMain, mainRoutes };
+  }
+});
+</script>

src/plugins/user/pages/User.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <q-page
+    <q-page padding class="fit row justify-center content-center items-center">
-      padding
-      class="fit row justify-center content-center items-center"
-      v-if="checkMain"
-    >
       <q-card class="col-4" height="">
         <q-card-section>
           Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
@@ -18,13 +14,11 @@
         </q-card-section>
       </q-card>
     </q-page>
-    <router-view />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
-import { mainLink } from '../plugin';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 
@@ -37,10 +31,7 @@ export default defineComponent({
 
     const sessionObj = computed(() => store.state.user.session);
 
-    const checkMain = computed(() => {
+    return { userObj, sessionObj };
-      return mainLink.name == root.$route.name;
-    });
-    return { userObj, sessionObj, checkMain };
   }
 });
 </script>

src/plugins/user/plugin.ts

@@ -1,32 +1,14 @@
-import { Plugin, PluginMainLink } from 'boot/plugins';
 import { Module } from 'vuex';
 import userStore from './store/user';
 import sessionsStore from './store/session';
 import routes from './routes';
 import { StateInterface } from 'src/store';
+import { FG_Plugin } from 'src/plugins';
 
-const mainLink: PluginMainLink = {
+const plugin: FG_Plugin.Plugin = {
-  name: 'user',
+  name: 'User',
-  title: 'loadFromStore("user/displayName")',
+  mainRoutes: routes,
-  link: 'user',
-  icon: 'mdi-account',
-  children: [
-    {
-      name: 'user',
-      title: 'Einstellungen',
-      link: 'user-settings',
-      icon: 'mdi-cog'
-    }
-  ]
-};
-
-const plugin: Plugin = {
-  routes,
-  mainLink,
-  name: mainLink.name,
   requiredModules: [],
-  shortcutsOut: [],
-  shortcuts: [],
   version: '0.0.1',
   store: new Map<string, Module<any, StateInterface>>([
     ['user', userStore],
@@ -34,6 +16,4 @@ const plugin: Plugin = {
   ])
 };
 
-export { mainLink };
-
 export default plugin;

src/plugins/user/routes/index.ts

@@ -1,26 +1,33 @@
-import { RouteConfig } from 'vue-router';
+import { FG_Plugin } from 'src/plugins';
-
+const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
-const routes: RouteConfig[] = [
-  {
-    path: '/main',
-    component: () => import('layouts/MainLayout.vue'),
-    children: [
   {
+    title: 'loadFromStore("user/displayName")',
+    icon: 'mdi-account',
     path: 'user',
     name: 'user',
-        component: () => import('../pages/User.vue'),
+    component: () => import('../pages/MainPage.vue'),
     meta: { permission: 'user' },
     children: [
       {
+        title: 'Hauptkanal',
+        icon: 'mdi-account-hard-hat',
+        path: 'user-main',
+        name: 'user-main',
+        shortcut: false,
+        meta: { permission: 'user' },
+        component: () => import('../pages/User.vue')
+      },
+      {
+        title: 'Einstellungen',
+        icon: 'mdi-cog',
         path: 'settings',
         name: 'user-settings',
+        shortcut: true,
         meta: { permission: 'user' },
         component: () => import('../pages/Settings.vue')
       }
     ]
   }
-    ]
-  }
 ];
 
-export default routes;
+export default mainRoutes;

src/plugins/user/store/user.ts

@@ -73,7 +73,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
         LocalStorage.set('user', response.data.user);
         LocalStorage.set('session', response.data.session);
 
-        void Router.push({ name: 'user' });
+        void Router.push({ name: 'user-main' });
       })
       .catch(error => {
         console.exception(error);

src/router/index.ts

@@ -1,7 +1,6 @@
 import { route } from 'quasar/wrappers';
 import VueRouter from 'vue-router';
 import { Store } from 'vuex';
-import routes from './routes';
 import { StateInterface } from 'src/store';
 
 /*
@@ -10,7 +9,6 @@ import { StateInterface } from 'src/store';
  */
 export const Router: VueRouter = new VueRouter({
   scrollBehavior: () => ({ x: 0, y: 0 }),
-  routes,
 
   // Leave these as is and change from quasar.conf.js instead!
   // quasar.conf.js -> build -> vueRouterMode
@@ -19,7 +17,7 @@ export const Router: VueRouter = new VueRouter({
   base: process.env.VUE_ROUTER_BASE
 });
 
-export default route<Store<StateInterface>>(function ({ Vue }) {
+export default route<Store<StateInterface>>(function({ Vue }) {
   Vue.use(VueRouter);
 
   return Router;