Переход на quasar, добавлены иконки

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -10,9 +10,15 @@
         </div>
 
         <div class="col column justify-start items-center no-wrap" style="min-height: 300px">
-            <el-input ref="input" placeholder="URL книги" v-model="bookUrl">
+            <!--el-input ref="input1" placeholder="URL книги" v-model="bookUrl">
                 <el-button slot="append" icon="el-icon-check" @click="submitUrl"></el-button>
-            </el-input>
+            </el-input-->
+            <q-input ref="input" class="fit" style="max-width: 700px" outlined dense bg-color="white" v-model="bookUrl" placeholder="URL книги">
+                <template v-slot:append>
+                    <q-btn round dense flat icon="done" @click="submitUrl"/>
+                </template>
+            </q-input>
+
             <div class="q-my-md"></div>
             <input type="file" id="file" ref="file" @change="loadFile" style='display: none;'/>
 
@@ -202,8 +208,4 @@ class LoaderPage extends Vue {
     font-size: 70%;
     margin-bottom: 10px;
 }
-
-.el-input {
-    max-width: 700px;
-}
 </style>

client/quasar.js

@@ -1,17 +1,21 @@
 import Vue from 'vue';
 
 import 'quasar/dist/quasar.css';
-import VuePlugin from 'quasar/src/vue-plugin.js'
+import Quasar from 'quasar/src/vue-plugin.js'
 
 //components
 import {QCircularProgress} from 'quasar/src/components/circular-progress';
 import {QInput} from 'quasar/src/components/input';
+import {QBtn} from 'quasar/src/components/btn';
+import {QIcon} from 'quasar/src/components/icon';
 
 //config
 const config = {};
 
 const components = {
     QInput,
+    QBtn,
+    QIcon,
     QCircularProgress,
 };
 
@@ -22,4 +26,10 @@ const directives = {};
 const plugins = {};
 
 //use
-Vue.use(VuePlugin, { config, components, directives, plugins });
+Vue.use(Quasar, { config, components, directives, plugins });
+
+//icons
+import '@quasar/extras/material-icons/material-icons.css';
+//import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
+//import fontawesomeV5 from 'quasar/icon-set/fontawesome-v5.js'
+//Quasar.iconSet.set(fontawesomeV5);

package-lock.json

@@ -259,6 +259,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@quasar/extras": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.5.0.tgz",
+      "integrity": "sha512-SE1npMOvXGSEI1nWnEd2/EQswkM2QAiZ2K1WSPMOeqZtDvc29uLqv5A9mecWPLxVN/bSpLiX65j+ZYilY6KNHQ=="
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",

package.json

@@ -55,6 +55,7 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "@quasar/extras": "^1.5.0",
     "appcache-webpack-plugin": "^1.4.0",
     "axios": "^0.18.1",
     "base-x": "^3.0.6",