Add @vueuse/head for dynamic head management and favicon

Integrated @vueuse/head to manage the document head dynamically. Configured a favicon by including it in the head setup. Updated dependencies to include @vueuse/head and related packages.
2025-05-22 23:32:29 +02:00
parent b004286b08
commit 56171cfe8f
5 changed files with 123 additions and 4 deletions
@@ -21,6 +21,7 @@
        "@sweetalert2/theme-dark": "^5.0.18",
        "@vue-flow/core": "^1.43.1",
        "@vueuse/core": "^12.7.0",
+        "@vueuse/head": "^2.0.0",
        "animate.css": "^4.1.1",
        "axios": "^1.7.8",
        "bulma": "^1.0.2",
@@ -2617,6 +2618,71 @@
      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
    },
+    "node_modules/@unhead/dom": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.20.tgz",
+      "integrity": "sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.11.20.tgz",
+      "integrity": "sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA==",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.11.20.tgz",
+      "integrity": "sha512-1MOrBkGgkUXS+sOKz/DBh4U20DNoITlJwpmvSInxEUNhghSNb56S0RnaHRq0iHkhrO/cDgz2zvfdlRpoPLGI3w==",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "packrup": "^0.1.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/ssr": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.11.20.tgz",
+      "integrity": "sha512-j6ehzmdWGAvv0TEZyLE3WBnG1ULnsbKQcLqBDh3fvKS6b3xutcVZB7mjvrVE7ckSZt6WwOtG0ED3NJDS7IjzBA==",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.11.20.tgz",
+      "integrity": "sha512-sqQaLbwqY9TvLEGeq8Fd7+F2TIuV3nZ5ihVISHjWpAM3y7DwNWRU7NmT9+yYT+2/jw1Vjwdkv5/HvDnvCLrgmg==",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20",
+        "hookable": "^5.5.3",
+        "unhead": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -2962,6 +3028,20 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
+    "node_modules/@vueuse/head": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
+      "integrity": "sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==",
+      "dependencies": {
+        "@unhead/dom": "^1.7.0",
+        "@unhead/schema": "^1.7.0",
+        "@unhead/ssr": "^1.7.0",
+        "@unhead/vue": "^1.7.0"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
    "node_modules/@vueuse/metadata": {
      "version": "12.7.0",
      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.7.0.tgz",
@@ -3869,8 +3949,7 @@
    "node_modules/hookable": {
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
-      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
    },
    "node_modules/html-tags": {
      "version": "3.3.1",
@@ -4302,6 +4381,14 @@
        "opencollective-postinstall": "index.js"
      }
    },
+    "node_modules/packrup": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/packrup/-/packrup-0.1.2.tgz",
+      "integrity": "sha512-ZcKU7zrr5GlonoS9cxxrb5HVswGnyj6jQvwFBa6p5VFw7G71VAHcUKL5wyZSU/ECtPM/9gacWxy2KFQKt1gMNA==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
    "node_modules/parse-ms": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
@@ -5199,6 +5286,20 @@
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
      "devOptional": true
    },
+    "node_modules/unhead": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.11.20.tgz",
+      "integrity": "sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==",
+      "dependencies": {
+        "@unhead/dom": "1.11.20",
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
    "node_modules/unicode-canonical-property-names-ecmascript": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
@@ -5555,6 +5656,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
    "node_modules/zimmerframe": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
@@ -22,6 +22,7 @@
    "@sweetalert2/theme-dark": "^5.0.18",
    "@vue-flow/core": "^1.43.1",
    "@vueuse/core": "^12.7.0",
+    "@vueuse/head": "^2.0.0",
    "animate.css": "^4.1.1",
    "axios": "^1.7.8",
    "bulma": "^1.0.2",
@@ -3,6 +3,15 @@ import Footer from "@/components/global/Footer.vue";
 import DefaultPageWrapper from "@/components/page/wrappers/DefaultPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { API_URL, IS_DEV } from "@/main.js";
+// Set the favicon to the /favicon.ico file
+import { useHead } from "@vueuse/head";
+import favicon from '@/assets/favicon.ico';
+
+useHead({
+  link: [
+    { rel: 'icon', type: 'image/x-icon', href: favicon }
+  ]
+});
 SessionUser.initiateOnAppStart();
 </script>

@@ -13,12 +13,12 @@ import {Colors} from "./ThemeConfig.vue";
 import '@/assets/main.css';
 import 'animate.css';
 import applyMiddleware from '@/middleware/index.js';
-
-
+import { createHead } from "@vueuse/head";

 applyMiddleware(router);

 createApp(App)
+	.use(createHead())
 	.use(store)
 	.use(router)
 	.provide('Colors', Colors)