package-lock.json

@@ -1376,6 +1376,12 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "typescript": {
+          "version": "3.9.5",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+          "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
+          "dev": true
         }
       }
     },
@@ -8645,15 +8651,6 @@
         "lower-case": "1.1.4"
       }
     },
-    "node-dir": {
-      "version": "0.1.17",
-      "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
-      "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
-      "dev": true,
-      "requires": {
-        "minimatch": "3.0.4"
-      }
-    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -10912,15 +10909,6 @@
         }
       }
     },
-    "require-context": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/require-context/-/require-context-1.1.0.tgz",
-      "integrity": "sha512-nfYSy3Q9W3W1fCo0nief19bDq216IGY9+wOUsmCWAJ5jssyak0r110rvqIj4KJYoUYDxLDaeA66ONOYy4PJEUw==",
-      "dev": true,
-      "requires": {
-        "node-dir": "0.1.17"
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -12947,9 +12935,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.9.5",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
-      "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
+      "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==",
       "dev": true
     },
     "uglify-js": {

package.json

@@ -28,7 +28,7 @@
     "eslint-config-prettier": "^6.9.0",
     "eslint-loader": "^3.0.3",
     "eslint-plugin-vue": "^6.1.2",
-    "require-context": "^1.1.0"
+    "typescript": "^4.0.3"
   },
   "browserslist": [
     "last 10 Chrome versions",

quasar.conf.js

@@ -8,7 +8,6 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { configure } = require('quasar/wrappers');
-const { path } = require('path');
 
 module.exports = configure(function(ctx) {
   return {
@@ -75,11 +74,6 @@ module.exports = configure(function(ctx) {
             exclude: /node_modules/
           });
         }
-        cfg.resolve.alias = {
-          ...cfg.resolve.alias
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-          //flaschngeist_plugin: path.resolve(__dirname, './src/plugins')
-        };
       }
     },
 

src/boot/composition-api.ts

@@ -1,6 +1,7 @@
 import VueCompositionApi from '@vue/composition-api';
+import { VueConstructor } from 'vue';
 import { boot } from 'quasar/wrappers';
 
-export default boot(({ Vue }) => {
+export default boot(({ Vue }: { Vue: VueConstructor }) => {
   Vue.use(VueCompositionApi);
 });

src/boot/plugins.ts

@@ -1,7 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import { RouteConfig } from 'vue-router';
 import { Module } from 'vuex';
-import {} from 'webpack';
 
 interface PluginRouteConfig extends RouteConfig {
   example?: unknown;
@@ -15,30 +14,35 @@ interface EssentialLink {
 
 interface Plugin {
   router: PluginRouteConfig[];
-  store?: Module<any, any>;
+  store?: Module<never, never>;
-  mainLink: EssentialLink;
+  mainLink: PluginMainLink;
 }
 
-export { PluginRouteConfig, Plugin };
+interface PluginMainLink extends PluginChildLink {
+  children: PluginChildLink[] | [];
+}
+
+interface PluginChildLink {
+  name: string;
+  title: string;
+  link: string;
+  icon: string;
+}
+
+export { PluginRouteConfig, Plugin, PluginChildLink, PluginMainLink };
 
 // "async" is optional;
 // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+export default boot(({ Vue, router }) => {
-// @ts-ignore
+  const plugins = require.context('src/plugins', true, /.+\/plugin.ts$/);
-export default boot(({ Vue, router, store }) => {
+  const pluginMainLinks: PluginMainLink[] = [];
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+  plugins.keys().forEach((fileName: string) => {
-  const plugins: any = require.context('src/plugins', true, /.+\/plugin.ts$/);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-  let mop = [];
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-  plugins.keys().forEach((fileName: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
     router.addRoutes(plugins(fileName).default.router);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    mop.push(plugins(fileName).default.mainLink);
+    pluginMainLinks.push(plugins(fileName).default.mainLink);
   });
-  Vue.prototype.$flaschengeist_plugins = mop;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  Vue.prototype.$flaschengeist_plugins = pluginMainLinks;
   console.log(plugins);
 });

src/components/navigation/PluginLinksAbout.vue

@@ -1,28 +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 About', link: 'newAbout', icon: 'mdi-information-outline' },
-  { title: 'Altes About', link: 'oldAbout', 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/layouts/MainLayout.vue

@@ -48,14 +48,14 @@
       <q-list>
         <essential-link
           v-for="(link, index) in links"
-          :key="index"
+          :key="'main' + index"
           :title="link.title"
           :link="link.link"
           :icon="link.icon"
         />
         <essential-link
           v-for="(link, index) in $flaschengeist_plugins"
-          :key="index"
+          :key="'plugin' + index"
           :title="link.title"
           :link="link.link"
           :icon="link.icon"
@@ -64,7 +64,18 @@
       <q-separator />
 
       <!-- Plugin functions -->
-      <router-view name="plugin-nav" />
+      <!-- <router-view name="plugin-nav" /> -->
+      <q-list>
+        <essential-link
+          v-for="(link, index) in pluginChildLinks"
+          :key="'childPlugin' + index"
+          :title="link.title"
+          :link="link.link"
+          :icon="link.icon"
+        />
+      </q-list>
+
+      <q-btn @click="showRoute" label="test"></q-btn>
 
       <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
         <q-btn
@@ -87,18 +98,50 @@
 
 <script lang="ts">
 import EssentialLink from 'components/navigation/EssentialLink.vue';
-import { event, Screen } from 'quasar';
+import { Screen } from 'quasar';
-import { defineComponent, ref, reactive, computed } from '@vue/composition-api';
+import { PluginMainLink } from 'boot/plugins';
+import { defineComponent, ref, computed } from '@vue/composition-api';
 
 const links = [
-  { title: 'home', icon: 'mdi-home' },
+  {
-  { title: 'about', link: 'about', icon: 'mdi-information' }
+    name: 'home',
+    title: 'home',
+    icon: 'mdi-home',
+    children: [
+      { title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
+      { title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
+    ]
+  },
+  {
+    name: 'about',
+    title: 'about',
+    link: 'about',
+    icon: 'mdi-information',
+    children: [
+      {
+        title: 'Neues About',
+        link: 'newAbout',
+        icon: 'mdi-information-outline'
+      },
+      {
+        title: 'Altes About',
+        link: 'oldAbout',
+        icon: 'mdi-information-variant'
+      }
+    ]
+  }
 ];
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    $flaschengeist_plugins: PluginMainLink[];
+  }
+}
+
 export default defineComponent({
   name: 'MainLayout',
   components: { EssentialLink },
-  setup() {
+  setup(_, ctx) {
     const leftDrawer = ref(false);
 
     const leftDrawerOpen = ref(
@@ -114,7 +157,36 @@ export default defineComponent({
       }
     }
 
-    return { leftDrawerOpen, leftDrawerMini, leftDrawerClicker, links };
+    const pluginChildLinks = computed(() => {
+      const test:
+        | PluginMainLink
+        | undefined = ctx.root.$flaschengeist_plugins.find(
+        (plugin: PluginMainLink) => {
+          return plugin.name == ctx.root.$route.matched[1].name;
+        }
+      );
+      console.log(test);
+      if (typeof test == undefined) {
+        return [];
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        return test.children;
+      }
+    });
+
+    function showRoute() {
+      console.log(ctx.root.$route);
+    }
+
+    return {
+      leftDrawerOpen,
+      leftDrawerMini,
+      leftDrawerClicker,
+      links,
+      pluginChildLinks,
+      showRoute
+    };
   }
 });
 </script>

src/layouts/OutLayout.vue

@@ -1,12 +1,13 @@
 <template>
-  <q-layout view="hHh lpr lFf"> <!-- Be sure to play with the Layout demo on docs -->
+  <q-layout view="hHh lpr lFf">
+    <!-- Be sure to play with the Layout demo on docs -->
 
     <!-- (Optional) The Header -->
     <q-header elevated>
       <q-toolbar>
         <q-toolbar-title>
           <q-avatar>
-            <img src="logo.svg">
+            <img src="logo.svg" />
           </q-avatar>
           <span class="gt-xs">
             Flaschengeist
@@ -17,25 +18,18 @@
 
     <!-- (Optional) The Footer -->
 
-
     <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
 
-
     <q-page-container>
       <!-- This is where pages get injected -->
       <router-view />
     </q-page-container>
-
   </q-layout>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api'
+import { defineComponent } from '@vue/composition-api';
 export default defineComponent({
-  name: 'OutLayout',
+  name: 'OutLayout'
-
+});
-  setup() {
-    return { }
-  }
-})
 </script>

src/pages/Login.vue

@@ -38,7 +38,7 @@ import { defineComponent, ref } from '@vue/composition-api';
 
 export default defineComponent({
   // name: 'PageName'
-  setup() {
+  setup(_, ctx) {
     const username = ref('');
     const password = ref('');
     const rules = [
@@ -47,7 +47,7 @@ export default defineComponent({
 
     function doLogin() {
       console.log(username.value, password.value);
-      this.$router.push({ name: 'home' });
+      void ctx.root.$router.push({ name: 'home' });
     }
 
     return { username, password, doLogin, rules };

src/pages/home/Home.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 export default defineComponent({
   // name: 'PageName'
   setup(_, ctx) {

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

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'

src/plugins/plugin-example-2/plugin.ts

@@ -1,10 +1,28 @@
-import { PluginRouteConfig, Plugin } from 'boot/plugins';
+import { Plugin } from 'boot/plugins';
-import { RouteConfig } from 'vue-router';
 import routes from 'src/plugins/plugin-example-2/routes';
 
 const plugin: Plugin = {
   router: routes,
-  mainLink: { title: 'Plugin2', link: 'plugin2', icon: 'mdi-toy-brick-plus' }
+  mainLink: {
+    name: 'plugin2',
+    title: 'Plugin2',
+    link: 'plugin2',
+    icon: 'mdi-toy-brick-plus',
+    children: [
+      {
+        name: 'plugin2',
+        title: 'Neues Plugin2',
+        link: 'plugin2_1',
+        icon: 'mdi-information-outline'
+      },
+      {
+        name: 'plugin2',
+        title: 'Altes Plugin2',
+        link: 'plugin2_2',
+        icon: 'mdi-information-variant'
+      }
+    ]
+  }
 };
 
 const mainLink = plugin.mainLink;

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

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import { mainLink } from '../plugin';
 export default defineComponent({
   // name: 'PageName'

src/plugins/plugin-example/plugin.ts

@@ -1,10 +1,28 @@
-import { PluginRouteConfig, Plugin } from 'boot/plugins';
+import { Plugin } from 'boot/plugins';
-import { RouteConfig } from 'vue-router';
 import routes from 'src/plugins/plugin-example/routes';
 
 const plugin: Plugin = {
   router: routes,
-  mainLink: { title: 'Plugin1', link: 'plugin1', icon: 'mdi-toy-brick' }
+  mainLink: {
+    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 mainLink = plugin.mainLink;

src/router/routes.ts

@@ -20,11 +20,7 @@ const routes: RouteConfig[] = [
       {
         name: 'home',
         path: 'home',
-        components: {
+        component: () => import('pages/home/Home.vue'),
-          default: () => import('pages/home/Home.vue'),
-          'plugin-nav': () =>
-            import('components/navigation/PluginLinksHome.vue')
-        },
         children: [
           {
             name: 'newHome',
@@ -41,11 +37,7 @@ const routes: RouteConfig[] = [
       {
         name: 'about',
         path: 'about',
-        components: {
+        component: () => import('pages/about/About.vue'),
-          default: () => import('pages/about/About.vue'),
-          'plugin-nav': () =>
-            import('components/navigation/PluginLinksAbout.vue')
-        },
         children: [
           {
             name: 'newAbout',

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@quasar/app/tsconfig-preset",
   "compilerOptions": {
-    "types": ["node", "webpack-env"],
+    "types": ["node", "webpack-env", "@quasar/app"],
     "baseUrl": "."
   }
 }