Einfaches Plugin-Loading

Lädt alle Plugins aus dem Ordner src/plugins.
Bis jetzt werden nur die Routes hinzugefügt!
Es wird noch nicht mit dem Store gearbeitet.

package.json

@@ -19,13 +19,16 @@
   "devDependencies": {
     "@quasar/app": "^2.0.0",
     "@types/node": "^10.17.15",
+    "@types/webpack": "^4.41.22",
+    "@types/webpack-env": "^1.15.3",
     "@typescript-eslint/eslint-plugin": "^3.3.0",
     "@typescript-eslint/parser": "^3.3.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
     "eslint-loader": "^3.0.3",
-    "eslint-plugin-vue": "^6.1.2"
+    "eslint-plugin-vue": "^6.1.2",
+    "require-context": "^1.1.0"
   },
   "browserslist": [
     "last 10 Chrome versions",

quasar.conf.js

@@ -8,6 +8,7 @@
 /* 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 {
@@ -24,15 +25,10 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
-    boot: [
+    boot: ['composition-api', 'axios', 'plugins'],
-      'composition-api',
-      'axios',
-    ],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
-    css: [
+    css: ['app.scss'],
-      'app.scss'
-    ],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
@@ -45,7 +41,7 @@ module.exports = configure(function (ctx) {
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
       'roboto-font', // optional, you are not bound to it
-      'material-icons', // optional, you are not bound to it
+      'material-icons' // optional, you are not bound to it
     ],
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
@@ -77,22 +73,27 @@ module.exports = configure(function (ctx) {
             test: /\.(js|vue)$/,
             loader: 'eslint-loader',
             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')
+        };
       }
-      },
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
       port: 8080,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
       iconSet: 'material-icons', // Quasar icon set
-      lang: 'en-us', // Quasar language pack
+      lang: 'de', // Quasar language pack
       config: {},
 
       // Possible values for "importStrategy":
@@ -178,13 +179,11 @@ module.exports = configure(function (ctx) {
 
       packager: {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-
         // OS X / Mac App Store
         // appBundleId: '',
         // appCategoryType: '',
         // osxSign: '',
         // protocol: 'myapp://path',
-
         // Windows only
         // win32metadata: { ... }
       },
@@ -203,5 +202,5 @@ module.exports = configure(function (ctx) {
         // chainWebpack also available besides this extendWebpack
       }
     }
-  }
+  };
 });

src/boot/plugins.ts

@@ -0,0 +1,44 @@
+import { boot } from 'quasar/wrappers';
+import { RouteConfig } from 'vue-router';
+import { Module } from 'vuex';
+import {} from 'webpack';
+
+interface PluginRouteConfig extends RouteConfig {
+  example?: unknown;
+}
+
+interface EssentialLink {
+  title: string;
+  link: string;
+  icon?: string;
+}
+
+interface Plugin {
+  router: PluginRouteConfig[];
+  store?: Module<any, any>;
+  mainLink: EssentialLink;
+}
+
+export { PluginRouteConfig, Plugin };
+
+// "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
+// @ts-ignore
+export default boot(({ Vue, router, store }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+  const plugins: any = require.context('src/plugins', true, /.+\/plugin.ts$/);
+  // 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
+    mop.push(plugins(fileName).default.mainLink);
+  });
+  Vue.prototype.$flaschengeist_plugins = mop;
+  console.log(plugins);
+});

src/layouts/MainLayout.vue

@@ -53,6 +53,13 @@
           :link="link.link"
           :icon="link.icon"
         />
+        <essential-link
+          v-for="(link, index) in $flaschengeist_plugins"
+          :key="index"
+          :title="link.title"
+          :link="link.link"
+          :icon="link.icon"
+        />
       </q-list>
       <q-separator />
 

src/pages/home/Home.vue

@@ -4,6 +4,9 @@
       <q-card-section>
         Home
       </q-card-section>
+      <q-card-section>
+        {{ a }}
+      </q-card-section>
     </q-card>
     <router-view />
   </q-page>
@@ -11,8 +14,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from '@vue/composition-api';
-import {} from '';
 export default defineComponent({
   // name: 'PageName'
+  setup(_, ctx) {
+    const a = ctx.root.$flaschengeist_plugins;
+    return { a };
+  }
 });
 </script>

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

@@ -0,0 +1,32 @@
+<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/plugin-example-2/pages/NewPlugin.vue

@@ -0,0 +1,17 @@
+<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-2/pages/OldPlugin.vue

@@ -0,0 +1,16 @@
+<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-2/pages/Plugin.vue

@@ -0,0 +1,22 @@
+<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 { computed, defineComponent, ref } from '@vue/composition-api';
+import { mainLink } from '../plugin';
+export default defineComponent({
+  // name: 'PageName'
+  setup(_, ctx) {
+    const a = ctx.root.$flaschengeist_plugins;
+    return { a, mainLink };
+  }
+});
+</script>

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

@@ -0,0 +1,12 @@
+import { PluginRouteConfig, 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' }
+};
+
+const mainLink = plugin.mainLink;
+export { mainLink };
+export default plugin;

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

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

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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,22 @@
+<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 { computed, defineComponent, ref } from '@vue/composition-api';
+import { mainLink } from '../plugin';
+export default defineComponent({
+  // name: 'PageName'
+  setup(_, ctx) {
+    const a = ctx.root.$flaschengeist_plugins;
+    return { a, mainLink };
+  }
+});
+</script>

src/plugins/plugin-example/plugin.ts

@@ -0,0 +1,14 @@
+import { PluginRouteConfig, 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' }
+};
+
+const mainLink = plugin.mainLink;
+
+export { mainLink };
+
+export default plugin;

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

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

tsconfig.json

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