Переход на Vue 3 - начало, пока ничего не работает

2021-10-27 23:09:20 +07:00
parent 1c0cf303a0
commit a18aec2f96
8 changed files with 263 additions and 178 deletions
--- a/build/webpack.base.config.js
+++ b/build/webpack.base.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
-//const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const DefinePlugin = require('webpack').DefinePlugin;
+const { VueLoaderPlugin } = require('vue-loader');

 const clientDir = path.resolve(__dirname, '../client');

@@ -20,7 +20,14 @@ module.exports = {
        rules: [
            {
                test: /\.vue$/,
-                loader: "vue-loader"
+                loader: "vue-loader",
+                    options: {
+                        compilerOptions: {
+                            compatConfig: {
+                                MODE: 2
+                            }
+                    }
+                }                
            },
            {
                test: /\.includer$/,
@@ -89,6 +96,13 @@ module.exports = {
    },

    plugins: [
+        new DefinePlugin({
+            __VUE_OPTIONS_API__: true,
+            __VUE_PROD_DEVTOOLS__: false,
+            __QUASAR_SSR_SERVER__: false,
+            __QUASAR_SSR_CLIENT__: false,
+            __QUASAR_VERSION__: false,
+        }),
        new VueLoaderPlugin(),
    ]
 };
--- a/client/main.js
+++ b/client/main.js
@@ -1,18 +1,18 @@
-import Vue from 'vue';
+import { createApp } from 'vue';

-import router from './router';
+//import router from './router';
 import store from './store';
-import './quasar';
+import {Quasar, QuasarOptions} from './quasar';
+//import vueSanitize from 'vue-sanitize';

-import vueSanitize from 'vue-sanitize';
-Vue.use(vueSanitize);
+import App from './components/App1.vue';

-import App from './components/App.vue';
-//Vue.config.productionTip = false;
-Vue.prototype.$isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+//Vue.prototype.$isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

-new Vue({
-    router,
-    store,
-    render: h => h(App),
-}).$mount('#app');
+const app = createApp(App);
+//app.use(router);
+app.use(store);
+app.use(Quasar, QuasarOptions);
+//app.use(vueSanitize);
+
+app.mount('#app');
--- a/client/quasar.js
+++ b/client/quasar.js
@@ -1,8 +1,8 @@
-import Vue from 'vue';
-
 import 'quasar/dist/quasar.css';
-import Quasar from 'quasar/src/vue-plugin.js'
+//import Quasar from 'quasar/dist/quasar.umd.prod.js';

+import Quasar from 'quasar/src/vue-plugin.js';
+/*
 //config
 const config = {};

@@ -80,9 +80,6 @@ const plugins = {
    Notify,
 };

-//use
-Vue.use(Quasar, { config, components, directives, plugins });
-
 //icons
 //import '@quasar/extras/material-icons/material-icons.css';
 //import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
@@ -93,3 +90,9 @@ import '@quasar/extras/line-awesome/line-awesome.css';
 //import fontawesomeV5 from 'quasar/icon-set/fontawesome-v5.js'
 import lineAwesome from 'quasar/icon-set/line-awesome.js'
 Quasar.iconSet.set(lineAwesome);
+
+export default {quasar: Quasar, quasarOptions: { config, components, directives, plugins }};
+*/
+
+const QuasarOptions = {};
+export {Quasar, QuasarOptions};
--- a/client/router.js
+++ b/client/router.js
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import _ from 'lodash';

 const CardIndex = () => import('./components/CardIndex/CardIndex.vue');
@@ -36,7 +35,7 @@ const myRoutes = [
    ['/settings', Settings],
    ['/help', Help],
    ['/404', NotFound404],
-    ['*', null, null, '/cardindex'],
+    ['/(.*)', null, null, '/cardindex'],
 ];

 let routes = {};
@@ -63,8 +62,7 @@ for (let route of myRoutes) {
 }
 routes = routes.children;

-Vue.use(VueRouter);
-
-export default new VueRouter({
+export default createRouter({
+    history: createWebHashHistory(),
    routes
 });
--- a/client/store/index.js
+++ b/client/store/index.js
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import createPersistedState from 'vuex-persistedstate';

 import root from './root.js';
@@ -7,11 +6,9 @@ import uistate from './modules/uistate';
 import config from './modules/config';
 import reader from './modules/reader';

-Vue.use(Vuex);
-
 const debug = process.env.NODE_ENV !== 'production';

-export default new Vuex.Store(Object.assign({}, root, {
+export default createStore(Object.assign({}, root, {
    modules: {
        uistate,
        config,
--- a/package-lock.json
+++ b/package-lock.json
@@ -1541,57 +1541,151 @@
      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
      "dev": true
    },
-    "@vue/component-compiler-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
-      "integrity": "sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==",
-      "dev": true,
+    "@vue/compat": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.2.20.tgz",
+      "integrity": "sha512-ZbdYtVegOS4wgeHzlnYz7Q9j9NLYF083i5pK9UB1P11vTSVUqozDlPSo4V1ODkluuFED7aGfFCHm7KmTJrnORA=="
+    },
+    "@vue/compiler-core": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
+      "integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
      "requires": {
-        "consolidate": "^0.15.1",
-        "hash-sum": "^1.0.2",
-        "lru-cache": "^4.1.2",
-        "merge-source-map": "^1.1.0",
-        "postcss": "^7.0.36",
-        "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2 || ^2.0.0",
-        "source-map": "~0.6.1",
-        "vue-template-es2015-compiler": "^1.9.0"
+        "@babel/parser": "^7.15.0",
+        "@vue/shared": "3.2.20",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
      },
      "dependencies": {
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "dev": true,
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
+        "@babel/parser": {
+          "version": "7.15.8",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
+          "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA=="
        },
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-          "dev": true
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
        }
      }
    },
+    "@vue/compiler-dom": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
+      "integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
+      "requires": {
+        "@vue/compiler-core": "3.2.20",
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
+      "integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
+      "requires": {
+        "@babel/parser": "^7.15.0",
+        "@vue/compiler-core": "3.2.20",
+        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-ssr": "3.2.20",
+        "@vue/ref-transform": "3.2.20",
+        "@vue/shared": "3.2.20",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.15.8",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
+          "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA=="
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        }
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
+      "integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.20",
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz",
+      "integrity": "sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw=="
+    },
+    "@vue/reactivity": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
+      "integrity": "sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==",
+      "requires": {
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "@vue/ref-transform": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.20.tgz",
+      "integrity": "sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q==",
+      "requires": {
+        "@babel/parser": "^7.15.0",
+        "@vue/compiler-core": "3.2.20",
+        "@vue/shared": "3.2.20",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.15.8",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
+          "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA=="
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        }
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
+      "integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
+      "requires": {
+        "@vue/reactivity": "3.2.20",
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
+      "integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
+      "requires": {
+        "@vue/runtime-core": "3.2.20",
+        "@vue/shared": "3.2.20",
+        "csstype": "^2.6.8"
+      }
+    },
+    "@vue/server-renderer": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.20.tgz",
+      "integrity": "sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==",
+      "requires": {
+        "@vue/compiler-ssr": "3.2.20",
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
+      "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w=="
+    },
    "@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -2168,12 +2262,6 @@
        "inherits": "~2.0.0"
      }
    },
-    "bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
-    },
    "body-parser": {
      "version": "1.19.0",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -2652,15 +2740,6 @@
      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
    },
-    "consolidate": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
-      "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.1.1"
-      }
-    },
    "content-disposition": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@@ -3022,6 +3101,11 @@
        "css-tree": "^1.1.2"
      }
    },
+    "csstype": {
+      "version": "2.6.18",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
+      "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ=="
+    },
    "dashdash": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -3030,12 +3114,6 @@
        "assert-plus": "^1.0.0"
      }
    },
