Изменена архитектура проекта, проправлены инпорты и синтаксис html для pug

package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@quasar/extras": "^1.0.0",
     "@webdiscus/pug-loader": "^2.9.3",
     "core-js": "^3.8.3",
+    "quasar": "^2.0.0",
     "sass": "^1.55.0",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
@@ -26,7 +28,9 @@
     "node-sass": "^7.0.3",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
-    "sass-loader": "^13.0.2"
+    "sass": "1.32.12",
+    "sass-loader": "^13.0.2",
+    "vue-cli-plugin-quasar": "~5.0.1"
   },
   "eslintConfig": {
     "root": true,

src/components/baseComponents/buttons/ButtonPlus.vue

@@ -20,6 +20,6 @@
     cursor: pointer
     width: fit-content
     background-color: rgba(65, 105, 225, 0.25)
-    padding: 7px 7px 3px 7px
+    padding: 5px 7px 1px 7px
     border-radius: 50%
 </style>

src/main.js

@@ -3,5 +3,7 @@ import App from './App.vue'
 import router from "./router";
 import './assets/sass/styles.sass'
 import './assets/css/variables.css'
+import { Quasar } from 'quasar'
+import quasarUserOptions from './quasar-user-options'
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(Quasar, quasarUserOptions).use(router).mount('#app')

vue.config.js

@@ -1,7 +1,9 @@
 const { defineConfig } = require('@vue/cli-service');
 
 module.exports = defineConfig({
-  transpileDependencies: true,
+  transpileDependencies: [
+    'quasar'
+  ],
 
   chainWebpack: (config) => {
     const pugRule = config.module.rule('pug');
@@ -9,6 +11,7 @@ module.exports = defineConfig({
     pugRule.uses.clear();
     pugRule.oneOfs.clear();
   },
+
   configureWebpack: {
     module: {
       rules: [
@@ -33,4 +36,11 @@ module.exports = defineConfig({
       ],
     },
   },
+
+  pluginOptions: {
+    quasar: {
+      importStrategy: 'kebab',
+      rtlSupport: false
+    }
+  }
 });