install openseadragon; provide webpack alias '@'; copy projectfiles from emo;...

install openseadragon; provide webpack alias '@'; copy projectfiles from emo; adjust routing; insert quasar components

package-lock.json

@@ -9128,6 +9128,11 @@
       "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==",
       "dev": true
     },
+    "openseadragon": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/openseadragon/-/openseadragon-2.4.2.tgz",
+      "integrity": "sha512-398KbZwRtOYA6OmeWRY4Q0737NTacQ9Q6whmr9Lp1MNQO3p0eBz5LIASRne+4gwequcSM1vcHcjfy3dIndQziw=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
+    "openseadragon": "^2.4.2",
     "quasar": "^1.0.0"
   },
   "devDependencies": {

quasar.conf.js

 // Configuration for your app
 // https://quasar.dev/quasar-cli/quasar-conf-js
 
+const path = require('path')
+
 module.exports = function (ctx) {
   return {
     // app boot file (/src/boot)
@@ -42,7 +44,16 @@ module.exports = function (ctx) {
       //            (not treeshaking Quasar; biggest bundle size; convenient)
       all: 'auto',
 
-      components: [],
+      components: [
+        'QHeader',
+        'QLayout',
+        'QPageContainer',
+        'QPage',
+        // 'QRouteTab',
+        'QSplitter',
+        // 'QTabs',
+        'QToolbar',
+      ],
       directives: [],
 
       // Quasar plugins
@@ -67,6 +78,11 @@ module.exports = function (ctx) {
 
       // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
       extendWebpack (cfg) {
+        cfg.resolve.alias = {
+          ...cfg.resolve.alias, // This adds the existing alias
+
+          '@': path.resolve(__dirname, './src/'),
+        },
         cfg.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,

src/router/routes.js

-
+//
+// const routes = [
+//   {
+//     path: '/',
+//     component: () => import('layouts/MainLayout.vue'),
+//     children: [
+//       { path: '', component: () => import('pages/Index.vue') },
+//     ],
+//   },
+// ];
 const routes = [
   {
     path: '/',
-    component: () => import('layouts/MainLayout.vue'),
-    children: [
-      { path: '', component: () => import('pages/Index.vue') },
-    ],
+    name: 'TwinView',
+    component: () => import('@/pages/quasar-twinview.vue'),
   },
 ];
-
 // Always leave this as last one
 if (process.env.MODE !== 'ssr') {
   routes.push({