npm audit fix + bump to vue 3

package.json

@@ -10,27 +10,24 @@
         "production": "mix --production"
     },
     "devDependencies": {
-        "axios": "^0.21",
+        "animate.css": "^4.1.1",
+        "axios": "^1.6.5",
         "bootstrap": "^5.1.3",
         "clean-webpack-plugin": "^3.0.0",
         "jquery": "^3.6",
         "laravel-mix": "^6.0.6",
         "laravel-mix-polyfill": "^3.0.1",
         "lodash": "^4.17.19",
+        "mini-css-extract-plugin": "^1.6.2",
         "popper.js": "^1.16.1",
         "postcss": "^8.1.14",
-        "resolve-url-loader": "^4.0.0",
+        "resolve-url-loader": "^5.0.0",
         "sass": "^1.32.11",
-        "sass-loader": "^11.0.1",
+        "sass-loader": "^12.6.0",
         "ui": "^0.2.4",
-        "vue-loader": "^15.9.8",
-        "vue-select": "^3.16.0",
-        "vue-template-compiler": "^2.6.14",
-        "webpack": "^5.64.4"
-    },
-    "dependencies": {
-        "animate.css": "^4.1.1",
-        "mini-css-extract-plugin": "^1.6.2",
-        "vue": "^2.6.14"
+        "vue": "^3.3.12",
+        "vue-loader": "^17.4.2",
+        "vue-select": "^4.0.0-beta.6",
+        "vue-template-compiler": "^2.7.16"
     }
 }

resources/js/components/backend/ProductsPictos.vue

@@ -31,8 +31,9 @@
 </template>
 
 <script>
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
     mounted() {
         this.pictos = JSON.parse(this.dbpictos);
         if (this.pictos.length === 0){
@@ -133,7 +134,7 @@ export default {
             this.updateCount();
         }
     }
-}
+});
 </script>
 
 <style>

resources/js/components/backend/RangesSubRanges.vue

@@ -22,7 +22,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
     mounted() {
         this.range = JSON.parse(this.dbRange);
         this.range.label = this.range.name + ' - ' + this.range.type;
@@ -78,5 +80,5 @@ export default {
             }
         }
     }
-}
+});
 </script>

resources/js/vuejs.js

@@ -1,13 +1,23 @@
-window.Vue = require('vue').default;
+import Vue, { createApp } from "vue";
+import ProductsPictos from "./components/backend/ProductsPictos.vue";
 
-Vue.component('products-pictos', require('./components/backend/ProductsPictos.vue').default);
-Vue.component('ranges-sub-ranges', require('./components/backend/RangesSubRanges.vue').default);
+const setupApp = (app) => {
+    app.config.globalProperties.window = window;
+    app.config.globalProperties.document = document;
+};
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
-for (let el of document.getElementsByClassName('vueComponent')) {
-    new Vue({ el: el });
+for (let el of document.getElementsByClassName("products-pictos")) {
+    const app = createApp(ProductsPictos);
+    setupApp(app);
+    app.mount(el);
+}
+for (let el of document.getElementsByClassName("ranges-sub-ranges")) {
+    const app = createApp(RangesSubRanges);
+    setupApp(app);
+    app.mount(el);
 }

resources/sass/back.scss

@@ -2,4 +2,4 @@
 
 @import "layouts/backend/top_nav";
 
-@import "vue-select/src/scss/vue-select.scss";
+@import "vue-select/dist/vue-select.css";