-    "de-indent": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
-      "dev": true
-    },
    "debug": {
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -5067,7 +5145,6 @@
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
-      "dev": true,
      "requires": {
        "sourcemap-codec": "^1.4.4"
      }
@@ -5115,15 +5192,6 @@
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
    },
-    "merge-source-map": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
-      "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
-      "dev": true,
-      "requires": {
-        "source-map": "^0.6.1"
-      }
-    },
    "merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6309,13 +6377,6 @@
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
    },
-    "prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
-      "dev": true,
-      "optional": true
-    },
    "pretty-bytes": {
      "version": "5.6.0",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -6364,12 +6425,6 @@
        "ipaddr.js": "1.9.1"
      }
    },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
-    },
    "psl": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -6395,9 +6450,9 @@
      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
    },
    "quasar": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.16.0.tgz",
-      "integrity": "sha512-w+XajlXYi1dRYHHD/oRydTv1G3G2edtZ+tWJjnPk4vYUlllUiVsredqrBwqoOogn8qRhpLVS6Og6pona+zIg5A=="
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.2.1.tgz",
+      "integrity": "sha512-Uv5dFlF3SGZANNhdXQ4mj50nibqbFXiI1OGWZ7PIBdAuav3K8gjvXB0b13tLScDdB6z6bDHl4is2X/y1r+NmWw=="
    },
    "querystring": {
      "version": "0.2.1",
@@ -6979,8 +7034,7 @@
    "sourcemap-codec": {
      "version": "1.4.8",
      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
    },
    "spawn-wrap": {
      "version": "2.0.0",
@@ -7636,14 +7690,21 @@
      }
    },
    "vue": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
