vue use fail

front/package.json

@@ -11,11 +11,12 @@
   "dependencies": {
     "pinia": "^2.1.7",
     "reset-css": "^5.0.2",
+    "@vueuse/core": "^8.2.0",
     "vue": "^3.4.21",
-    "vue-3d-model": "^2.0.0-alpha.4",
-    "vue3-touch-events": "^4.1.8"
+    "vue-3d-model": "^2.0.0-alpha.4"
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.31",
     "@iconify-json/mdi": "^1.1.66",
     "@vitejs/plugin-vue": "^5.0.4",
     "sass": "^1.75.0",
@@ -25,4 +26,4 @@
     "vite": "^5.2.0",
     "vue-tsc": "^2.0.6"
   }
-}
+}

front/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { ModelFbx } from 'vue-3d-model';
 import RandomIcon from './components/RandomIcon.vue';
 import { useProductStore } from './stores/product';
@@ -21,6 +21,8 @@ const setActive = (id: number) => {
   state.active_product = products.list.find(el => el.id == id)
 }
 
+const target = ref<HTMLElement | null>(null)
+
 onMounted(async () => {
   products.getData()
 })
@@ -39,7 +41,7 @@ onMounted(async () => {
       </ul>
     </div>
     <div class="header"><span class="logo-header">Проекты Кустарщины</span></div>
-    <div class="main product" v-if="state.active_product">
+    <div class="main product" v-if="state.active_product" ref="target">
       <model-fbx v-if="state.active_product.model3d" class="product-model"
         :src="`${IMAGE_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
       <div class="product-image" v-if="state.active_product.image1">

front/src/assets/main.scss

@@ -19,6 +19,7 @@ body {
   font-family: 'main';
   background: $blackColor;
   color: #fff;
+  user-select: none;
 }
 
 .container {

front/src/main.ts

@@ -2,7 +2,9 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import './assets/main.scss'
 
+
 import App from './App.vue'
 const pinia = createPinia()
-
-createApp(App).use(pinia).mount('#app')
+const app = createApp(App)
+app.use(pinia)
+app.mount('#app')

front/tsconfig.json

@@ -3,9 +3,12 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -13,13 +16,23 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "types": [
+      "unplugin-icons/types/vue",
+    ]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

nginx/nginx.conf

@@ -45,16 +45,20 @@ http {
         }
         location /api/ {
             proxy_pass http://back:8000/api/;
+            client_max_body_size 64M;
         }
         location /files/ {
             proxy_pass http://back:8000/files/;
+            client_max_body_size 64M;
         }
         location /back/files/ {
             proxy_pass http://back:8000/files/;
+            client_max_body_size 64M;
         }
 
         location /admin/ {
             proxy_pass http://back:8000/admin/;
+            client_max_body_size 64M;
         }
         location /static/admin/ {
             proxy_pass http://back:8000/static/admin/;

package-lock.json

@@ -0,0 +1,105 @@
+{
+  "name": "interactive-table",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@vueuse/core": "^10.9.0",
+        "vue-template-compiler": "^2.7.16"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/vue": {
+      "version": "2.6.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "peer": true
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@vueuse/core": "^10.9.0",
+    "vue-template-compiler": "^2.7.16"
+  }
+}