-      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
+      "integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-sfc": "3.2.20",
+        "@vue/runtime-dom": "3.2.20",
+        "@vue/server-renderer": "3.2.20",
+        "@vue/shared": "3.2.20"
+      }
    },
    "vue-class-component": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-6.3.2.tgz",
-      "integrity": "sha512-cH208IoM+jgZyEf/g7mnFyofwPDJTM/QvBNhYMjqGB8fCsRyTf68rH2ISw/G20tJv+5mIThQ3upKwoL4jLTr1A==",
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
+      "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
      "dev": true
    },
    "vue-eslint-parser": {
@@ -7709,29 +7770,53 @@
        }
      }
    },
-    "vue-hot-reload-api": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
-      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
-      "dev": true
-    },
    "vue-loader": {
-      "version": "15.9.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
-      "integrity": "sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==",
+      "version": "16.8.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
+      "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
      "dev": true,
      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "hash-sum": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+          "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
      }
    },
    "vue-router": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
-      "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
+      "integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.18"
+      }
    },
    "vue-sanitize": {
      "version": "0.2.1",
@@ -7751,26 +7836,13 @@
        "loader-utils": "^1.0.2"
      }
    },
-    "vue-template-compiler": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
-      "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==",
-      "dev": true,
-      "requires": {
-        "de-indent": "^1.0.2",
-        "he": "^1.1.0"
-      }
-    },
-    "vue-template-es2015-compiler": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
-      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
-      "dev": true
-    },
    "vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
    },
    "vuex-persistedstate": {
      "version": "2.7.1",
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
    "@babel/eslint-plugin": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
+    "@vue/compiler-sfc": "^3.1.0",
    "babel-loader": "^8.2.3",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.4.0",
@@ -35,11 +36,10 @@
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.3",
    "terser-webpack-plugin": "^5.2.4",
-    "vue-class-component": "^6.3.2",
+    "vue-class-component": "^7.2.6",
    "vue-eslint-parser": "^8.0.0",
-    "vue-loader": "^15.9.8",
+    "vue-loader": "^16.0.0",
    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-middleware": "^5.2.1",
@@ -48,7 +48,8 @@
    "workbox-webpack-plugin": "^6.3.0"
  },
  "dependencies": {
-    "@quasar/extras": "^1.11.2",
+    "@quasar/extras": "^1.11.3",
+    "@vue/compat": "^3.1.0",
    "axios": "^0.24.0",
    "base-x": "^3.0.9",
    "chardet": "^1.4.0",
@@ -67,7 +68,7 @@
    "path-browserify": "^1.0.1",
    "pidusage": "^3.0.0",
    "pkg": "^4.4.9",
-    "quasar": "^1.16.0",
+    "quasar": "^2.2.1",
    "safe-buffer": "^5.2.1",
    "sjcl": "^1.0.8",
    "sql-template-strings": "^2.2.2",
@@ -75,10 +76,10 @@
    "sqlite3": "^5.0.2",
    "tar-fs": "^2.1.1",
    "unbzip2-stream": "^1.4.3",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.2",
+    "vue": "^3.1.0",
+    "vue-router": "^4.0.12",
    "vue-sanitize": "^0.2.1",
-    "vuex": "^3.6.2",
+    "vuex": "^4.0.2",
    "vuex-persistedstate": "^2.7.1",
    "webdav": "^4.7.0",
    "ws": "^8.2.3",
--- a/server/core/WebSocketConnection.js
+++ b/server/core/WebSocketConnection.js
@@ -9,8 +9,8 @@ const cleanPeriod = 5*1000;//5 секунд
 class WebSocketConnection {
    //messageLifeTime в секундах (проверка каждый cleanPeriod интервал)
    constructor(url, openTimeoutSecs = 10, messageLifeTimeSecs = 30) {
-        const ws = 'ws';
-        this.WebSocket = (isBrowser ? WebSocket : require(ws));
+        //const ws = 'ws';//for nodejs
+        this.WebSocket = (isBrowser ? WebSocket : null/*for nodejs require(ws)*/);
        this.url = url;
        this.ws = null;
        this.listeners = [];