From 4e7b4aed243643a920b36d82efddd0e3a33aaef5 Mon Sep 17 00:00:00 2001
From: BacLuc <lucius.bachmann@gmx.ch>
Date: Sun, 31 Dec 2023 15:08:02 +0100
Subject: [PATCH 01/21] try to migrate slot to v-slot

from https://v3-migration.vuejs.org/migration-build.html#preparations
---
 frontend/src/components/form/base/BaseComponent.vue | 6 ++++--
 frontend/src/components/form/base/ECheckbox.vue     | 6 ++++--
 frontend/src/components/form/base/ERichtext.vue     | 6 ++++--
 frontend/src/components/form/base/ESelect.vue       | 6 ++++--
 frontend/src/components/form/base/ESwitch.vue       | 6 ++++--
 frontend/src/components/form/base/ETextField.vue    | 6 ++++--
 frontend/src/components/form/base/ETextarea.vue     | 6 ++++--
 frontend/src/components/generic/DetailPane.vue      | 8 +++++---
 8 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/form/base/BaseComponent.vue b/frontend/src/components/form/base/BaseComponent.vue
index b2d4d96723..9601fd9035 100644
--- a/frontend/src/components/form/base/BaseComponent.vue
+++ b/frontend/src/components/form/base/BaseComponent.vue
@@ -16,8 +16,10 @@
       v-on="$listeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </component>
diff --git a/frontend/src/components/form/base/ECheckbox.vue b/frontend/src/components/form/base/ECheckbox.vue
index 7a2108467c..0e01327cd3 100644
--- a/frontend/src/components/form/base/ECheckbox.vue
+++ b/frontend/src/components/form/base/ECheckbox.vue
@@ -18,8 +18,10 @@
       v-on="$listeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-checkbox>
diff --git a/frontend/src/components/form/base/ERichtext.vue b/frontend/src/components/form/base/ERichtext.vue
index 825a202644..626df1c907 100644
--- a/frontend/src/components/form/base/ERichtext.vue
+++ b/frontend/src/components/form/base/ERichtext.vue
@@ -19,8 +19,10 @@
       v-on="$listeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-tiptap-editor>
diff --git a/frontend/src/components/form/base/ESelect.vue b/frontend/src/components/form/base/ESelect.vue
index 2401319292..2165cfa178 100644
--- a/frontend/src/components/form/base/ESelect.vue
+++ b/frontend/src/components/form/base/ESelect.vue
@@ -20,8 +20,10 @@
       v-on="$listeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-select>
diff --git a/frontend/src/components/form/base/ESwitch.vue b/frontend/src/components/form/base/ESwitch.vue
index 576b7eb5eb..e7abdf691a 100644
--- a/frontend/src/components/form/base/ESwitch.vue
+++ b/frontend/src/components/form/base/ESwitch.vue
@@ -18,8 +18,10 @@
       v-on="$listeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-switch>
diff --git a/frontend/src/components/form/base/ETextField.vue b/frontend/src/components/form/base/ETextField.vue
index fa0351b2f9..22413e6ee9 100644
--- a/frontend/src/components/form/base/ETextField.vue
+++ b/frontend/src/components/form/base/ETextField.vue
@@ -22,8 +22,10 @@
       v-on="inputListeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-text-field>
diff --git a/frontend/src/components/form/base/ETextarea.vue b/frontend/src/components/form/base/ETextarea.vue
index 5dcd87fdd2..fa5282e173 100644
--- a/frontend/src/components/form/base/ETextarea.vue
+++ b/frontend/src/components/form/base/ETextarea.vue
@@ -19,8 +19,10 @@
       v-on="$listeners"
     >
       <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-tiptap-editor>
diff --git a/frontend/src/components/generic/DetailPane.vue b/frontend/src/components/generic/DetailPane.vue
index 2286abee24..e1d0013474 100644
--- a/frontend/src/components/generic/DetailPane.vue
+++ b/frontend/src/components/generic/DetailPane.vue
@@ -7,7 +7,7 @@
     v-on="$listeners"
   >
     <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </DialogBottomSheet>
@@ -20,8 +20,10 @@
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
   >
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </DialogForm>

From 4d50d610ee8d9ef6602cd3589b0e072505ce48e4 Mon Sep 17 00:00:00 2001
From: BacLuc <lucius.bachmann@gmx.ch>
Date: Sun, 31 Dec 2023 15:20:56 +0100
Subject: [PATCH 02/21] upgrade dependencies

from https://v3-migration.vuejs.org/migration-build.html#installation
---
 frontend/package.json   | 11 ++++++++---
 frontend/vite.config.js | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index ba2e336fc4..135f4137c5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -70,7 +70,8 @@
     "uuid": "9.0.1",
     "v-resize-observer": "2.1.0",
     "vee-validate": "3.4.15",
-    "vue": "2.7.15",
+    "vue": "3.3.13",
+    "@vue/compat": "3.3.13",
     "vue-axios": "3.5.2",
     "vue-i18n": "8.28.2",
     "vue-recaptcha-v3": "1.9.0",
@@ -92,6 +93,11 @@
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
+    "@vue/compiler-dom": "3.3.13",
+    "@vue/compiler-sfc": "3.3.13",
+    "@vue/runtime-dom": "3.3.13",
+    "@vue/server-renderer": "3.3.13",
+    "@vue/shared": "3.3.13",
     "@vue/eslint-config-prettier": "9.0.0",
     "@vue/test-utils": "1.3.6",
     "babel-plugin-require-context-hook": "1.0.0",
@@ -115,8 +121,7 @@
     "vite-plugin-vue2-svg": "0.4.0",
     "vitest": "1.1.0",
     "vitest-canvas-mock": "0.3.3",
-    "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-template-compiler": "2.7.15"
+    "vue-cli-plugin-vuetify": "2.5.8"
   },
   "eslintConfig": {
     "root": true,
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index bf04d869f7..b6f790c243 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -10,7 +10,15 @@ import { configDefaults } from 'vitest/config'
 
 const plugins = [
   comlink(), // must be first
-  vue(),
+  vue({
+    template: {
+      compilerOptions: {
+        compatConfig: {
+          MODE: 2,
+        },
+      },
+    },
+  }),
   Components({
     resolvers: [
       // Vuetify
@@ -134,6 +142,9 @@ export default defineConfig(({ mode }) => ({
         find: 'dayjs',
         replacement: path.resolve(__dirname, 'node_modules', 'dayjs'),
       },
+      {
+        vue: '@vue/compat',
+      },
     ],
     preserveSymlinks: true,
   },

From e9c23f246cd3786fd8475fac1c0e0b363fac8d6a Mon Sep 17 00:00:00 2001
From: BacLuc <lucius.bachmann@gmx.ch>
Date: Sun, 31 Dec 2023 18:21:25 +0100
Subject: [PATCH 03/21] tmp

---
 frontend/package-lock.json                    | 1664 ++++++++---------
 frontend/package.json                         |   32 +-
 frontend/src/App.vue                          |    4 +-
 .../content/storyboard/StoryboardSortable.vue |    4 +-
 .../components/campCreate/CampCreateStep1.vue |   99 +-
 .../components/campCreate/CampCreateStep2.vue |  215 ++-
 .../collaborator/CollaboratorForm.vue         |   20 +-
 .../collaborator/CollaboratorListItem.vue     |   14 +-
 .../components/dialog/DialogBottomSheet.vue   |  143 +-
 frontend/src/components/dialog/DialogForm.vue |   13 +-
 .../src/components/form/api/ApiWrapper.vue    |   50 +-
 .../form/api/__tests__/ApiWrapper.spec.js     |    2 +-
 .../components/form/base/BaseComponent.vue    |    2 +-
 .../src/components/form/base/ECheckbox.vue    |   58 +-
 .../src/components/form/base/ERichtext.vue    |   61 +-
 frontend/src/components/form/base/ESelect.vue |   62 +-
 frontend/src/components/form/base/ESwitch.vue |   58 +-
 .../src/components/form/base/ETextField.vue   |   28 +-
 .../src/components/form/base/ETextarea.vue    |   27 +-
 .../components/form/tiptap/TiptapEditor.vue   |    2 +-
 .../components/form/tiptap/VTiptapEditor.vue  |    2 +-
 .../src/components/layout/ContentCard.vue     |    2 +-
 .../material/MaterialCreateItem.vue           |   28 +-
 .../material/useMaterialViewHelper.js         |    2 +-
 .../components/program/picasso/Picasso.vue    |    9 +-
 frontend/src/main.js                          |    2 +-
 frontend/src/plugins/i18n/index.js            |   18 +-
 frontend/src/plugins/store/lang.js            |    3 +-
 frontend/src/plugins/veeValidate.js           |   32 +-
 frontend/src/router.js                        |   13 +-
 frontend/src/views/auth/LoginCallback.vue     |    2 +-
 frontend/src/views/auth/Register.vue          |    8 +-
 frontend/src/views/auth/ResetPassword.vue     |  154 +-
 frontend/src/views/camp/Invitation.vue        |   10 +-
 frontend/src/views/dev/Controls.vue           |    2 +-
 frontend/vite.config.js                       |   36 +-
 36 files changed, 1375 insertions(+), 1506 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6c4721d0ef..92229b8ac7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -31,7 +31,10 @@
         "@tiptap/extension-strike": "2.1.13",
         "@tiptap/extension-text": "2.1.13",
         "@tiptap/extension-underline": "2.1.13",
-        "@tiptap/vue-2": "2.1.13",
+        "@tiptap/vue-3": "2.1.13",
+        "@vee-validate/i18n": "4.12.4",
+        "@vee-validate/rules": "4.12.4",
+        "@vue/compat": "3.3.13",
         "@zxcvbn-ts/core": "3.0.4",
         "@zxcvbn-ts/language-common": "3.0.4",
         "@zxcvbn-ts/language-de": "3.0.2",
@@ -46,7 +49,7 @@
         "deepmerge": "4.3.1",
         "emoji-regex": "10.3.0",
         "file-saver": "2.0.5",
-        "hal-json-vuex": "2.0.0-alpha.16",
+        "hal-json-vuex": "3.0.0-alpha.1",
         "inter-ui": "3.19.3",
         "js-cookie": "3.0.5",
         "lodash": "4.17.21",
@@ -56,16 +59,16 @@
         "util": "0.12.5",
         "uuid": "9.0.1",
         "v-resize-observer": "2.1.0",
-        "vee-validate": "3.4.15",
-        "vue": "2.7.15",
+        "vee-validate": "4.12.4",
+        "vue": "3.3.13",
         "vue-axios": "3.5.2",
-        "vue-i18n": "8.28.2",
-        "vue-recaptcha-v3": "1.9.0",
-        "vue-router": "3.6.5",
-        "vue-toastification": "1.7.14",
+        "vue-i18n": "9.8.0",
+        "vue-recaptcha-v3": "2.0.1",
+        "vue-router": "4.2.5",
+        "vue-toastification": "2.0.0-rc.5",
         "vuedraggable": "2.24.3",
-        "vuetify": "2.7.1",
-        "vuex": "3.6.2",
+        "vuetify": "3.4.9",
+        "vuex": "4.1.0",
         "xlsx": "0.18.5"
       },
       "devDependencies": {
@@ -73,14 +76,19 @@
         "@sentry/vite-plugin": "2.10.2",
         "@testing-library/jest-dom": "6.1.6",
         "@testing-library/user-event": "14.5.2",
-        "@testing-library/vue": "5.9.0",
-        "@vitejs/plugin-vue2": "2.3.1",
+        "@testing-library/vue": "8.0.1",
+        "@vitejs/plugin-vue": "5.0.2",
         "@vitest/coverage-v8": "1.1.0",
         "@vue/cli-plugin-babel": "5.0.8",
         "@vue/cli-plugin-eslint": "5.0.8",
         "@vue/cli-service": "5.0.8",
+        "@vue/compiler-dom": "3.3.13",
+        "@vue/compiler-sfc": "3.3.13",
         "@vue/eslint-config-prettier": "9.0.0",
-        "@vue/test-utils": "1.3.6",
+        "@vue/runtime-dom": "3.3.13",
+        "@vue/server-renderer": "3.3.13",
+        "@vue/shared": "3.3.13",
+        "@vue/test-utils": "2.4.3",
         "babel-plugin-require-context-hook": "1.0.0",
         "eslint": "8.56.0",
         "eslint-config-prettier": "9.1.0",
@@ -95,15 +103,15 @@
         "jsdom": "23.0.1",
         "lint-staged": "15.2.0",
         "prettier": "3.1.1",
-        "sass": "1.32.13",
+        "sass": "1.69.6",
         "unplugin-vue-components": "0.26.0",
         "vite": "5.0.10",
         "vite-plugin-comlink": "3.0.5",
-        "vite-plugin-vue2-svg": "0.4.0",
+        "vite-plugin-svg4vue": "3.1.0",
+        "vite-plugin-vuetify": "2.0.1",
         "vitest": "1.1.0",
         "vitest-canvas-mock": "0.3.3",
-        "vue-cli-plugin-vuetify": "2.5.8",
-        "vue-template-compiler": "2.7.15"
+        "vue-cli-plugin-vuetify": "2.5.8"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -180,9 +188,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz",
-      "integrity": "sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz",
+      "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -190,10 +198,10 @@
         "@babel/generator": "^7.23.6",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.6",
+        "@babel/helpers": "^7.23.7",
         "@babel/parser": "^7.23.6",
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.6",
+        "@babel/traverse": "^7.23.7",
         "@babel/types": "^7.23.6",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -283,9 +291,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.6.tgz",
-      "integrity": "sha512-cBXU1vZni/CpGF29iTu4YRbOZt3Wat6zCoMDxRF1MayiEc4URxOj31tT65HUM0CRpMowA3HCJaAOVOUnMf96cw==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.7.tgz",
+      "integrity": "sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -548,13 +556,13 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.6.tgz",
-      "integrity": "sha512-wCfsbN4nBidDRhpDhvcKlzHWCTlgJYUUdSJfzXb2NuBssDSIjc3xcb+znA7l+zYsFljAcGM0aFkN40cR3lXiGA==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.7.tgz",
+      "integrity": "sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.6",
+        "@babel/traverse": "^7.23.7",
         "@babel/types": "^7.23.6"
       },
       "engines": {
@@ -619,9 +627,9 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz",
-      "integrity": "sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz",
+      "integrity": "sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -652,16 +660,13 @@
       }
     },
     "node_modules/@babel/plugin-proposal-decorators": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.6.tgz",
-      "integrity": "sha512-D7Ccq9LfkBFnow3azZGJvZYgcfeqAw3I1e5LoTpj6UKIFQilh8yqXsIGcRIqbBdsPWIz+Ze7ZZfggSj62Qp+Fg==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.7.tgz",
+      "integrity": "sha512-b1s5JyeMvqj7d9m9KhJNHKc18gEJiSyVzVX3bwbiPalQBQpuvfPh6lA9F7Kk/dWH0TIiXRpB9yicwijY6buPng==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.23.6",
+        "@babel/helper-create-class-features-plugin": "^7.23.7",
         "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.22.20",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
         "@babel/plugin-syntax-decorators": "^7.23.3"
       },
       "engines": {
@@ -964,9 +969,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.4.tgz",
-      "integrity": "sha512-efdkfPhHYTtn0G6n2ddrESE91fgXxjlqLsnUtPWnJs4a4mZIbUaK7ffqKIIUKXSHwcDvaCVX6GXkaJJFqtX7jw==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz",
+      "integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -1583,16 +1588,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.6.tgz",
-      "integrity": "sha512-kF1Zg62aPseQ11orDhFRw+aPG/eynNQtI+TyY+m33qJa2cJ5EEvza2P2BNTIA9E5MyqFABHEyY6CPHwgdy9aNg==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.7.tgz",
+      "integrity": "sha512-fa0hnfmiXc9fq/weK34MUV0drz2pOL/vfKWvN7Qw127hiUPabFCUMgAbYWcchRzMJit4o5ARsK/s+5h0249pLw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.22.15",
         "@babel/helper-plugin-utils": "^7.22.5",
-        "babel-plugin-polyfill-corejs2": "^0.4.6",
-        "babel-plugin-polyfill-corejs3": "^0.8.5",
-        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "babel-plugin-polyfill-corejs2": "^0.4.7",
+        "babel-plugin-polyfill-corejs3": "^0.8.7",
+        "babel-plugin-polyfill-regenerator": "^0.5.4",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -1742,9 +1747,9 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.6.tgz",
-      "integrity": "sha512-2XPn/BqKkZCpzYhUUNZ1ssXw7DcXfKQEjv/uXZUXgaebCMYmkEsfZ2yY+vv+xtXv50WmL5SGhyB6/xsWxIvvOQ==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.7.tgz",
+      "integrity": "sha512-SY27X/GtTz/L4UryMNJ6p4fH4nsgWbz84y9FE0bQeWJP6O5BhgVCt53CotQKHCOeXJel8VyhlhujhlltKms/CA==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.23.5",
@@ -1753,7 +1758,7 @@
         "@babel/helper-validator-option": "^7.23.5",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
         "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.3",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7",
         "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
@@ -1774,7 +1779,7 @@
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.23.3",
-        "@babel/plugin-transform-async-generator-functions": "^7.23.4",
+        "@babel/plugin-transform-async-generator-functions": "^7.23.7",
         "@babel/plugin-transform-async-to-generator": "^7.23.3",
         "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
         "@babel/plugin-transform-block-scoping": "^7.23.4",
@@ -1822,9 +1827,9 @@
         "@babel/plugin-transform-unicode-regex": "^7.23.3",
         "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.6",
-        "babel-plugin-polyfill-corejs3": "^0.8.5",
-        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "babel-plugin-polyfill-corejs2": "^0.4.7",
+        "babel-plugin-polyfill-corejs3": "^0.8.7",
+        "babel-plugin-polyfill-regenerator": "^0.5.4",
         "core-js-compat": "^3.31.0",
         "semver": "^6.3.1"
       },
@@ -1856,9 +1861,9 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
-      "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
+      "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1881,9 +1886,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz",
-      "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz",
+      "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
@@ -1931,9 +1936,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.10.tgz",
-      "integrity": "sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
+      "integrity": "sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==",
       "cpu": [
         "ppc64"
       ],
@@ -1947,9 +1952,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.10.tgz",
-      "integrity": "sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.11.tgz",
+      "integrity": "sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==",
       "cpu": [
         "arm"
       ],
@@ -1963,9 +1968,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.10.tgz",
-      "integrity": "sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz",
+      "integrity": "sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==",
       "cpu": [
         "arm64"
       ],
@@ -1979,9 +1984,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.10.tgz",
-      "integrity": "sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.11.tgz",
+      "integrity": "sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==",
       "cpu": [
         "x64"
       ],
@@ -1995,9 +2000,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.10.tgz",
-      "integrity": "sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz",
+      "integrity": "sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==",
       "cpu": [
         "arm64"
       ],
@@ -2011,9 +2016,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.10.tgz",
-      "integrity": "sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz",
+      "integrity": "sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==",
       "cpu": [
         "x64"
       ],
@@ -2027,9 +2032,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.10.tgz",
-      "integrity": "sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz",
+      "integrity": "sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==",
       "cpu": [
         "arm64"
       ],
@@ -2043,9 +2048,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.10.tgz",
-      "integrity": "sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz",
+      "integrity": "sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==",
       "cpu": [
         "x64"
       ],
@@ -2059,9 +2064,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.10.tgz",
-      "integrity": "sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz",
+      "integrity": "sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==",
       "cpu": [
         "arm"
       ],
@@ -2075,9 +2080,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.10.tgz",
-      "integrity": "sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz",
+      "integrity": "sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==",
       "cpu": [
         "arm64"
       ],
@@ -2091,9 +2096,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.10.tgz",
-      "integrity": "sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz",
+      "integrity": "sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==",
       "cpu": [
         "ia32"
       ],
@@ -2107,9 +2112,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.10.tgz",
-      "integrity": "sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz",
+      "integrity": "sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==",
       "cpu": [
         "loong64"
       ],
@@ -2123,9 +2128,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.10.tgz",
-      "integrity": "sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz",
+      "integrity": "sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==",
       "cpu": [
         "mips64el"
       ],
@@ -2139,9 +2144,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.10.tgz",
-      "integrity": "sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz",
+      "integrity": "sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==",
       "cpu": [
         "ppc64"
       ],
@@ -2155,9 +2160,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.10.tgz",
-      "integrity": "sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz",
+      "integrity": "sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==",
       "cpu": [
         "riscv64"
       ],
@@ -2171,9 +2176,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.10.tgz",
-      "integrity": "sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz",
+      "integrity": "sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==",
       "cpu": [
         "s390x"
       ],
@@ -2187,9 +2192,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.10.tgz",
-      "integrity": "sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz",
+      "integrity": "sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==",
       "cpu": [
         "x64"
       ],
@@ -2203,9 +2208,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.10.tgz",
-      "integrity": "sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz",
+      "integrity": "sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==",
       "cpu": [
         "x64"
       ],
@@ -2219,9 +2224,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.10.tgz",
-      "integrity": "sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz",
+      "integrity": "sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==",
       "cpu": [
         "x64"
       ],
@@ -2235,9 +2240,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.10.tgz",
-      "integrity": "sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz",
+      "integrity": "sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==",
       "cpu": [
         "x64"
       ],
@@ -2251,9 +2256,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.10.tgz",
-      "integrity": "sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz",
+      "integrity": "sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==",
       "cpu": [
         "arm64"
       ],
@@ -2267,9 +2272,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.10.tgz",
-      "integrity": "sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz",
+      "integrity": "sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==",
       "cpu": [
         "ia32"
       ],
@@ -2283,9 +2288,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.10.tgz",
-      "integrity": "sha512-whqLG6Sc70AbU73fFYvuYzaE4MNMBIlR1Y/IrUeOXFrWHxBEjjbZaQ3IXIQS8wJdAzue2GwYZCjOrgrU1oUHoA==",
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz",
+      "integrity": "sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==",
       "cpu": [
         "x64"
       ],
@@ -2659,8 +2664,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
@@ -2755,19 +2759,11 @@
         "node": ">=14"
       }
     },
-    "node_modules/@pkgr/utils": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
-      "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+    "node_modules/@pkgr/core": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz",
+      "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
       "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "fast-glob": "^3.3.0",
-        "is-glob": "^4.0.3",
-        "open": "^9.1.0",
-        "picocolors": "^1.0.0",
-        "tslib": "^2.6.0"
-      },
       "engines": {
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       },
@@ -2775,36 +2771,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@pkgr/utils/node_modules/define-lazy-prop": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
-      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@pkgr/utils/node_modules/open": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
-      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
-      "dev": true,
-      "dependencies": {
-        "default-browser": "^4.0.0",
-        "define-lazy-prop": "^3.0.0",
-        "is-inside-container": "^1.0.0",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.24",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
@@ -3021,9 +2987,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz",
-      "integrity": "sha512-6vMdBZqtq1dVQ4CWdhFwhKZL6E4L1dV6jUjuBvsavvNJSppzi6dLBbuV+3+IyUREaj9ZFvQefnQm28v4OCXlig==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.2.tgz",
+      "integrity": "sha512-RKzxFxBHq9ysZ83fn8Iduv3A283K7zPPYuhL/z9CQuyFrjwpErJx0h4aeb/bnJ+q29GRLgJpY66ceQ/Wcsn3wA==",
       "cpu": [
         "arm"
       ],
@@ -3034,9 +3000,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.1.tgz",
-      "integrity": "sha512-Jto9Fl3YQ9OLsTDWtLFPtaIMSL2kwGyGoVCmPC8Gxvym9TCZm4Sie+cVeblPO66YZsYH8MhBKDMGZ2NDxuk/XQ==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.2.tgz",
+      "integrity": "sha512-yZ+MUbnwf3SHNWQKJyWh88ii2HbuHCFQnAYTeeO1Nb8SyEiWASEi5dQUygt3ClHWtA9My9RQAYkjvrsZ0WK8Xg==",
       "cpu": [
         "arm64"
       ],
@@ -3047,9 +3013,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.1.tgz",
-      "integrity": "sha512-LtYcLNM+bhsaKAIGwVkh5IOWhaZhjTfNOkGzGqdHvhiCUVuJDalvDxEdSnhFzAn+g23wgsycmZk1vbnaibZwwA==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.2.tgz",
+      "integrity": "sha512-vqJ/pAUh95FLc/G/3+xPqlSBgilPnauVf2EXOQCZzhZJCXDXt/5A8mH/OzU6iWhb3CNk5hPJrh8pqJUPldN5zw==",
       "cpu": [
         "arm64"
       ],
@@ -3060,9 +3026,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.1.tgz",
-      "integrity": "sha512-KyP/byeXu9V+etKO6Lw3E4tW4QdcnzDG/ake031mg42lob5tN+5qfr+lkcT/SGZaH2PdW4Z1NX9GHEkZ8xV7og==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.2.tgz",
+      "integrity": "sha512-otPHsN5LlvedOprd3SdfrRNhOahhVBwJpepVKUN58L0RnC29vOAej1vMEaVU6DadnpjivVsNTM5eNt0CcwTahw==",
       "cpu": [
         "x64"
       ],
@@ -3073,9 +3039,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.1.tgz",
-      "integrity": "sha512-Yqz/Doumf3QTKplwGNrCHe/B2p9xqDghBZSlAY0/hU6ikuDVQuOUIpDP/YcmoT+447tsZTmirmjgG3znvSCR0Q==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.2.tgz",
+      "integrity": "sha512-ewG5yJSp+zYKBYQLbd1CUA7b1lSfIdo9zJShNTyc2ZP1rcPrqyZcNlsHgs7v1zhgfdS+kW0p5frc0aVqhZCiYQ==",
       "cpu": [
         "arm"
       ],
@@ -3086,9 +3052,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.1.tgz",
-      "integrity": "sha512-u3XkZVvxcvlAOlQJ3UsD1rFvLWqu4Ef/Ggl40WAVCuogf4S1nJPHh5RTgqYFpCOvuGJ7H5yGHabjFKEZGExk5Q==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.2.tgz",
+      "integrity": "sha512-pL6QtV26W52aCWTG1IuFV3FMPL1m4wbsRG+qijIvgFO/VBsiXJjDPE/uiMdHBAO6YcpV4KvpKtd0v3WFbaxBtg==",
       "cpu": [
         "arm64"
       ],
@@ -3099,9 +3065,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.1.tgz",
-      "integrity": "sha512-0XSYN/rfWShW+i+qjZ0phc6vZ7UWI8XWNz4E/l+6edFt+FxoEghrJHjX1EY/kcUGCnZzYYRCl31SNdfOi450Aw==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.2.tgz",
+      "integrity": "sha512-On+cc5EpOaTwPSNetHXBuqylDW+765G/oqB9xGmWU3npEhCh8xu0xqHGUA+4xwZLqBbIZNcBlKSIYfkBm6ko7g==",
       "cpu": [
         "arm64"
       ],
@@ -3112,9 +3078,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.1.tgz",
-      "integrity": "sha512-LmYIO65oZVfFt9t6cpYkbC4d5lKHLYv5B4CSHRpnANq0VZUQXGcCPXHzbCXCz4RQnx7jvlYB1ISVNCE/omz5cw==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.2.tgz",
+      "integrity": "sha512-Wnx/IVMSZ31D/cO9HSsU46FjrPWHqtdF8+0eyZ1zIB5a6hXaZXghUKpRrC4D5DcRTZOjml2oBhXoqfGYyXKipw==",
       "cpu": [
         "riscv64"
       ],
@@ -3125,9 +3091,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.1.tgz",
-      "integrity": "sha512-kr8rEPQ6ns/Lmr/hiw8sEVj9aa07gh1/tQF2Y5HrNCCEPiCBGnBUt9tVusrcBBiJfIt1yNaXN6r1CCmpbFEDpg==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.2.tgz",
+      "integrity": "sha512-ym5x1cj4mUAMBummxxRkI4pG5Vht1QMsJexwGP8547TZ0sox9fCLDHw9KCH9c1FO5d9GopvkaJsBIOkTKxksdw==",
       "cpu": [
         "x64"
       ],
@@ -3138,9 +3104,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.1.tgz",
-      "integrity": "sha512-t4QSR7gN+OEZLG0MiCgPqMWZGwmeHhsM4AkegJ0Kiy6TnJ9vZ8dEIwHw1LcZKhbHxTY32hp9eVCMdR3/I8MGRw==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.2.tgz",
+      "integrity": "sha512-m0hYELHGXdYx64D6IDDg/1vOJEaiV8f1G/iO+tejvRCJNSwK4jJ15e38JQy5Q6dGkn1M/9KcyEOwqmlZ2kqaZg==",
       "cpu": [
         "x64"
       ],
@@ -3151,9 +3117,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.1.tgz",
-      "integrity": "sha512-7XI4ZCBN34cb+BH557FJPmh0kmNz2c25SCQeT9OiFWEgf8+dL6ZwJ8f9RnUIit+j01u07Yvrsuu1rZGxJCc51g==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.2.tgz",
+      "integrity": "sha512-x1CWburlbN5JjG+juenuNa4KdedBdXLjZMp56nHFSHTOsb/MI2DYiGzLtRGHNMyydPGffGId+VgjOMrcltOksA==",
       "cpu": [
         "arm64"
       ],
@@ -3164,9 +3130,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.1.tgz",
-      "integrity": "sha512-yE5c2j1lSWOH5jp+Q0qNL3Mdhr8WuqCNVjc6BxbVfS5cAS6zRmdiw7ktb8GNpDCEUJphILY6KACoFoRtKoqNQg==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.2.tgz",
+      "integrity": "sha512-VVzCB5yXR1QlfsH1Xw1zdzQ4Pxuzv+CPr5qpElpKhVxlxD3CRdfubAG9mJROl6/dmj5gVYDDWk8sC+j9BI9/kQ==",
       "cpu": [
         "ia32"
       ],
@@ -3177,9 +3143,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.1.tgz",
-      "integrity": "sha512-PyJsSsafjmIhVgaI1Zdj7m8BB8mMckFah/xbpplObyHfiXzKcI5UOUXRyOdHW7nz4DpMCuzLnF7v5IWHenCwYA==",
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.2.tgz",
+      "integrity": "sha512-SYRedJi+mweatroB+6TTnJYLts0L0bosg531xnQWtklOI6dezEagx4Q0qDyvRdK+qgdA3YZpjjGuPFtxBmddBA==",
       "cpu": [
         "x64"
       ],
@@ -3822,21 +3788,21 @@
       }
     },
     "node_modules/@testing-library/vue": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/vue/-/vue-5.9.0.tgz",
-      "integrity": "sha512-HWvI4s6FayFLmiqGcEMAMfTSO1SV12NukdoyllYMBobFqfO0TalQmfofMtiO+eRz+Amej8Z26dx4/WYIROzfVw==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/vue/-/vue-8.0.1.tgz",
+      "integrity": "sha512-l51ZEpjTQ6glq3wM+asQ1GbKJMGcxwgHEygETx0aCRN4TjFEGvMZy4YdWKs/y7bu4bmLrxcxhbEPP7iPSW/2OQ==",
       "dev": true,
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@testing-library/dom": "^9.0.0",
-        "@vue/test-utils": "^1.3.0"
+        "@babel/runtime": "^7.23.2",
+        "@testing-library/dom": "^9.3.3",
+        "@vue/test-utils": "^2.4.1"
       },
       "engines": {
         "node": ">=14"
       },
       "peerDependencies": {
-        "vue": "^2.6.10",
-        "vue-template-compiler": "^2.6.10"
+        "@vue/compiler-sfc": ">= 3",
+        "vue": ">= 3"
       }
     },
     "node_modules/@tiptap/core": {
@@ -4084,14 +4050,13 @@
         "url": "https://github.com/sponsors/ueberdosis"
       }
     },
-    "node_modules/@tiptap/vue-2": {
+    "node_modules/@tiptap/vue-3": {
       "version": "2.1.13",
-      "resolved": "https://registry.npmjs.org/@tiptap/vue-2/-/vue-2-2.1.13.tgz",
-      "integrity": "sha512-OsCINarPGyT3sDIXDrhVyaoH0I0VxeDDm+NgS5P0fPbBCnsHZ8csvxD9UB9/KZ/UoxYDfJ1zLplKQn1AIlnRzg==",
+      "resolved": "https://registry.npmjs.org/@tiptap/vue-3/-/vue-3-2.1.13.tgz",
+      "integrity": "sha512-sPMT+uXtPfYLQioXtxxMLij234++PEf5Z43/auOLu737pKdgBr7w0sC8oYiZMgFt9dNCZWBrvT0fupF8yQN8AQ==",
       "dependencies": {
         "@tiptap/extension-bubble-menu": "^2.1.13",
-        "@tiptap/extension-floating-menu": "^2.1.13",
-        "vue-ts-types": "^1.6.0"
+        "@tiptap/extension-floating-menu": "^2.1.13"
       },
       "funding": {
         "type": "github",
@@ -4100,7 +4065,7 @@
       "peerDependencies": {
         "@tiptap/core": "^2.0.0",
         "@tiptap/pm": "^2.0.0",
-        "vue": "^2.6.0"
+        "vue": "^3.0.0"
       }
     },
     "node_modules/@trysound/sax": {
@@ -4258,9 +4223,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.10.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz",
-      "integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==",
+      "version": "20.10.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz",
+      "integrity": "sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -4377,17 +4342,30 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
-    "node_modules/@vitejs/plugin-vue2": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.3.1.tgz",
-      "integrity": "sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==",
+    "node_modules/@vee-validate/i18n": {
+      "version": "4.12.4",
+      "resolved": "https://registry.npmjs.org/@vee-validate/i18n/-/i18n-4.12.4.tgz",
+      "integrity": "sha512-/OJTonHFRtCHfR+W1IIFTDG1cAlIXZmLNPF6M/X2RbmVRefcQm4yDgdzq22HJm5dpllMw+2TflYqCShAscBI1A=="
+    },
+    "node_modules/@vee-validate/rules": {
+      "version": "4.12.4",
+      "resolved": "https://registry.npmjs.org/@vee-validate/rules/-/rules-4.12.4.tgz",
+      "integrity": "sha512-r/BGZAst/0OkFJ9m+YGOzULVPZc7WQAFbAZk4UO9epDzz6KYt9fEC0rh6BbzwSf/Xw9U0JSCDOkNZ1gYNDoR5g==",
+      "dependencies": {
+        "vee-validate": "4.12.4"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.2.tgz",
+      "integrity": "sha512-kEjJHrLb5ePBvjD0SPZwJlw1QTRcjjCA9sB5VyfonoXVBxTS7TMnqL6EkLt1Eu61RDeiuZ/WN9Hf6PxXhPI2uA==",
       "dev": true,
       "engines": {
-        "node": "^14.18.0 || >= 16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
-        "vue": "^2.7.0-0"
+        "vite": "^5.0.0",
+        "vue": "^3.2.25"
       }
     },
     "node_modules/@vitest/coverage-v8": {
@@ -5151,14 +5129,74 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/@vue/compat": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.3.13.tgz",
+      "integrity": "sha512-JJ878anmzuqpBQtgxVhgmTGINWfHdRxslqDWhCp1Ogs7jcbS+nFNFjZkuFJYCvqpLE8nU9YbffCNsUcBDoiyYg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.0.2"
+      },
+      "peerDependencies": {
+        "vue": "3.3.13"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz",
+      "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "@vue/shared": "3.3.13",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.13.tgz",
+      "integrity": "sha512-EYRDpbLadGtNL0Gph+HoKiYqXLqZ0xSSpR5Dvnu/Ep7ggaCbjRDIus1MMxTS2Qm0koXED4xSlvTZaTnI8cYAsw==",
+      "dependencies": {
+        "@vue/compiler-core": "3.3.13",
+        "@vue/shared": "3.3.13"
+      }
+    },
     "node_modules/@vue/compiler-sfc": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
-      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.13.tgz",
+      "integrity": "sha512-DQVmHEy/EKIgggvnGRLx21hSqnr1smUS9Aq8tfxiiot8UR0/pXKHN9k78/qQ7etyQTFj5em5nruODON7dBeumw==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "@vue/compiler-core": "3.3.13",
+        "@vue/compiler-dom": "3.3.13",
+        "@vue/compiler-ssr": "3.3.13",
+        "@vue/reactivity-transform": "3.3.13",
+        "@vue/shared": "3.3.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.32",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "dependencies": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.13.tgz",
+      "integrity": "sha512-d/P3bCeUGmkJNS1QUZSAvoCIW4fkOKK3l2deE7zrp0ypJEy+En2AcypIkqvcFQOcw3F0zt2VfMvNsA9JmExTaw==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.3.13",
+        "@vue/shared": "3.3.13"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -5241,6 +5279,11 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
+      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
@@ -5255,19 +5298,90 @@
         "prettier": ">= 3.0.0"
       }
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.13.tgz",
+      "integrity": "sha512-fjzCxceMahHhi4AxUBzQqqVhuA21RJ0COaWTbIBl1PruGW1CeY97louZzLi4smpYx+CHfFPPU/CS8NybbGvPKQ==",
+      "dependencies": {
+        "@vue/shared": "3.3.13"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.13.tgz",
+      "integrity": "sha512-oWnydGH0bBauhXvh5KXUy61xr9gKaMbtsMHk40IK9M4gMuKPJ342tKFarY0eQ6jef8906m35q37wwA8DMZOm5Q==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "@vue/compiler-core": "3.3.13",
+        "@vue/shared": "3.3.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.5"
+      }
+    },
+    "node_modules/@vue/reactivity-transform/node_modules/magic-string": {
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.13.tgz",
+      "integrity": "sha512-1TzA5TvGuh2zUwMJgdfvrBABWZ7y8kBwBhm7BXk8rvdx2SsgcGfz2ruv2GzuGZNvL1aKnK8CQMV/jFOrxNQUMA==",
+      "dependencies": {
+        "@vue/reactivity": "3.3.13",
+        "@vue/shared": "3.3.13"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.13.tgz",
+      "integrity": "sha512-JJkpE8R/hJKXqVTgUoODwS5wqKtOsmJPEqmp90PDVGygtJ4C0PtOkcEYXwhiVEmef6xeXcIlrT3Yo5aQ4qkHhQ==",
+      "dependencies": {
+        "@vue/runtime-core": "3.3.13",
+        "@vue/shared": "3.3.13",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.13.tgz",
+      "integrity": "sha512-vSnN+nuf6iSqTL3Qgx/9A+BT+0Zf/VJOgF5uMZrKjYPs38GMYyAU1coDyBNHauehXDaP+zl73VhwWv0vBRBHcg==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.3.13",
+        "@vue/shared": "3.3.13"
+      },
+      "peerDependencies": {
+        "vue": "3.3.13"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz",
+      "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA=="
+    },
     "node_modules/@vue/test-utils": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.3.6.tgz",
-      "integrity": "sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.3.tgz",
+      "integrity": "sha512-F4K7mF+ad++VlTrxMJVRnenKSJmO6fkQt2wpRDiKDesQMkfpniGWsqEi/JevxGBo2qEkwwjvTUAoiGJLNx++CA==",
       "dev": true,
       "dependencies": {
-        "dom-event-types": "^1.0.0",
-        "lodash": "^4.17.15",
-        "pretty": "^2.0.0"
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^1.8.21"
       },
       "peerDependencies": {
-        "vue": "2.x",
-        "vue-template-compiler": "^2.x"
+        "@vue/server-renderer": "^3.0.1",
+        "vue": "^3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/server-renderer": {
+          "optional": true
+        }
       }
     },
     "node_modules/@vue/vue-loader-v15": {
@@ -5311,6 +5425,19 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "node_modules/@vuetify/loader-shared": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-2.0.1.tgz",
+      "integrity": "sha512-zy5/ohEO7RcJaWYu2Xiy8TBEOkTb42XvWvSAJwXAtY8OlwqyGhzzBp9OvMVjLGIuFXumBpXKlsaVIkeN0OWWSw==",
+      "devOptional": true,
+      "dependencies": {
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0",
+        "vuetify": "^3.0.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -5530,9 +5657,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
-      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -6105,15 +6232,6 @@
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "dev": true
     },
-    "node_modules/big-integer": {
-      "version": "1.6.52",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
-      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -6215,18 +6333,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "node_modules/bplist-parser": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
-      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
-      "dev": true,
-      "dependencies": {
-        "big-integer": "^1.6.44"
-      },
-      "engines": {
-        "node": ">= 5.10.0"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6327,21 +6433,6 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
-    "node_modules/bundle-name": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
-      "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
-      "dev": true,
-      "dependencies": {
-        "run-applescript": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -6417,9 +6508,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001571",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz",
-      "integrity": "sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==",
+      "version": "1.0.30001572",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz",
+      "integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==",
       "dev": true,
       "funding": [
         {
@@ -6886,27 +6977,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/clone-deep/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/clone-deep/node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/codepage": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -7043,20 +7113,6 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
-    "node_modules/condense-newlines": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
-      "integrity": "sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==",
-      "dev": true,
-      "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-whitespace": "^0.3.0",
-        "kind-of": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/config-chain": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -7174,9 +7230,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.34.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.34.0.tgz",
-      "integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.0.tgz",
+      "integrity": "sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -7185,9 +7241,9 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.34.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.34.0.tgz",
-      "integrity": "sha512-4ZIyeNbW/Cn1wkMMDy+mvrRUxrwFNjKwbhCfQpDd+eLgYipDqp8oGFGtLmhh18EDPKA0g3VUBYOxQGGwvWLVpA==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz",
+      "integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.22.2"
@@ -7623,7 +7679,9 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/debounce": {
       "version": "1.2.1",
@@ -7635,7 +7693,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -7712,64 +7770,42 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/default-browser": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
-      "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
-      "dev": true,
-      "dependencies": {
-        "bundle-name": "^3.0.0",
-        "default-browser-id": "^3.0.0",
-        "execa": "^7.1.1",
-        "titleize": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser-id": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
-      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
       "dev": true,
       "dependencies": {
-        "bplist-parser": "^0.2.0",
-        "untildify": "^4.0.0"
+        "execa": "^5.0.0"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">= 10"
       }
     },
-    "node_modules/default-browser/node_modules/execa": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
-      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+    "node_modules/default-gateway/node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
       "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^4.3.0",
-        "is-stream": "^3.0.0",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
         "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^3.0.7",
-        "strip-final-newline": "^3.0.0"
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
       },
       "engines": {
-        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/default-browser/node_modules/get-stream": {
+    "node_modules/default-gateway/node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
@@ -7781,168 +7817,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/default-browser/node_modules/is-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+    "node_modules/default-gateway/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true,
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=8"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/default-browser/node_modules/mimic-fn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+    "node_modules/default-gateway/node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "path-key": "^3.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/default-browser/node_modules/npm-run-path": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
-      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
       "dev": true,
       "dependencies": {
-        "path-key": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/onetime": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-      "dev": true,
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/default-gateway/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/default-gateway/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-gateway/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/default-gateway/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-gateway/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/default-gateway/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/defaults": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
-      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
-      "dev": true,
-      "dependencies": {
-        "clone": "^1.0.2"
+        "clone": "^1.0.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -8099,12 +8004,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-event-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.1.0.tgz",
-      "integrity": "sha512-jNCX+uNJ3v38BKvPbpki6j5ItVlnSqVV6vDWGS6rExzCMjsc39frLjm1n91o6YaKK6AZl0wLloItW6C6mr61BQ==",
-      "dev": true
-    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -8499,10 +8398,10 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.19.10",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.10.tgz",
-      "integrity": "sha512-S1Y27QGt/snkNYrRcswgRFqZjaTG5a5xM3EQo97uNBnH505pdzSNe/HLBq1v0RO7iK/ngdbhJB6mDAp0OK+iUA==",
-      "dev": true,
+      "version": "0.19.11",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz",
+      "integrity": "sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==",
+      "devOptional": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -8511,29 +8410,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.10",
-        "@esbuild/android-arm": "0.19.10",
-        "@esbuild/android-arm64": "0.19.10",
-        "@esbuild/android-x64": "0.19.10",
-        "@esbuild/darwin-arm64": "0.19.10",
-        "@esbuild/darwin-x64": "0.19.10",
-        "@esbuild/freebsd-arm64": "0.19.10",
-        "@esbuild/freebsd-x64": "0.19.10",
-        "@esbuild/linux-arm": "0.19.10",
-        "@esbuild/linux-arm64": "0.19.10",
-        "@esbuild/linux-ia32": "0.19.10",
-        "@esbuild/linux-loong64": "0.19.10",
-        "@esbuild/linux-mips64el": "0.19.10",
-        "@esbuild/linux-ppc64": "0.19.10",
-        "@esbuild/linux-riscv64": "0.19.10",
-        "@esbuild/linux-s390x": "0.19.10",
-        "@esbuild/linux-x64": "0.19.10",
-        "@esbuild/netbsd-x64": "0.19.10",
-        "@esbuild/openbsd-x64": "0.19.10",
-        "@esbuild/sunos-x64": "0.19.10",
-        "@esbuild/win32-arm64": "0.19.10",
-        "@esbuild/win32-ia32": "0.19.10",
-        "@esbuild/win32-x64": "0.19.10"
+        "@esbuild/aix-ppc64": "0.19.11",
+        "@esbuild/android-arm": "0.19.11",
+        "@esbuild/android-arm64": "0.19.11",
+        "@esbuild/android-x64": "0.19.11",
+        "@esbuild/darwin-arm64": "0.19.11",
+        "@esbuild/darwin-x64": "0.19.11",
+        "@esbuild/freebsd-arm64": "0.19.11",
+        "@esbuild/freebsd-x64": "0.19.11",
+        "@esbuild/linux-arm": "0.19.11",
+        "@esbuild/linux-arm64": "0.19.11",
+        "@esbuild/linux-ia32": "0.19.11",
+        "@esbuild/linux-loong64": "0.19.11",
+        "@esbuild/linux-mips64el": "0.19.11",
+        "@esbuild/linux-ppc64": "0.19.11",
+        "@esbuild/linux-riscv64": "0.19.11",
+        "@esbuild/linux-s390x": "0.19.11",
+        "@esbuild/linux-x64": "0.19.11",
+        "@esbuild/netbsd-x64": "0.19.11",
+        "@esbuild/openbsd-x64": "0.19.11",
+        "@esbuild/sunos-x64": "0.19.11",
+        "@esbuild/win32-arm64": "0.19.11",
+        "@esbuild/win32-ia32": "0.19.11",
+        "@esbuild/win32-x64": "0.19.11"
       }
     },
     "node_modules/escalade": {
@@ -9256,8 +9155,7 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/esutils": {
       "version": "2.0.3",
@@ -9449,18 +9347,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
-    "node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9684,9 +9570,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "funding": [
         {
           "type": "individual",
@@ -10117,15 +10003,15 @@
       }
     },
     "node_modules/hal-json-vuex": {
-      "version": "2.0.0-alpha.16",
-      "resolved": "https://registry.npmjs.org/hal-json-vuex/-/hal-json-vuex-2.0.0-alpha.16.tgz",
-      "integrity": "sha512-7OtQtJLr9Od4giw27ryINOYlM/6dvNZlcQiiseINq8qKrpc5dV9hLo4QOvKy8YGgnQOXYnCMSJ55/7XM+qiPGg==",
+      "version": "3.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/hal-json-vuex/-/hal-json-vuex-3.0.0-alpha.1.tgz",
+      "integrity": "sha512-9aLwBtdNGxNGmJrDu/aEDTaCNgHMhiPTKE40iL7R08kYiVrf2VfV+jfu89GyJKYDgZiBjm46naQ9FmW0fnAAPQ==",
       "dependencies": {
         "hal-json-normalizer": "^4.2.0",
         "url-template": "^2.0.8"
       },
       "engines": {
-        "node": ">=14.0.0 <19.0.0"
+        "node": ">=16.0.0 <21.0.0"
       }
     },
     "node_modules/hal-json-vuex/node_modules/url-template": {
@@ -10535,18 +10421,18 @@
       }
     },
     "node_modules/human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true,
       "engines": {
-        "node": ">=14.18.0"
+        "node": ">=10.17.0"
       }
     },
     "node_modules/hyphen": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.9.1.tgz",
-      "integrity": "sha512-fIPVvM6BUW+878xne+wwIcBjMxeKpoADmxNTjKMocUQWiGOvwyEfZEG95IeL/t4Su6nbfbXeYDUnz62pxzLPmw=="
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.10.1.tgz",
+      "integrity": "sha512-GQqrKU4ZVKaqDwuqnyptO65rxNeGZwWf7h2kjb3Wt7gn+W/2xzRqaFK5yhPoDEtSxqMPGopCyKQ+VW02hVmEAQ=="
     },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
@@ -10601,6 +10487,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10768,12 +10660,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -10840,10 +10726,13 @@
       }
     },
     "node_modules/is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true,
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "peer": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10904,39 +10793,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-inside-container": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
-      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^3.0.0"
-      },
-      "bin": {
-        "is-inside-container": "cli.js"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-inside-container/node_modules/is-docker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
-      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
@@ -11028,10 +10884,12 @@
       }
     },
     "node_modules/is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true,
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11183,15 +11041,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-whitespace": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
-      "integrity": "sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -11722,13 +11571,10 @@
       }
     },
     "node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11986,6 +11832,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/lint-staged/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/lint-staged/node_modules/yaml": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
@@ -12811,7 +12669,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/multicast-dns": {
       "version": "7.2.5",
@@ -13208,30 +13066,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object.omit/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "peer": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object.omit/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "peer": true,
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -14370,9 +14204,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.14",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.14.tgz",
-      "integrity": "sha512-65xXYsT40i9GyWzlHQ5ShZoK7JZdySeOozi/tz2EezDo6c04q6+ckYMeoY7idaie1qp2dT5KoYQ2yky6JuoHnA==",
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -14454,20 +14288,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/pretty": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
-      "integrity": "sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==",
-      "dev": true,
-      "dependencies": {
-        "condense-newlines": "^0.2.1",
-        "extend-shallow": "^2.0.1",
-        "js-beautify": "^1.6.12"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -15541,10 +15361,10 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.1.tgz",
-      "integrity": "sha512-pgPO9DWzLoW/vIhlSoDByCzcpX92bKEorbgXuZrqxByte3JFk2xSW2JEeAcyLc9Ru9pqcNNW+Ob7ntsk2oT/Xw==",
-      "dev": true,
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.2.tgz",
+      "integrity": "sha512-66RB8OtFKUTozmVEh3qyNfH+b+z2RXBVloqO2KCC/pjFaGaHtxP9fVfOQKPSGXg2mElmjmxjW/fZ7iKrEpMH5Q==",
+      "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -15553,19 +15373,19 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.9.1",
-        "@rollup/rollup-android-arm64": "4.9.1",
-        "@rollup/rollup-darwin-arm64": "4.9.1",
-        "@rollup/rollup-darwin-x64": "4.9.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.9.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.9.1",
-        "@rollup/rollup-linux-arm64-musl": "4.9.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.9.1",
-        "@rollup/rollup-linux-x64-gnu": "4.9.1",
-        "@rollup/rollup-linux-x64-musl": "4.9.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.9.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.9.1",
-        "@rollup/rollup-win32-x64-msvc": "4.9.1",
+        "@rollup/rollup-android-arm-eabi": "4.9.2",
+        "@rollup/rollup-android-arm64": "4.9.2",
+        "@rollup/rollup-darwin-arm64": "4.9.2",
+        "@rollup/rollup-darwin-x64": "4.9.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.9.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.9.2",
+        "@rollup/rollup-linux-arm64-musl": "4.9.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.9.2",
+        "@rollup/rollup-linux-x64-gnu": "4.9.2",
+        "@rollup/rollup-linux-x64-musl": "4.9.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.9.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.9.2",
+        "@rollup/rollup-win32-x64-msvc": "4.9.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -15581,98 +15401,6 @@
       "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
       "dev": true
     },
-    "node_modules/run-applescript": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
-      "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
-      "dev": true,
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/run-applescript/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/run-applescript/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -15762,18 +15490,20 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.32.13",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "version": "1.69.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.6.tgz",
+      "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/saxes": {
@@ -16027,15 +15757,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shallow-clone/node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16230,6 +15951,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16573,15 +16295,12 @@
       }
     },
     "node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true,
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=6"
       }
     },
     "node_modules/strip-indent": {
@@ -16776,12 +16495,12 @@
       "dev": true
     },
     "node_modules/synckit": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.7.tgz",
-      "integrity": "sha512-Ic2DW4WMr0gJ7z9rXYGlWPNBVzmsIZLFfKeVhmuVBUtw6ZOFB1GZnCcWQLc7OuBFLVLHKFAdaIZNc/yyUEvZ1g==",
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
       "dev": true,
       "dependencies": {
-        "@pkgr/utils": "^2.4.2",
+        "@pkgr/core": "^0.1.0",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -16819,16 +16538,16 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.9",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
-      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
+      "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.17",
+        "@jridgewell/trace-mapping": "^0.3.20",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.1",
-        "terser": "^5.16.8"
+        "terser": "^5.26.0"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -17044,18 +16763,6 @@
         "@popperjs/core": "^2.9.0"
       }
     },
-    "node_modules/titleize": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
-      "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -17471,15 +17178,15 @@
       }
     },
     "node_modules/unplugin-vue-components/node_modules/unplugin": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.1.tgz",
-      "integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.6.0.tgz",
+      "integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.11.2",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.0"
+        "webpack-virtual-modules": "^0.6.1"
       }
     },
     "node_modules/unplugin-vue-components/node_modules/webpack-virtual-modules": {
@@ -17494,13 +17201,14 @@
       "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
       "dev": true
     },
-    "node_modules/untildify": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
-      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
-      "dev": true,
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "devOptional": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=4",
+        "yarn": "*"
       }
     },
     "node_modules/update-browserslist-db": {
@@ -17681,18 +17389,33 @@
       }
     },
     "node_modules/vee-validate": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.15.tgz",
-      "integrity": "sha512-qEtvq9X2N7l5pjBe/6YGrrIBHxJA4KTrb3QrER3qzM7fzkH730m8LyVWMIzM47l//618nlUa7VvTdMFTRKr8tQ==",
+      "version": "4.12.4",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.12.4.tgz",
+      "integrity": "sha512-rqSjMdl0l/RiGKywKhkXttUKwDlQOoxTxe31uMQiMlwK4Hbtlvr3OcQvpREp/qPTARxNKudKWCUVW/mfzuxUVQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.1",
+        "type-fest": "^4.8.3"
+      },
       "peerDependencies": {
-        "vue": "^2.5.18"
+        "vue": "^3.3.11"
+      }
+    },
+    "node_modules/vee-validate/node_modules/type-fest": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.9.0.tgz",
+      "integrity": "sha512-KS/6lh/ynPGiHD/LnAobrEFq3Ad4pBzOlJ1wAnJx9N4EYoqFhMfLIBjUT2UEx4wg5ZE+cC1ob6DCSpppVo+rtg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/vite": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
       "integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "esbuild": "^0.19.3",
         "postcss": "^8.4.32",
@@ -17816,20 +17539,22 @@
         "node": ">=12"
       }
     },
-    "node_modules/vite-plugin-vue2-svg": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vue2-svg/-/vite-plugin-vue2-svg-0.4.0.tgz",
-      "integrity": "sha512-Z9NT9PTGwEKMSfxruPeBeAgMWAgMz5DiE6u8ZNtkYXODGWceUi6Dhp/f0NFO02sEoDiDxkokzr8u4qK4+9rXJQ==",
+    "node_modules/vite-plugin-svg4vue": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svg4vue/-/vite-plugin-svg4vue-3.1.0.tgz",
+      "integrity": "sha512-I1gAi8WSqrvp9mGbPwERJhrzxPgp0w8ETWX21bMIGYptHjSvjubVAB0O2ieJ2+7CruUwq3n7GwuBMR7ccZLRbA==",
       "dev": true,
       "dependencies": {
-        "@vue/component-compiler-utils": "^3.2.0",
-        "svgo": "^3.0.0"
+        "svgo": "^3.0.3",
+        "svgo-extra": "^2.1.0",
+        "ufo": "^1.3.2"
       },
       "peerDependencies": {
-        "vue-template-compiler": "^2.2.0"
+        "vite": "^4.0.2 || ^5.0.0",
+        "vue": "^2.7.14 || ^3.2.45"
       }
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/commander": {
+    "node_modules/vite-plugin-svg4vue/node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
       "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
@@ -17838,7 +17563,7 @@
         "node": ">= 10"
       }
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/css-tree": {
+    "node_modules/vite-plugin-svg4vue/node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
       "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
@@ -17851,7 +17576,7 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/csso": {
+    "node_modules/vite-plugin-svg4vue/node_modules/csso": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
       "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
@@ -17864,7 +17589,7 @@
         "npm": ">=7.0.0"
       }
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/csso/node_modules/css-tree": {
+    "node_modules/vite-plugin-svg4vue/node_modules/csso/node_modules/css-tree": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
       "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
@@ -17878,19 +17603,19 @@
         "npm": ">=7.0.0"
       }
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/csso/node_modules/mdn-data": {
+    "node_modules/vite-plugin-svg4vue/node_modules/csso/node_modules/mdn-data": {
       "version": "2.0.28",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "dev": true
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/mdn-data": {
+    "node_modules/vite-plugin-svg4vue/node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "dev": true
     },
-    "node_modules/vite-plugin-vue2-svg/node_modules/svgo": {
+    "node_modules/vite-plugin-svg4vue/node_modules/svgo": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.1.0.tgz",
       "integrity": "sha512-R5SnNA89w1dYgNv570591F66v34b3eQShpIBcQtZtM5trJwm1VvxbIoMpRYY3ybTAutcKTLEmTsdnaknOHbiQA==",
@@ -17915,6 +17640,34 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/vite-plugin-svg4vue/node_modules/svgo-extra": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/svgo-extra/-/svgo-extra-2.3.0.tgz",
+      "integrity": "sha512-eU1YDc2mGUvTrOakanwzggDDjfmycbkUhb4/+WVuPt5eIOGmcK5g+zsdj3TktthuHcOWZFXnkPTUPTVHWksuBA==",
+      "dev": true,
+      "peerDependencies": {
+        "svgo": "^3.0.2"
+      }
+    },
+    "node_modules/vite-plugin-vuetify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.1.tgz",
+      "integrity": "sha512-GlRVAruohE8b0FqmeYYh1cYg3n8THGOv066uMA44qLv9uhUxSLw55CS7fi2yU0wH363TJ2vq36zUsPTjRFrjGQ==",
+      "devOptional": true,
+      "dependencies": {
+        "@vuetify/loader-shared": "^2.0.1",
+        "debug": "^4.3.3",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=5",
+        "vue": "^3.0.0",
+        "vuetify": "^3.0.0"
+      }
+    },
     "node_modules/vitest": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.1.0.tgz",
@@ -18143,13 +17896,36 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/vitest/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/vue": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
-      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.13.tgz",
+      "integrity": "sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==",
       "dependencies": {
-        "@vue/compiler-sfc": "2.7.15",
-        "csstype": "^3.1.0"
+        "@vue/compiler-dom": "3.3.13",
+        "@vue/compiler-sfc": "3.3.13",
+        "@vue/runtime-dom": "3.3.13",
+        "@vue/server-renderer": "3.3.13",
+        "@vue/shared": "3.3.13"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-axios": {
@@ -18216,6 +17992,12 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.27.tgz",
+      "integrity": "sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==",
+      "dev": true
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.3.2",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
@@ -18317,14 +18099,28 @@
       "dev": true
     },
     "node_modules/vue-i18n": {
-      "version": "8.28.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
-      "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
+      "integrity": "sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.8.0",
+        "@intlify/shared": "9.8.0",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
     },
     "node_modules/vue-loader": {
-      "version": "17.4.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.0.tgz",
-      "integrity": "sha512-tq81JlBNWYvoYAh5PRZXg5bE7BEv0Id6W7BF5otj18MtHgu5OqiK9rQu0z73r+VGlIq0lLDoEeC7RWYynUpXlQ==",
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
+      "integrity": "sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
@@ -18414,20 +18210,29 @@
       }
     },
     "node_modules/vue-recaptcha-v3": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/vue-recaptcha-v3/-/vue-recaptcha-v3-1.9.0.tgz",
-      "integrity": "sha512-WQIlhcOcETk3SYbEC88podUSq1J7UjmHpKgJhSy0Xm3DAjTIPjl19g9kn5KRdyTxNLiS/eR5C6H3Jk3c7b9baA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-recaptcha-v3/-/vue-recaptcha-v3-2.0.1.tgz",
+      "integrity": "sha512-isEDtOfHU4wWRrZZuxciAELtQmPOeEEdicPNa0f1AOyLPy3sCcBEcpFt+FOcO3RQv5unJ3Yn5NlsWtXv9rXqjg==",
       "dependencies": {
         "recaptcha-v3": "^1.8.0"
       },
       "peerDependencies": {
-        "vue": "^2.6.11"
+        "vue": "^3.0.11"
       }
     },
     "node_modules/vue-router": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
-      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
@@ -18446,10 +18251,12 @@
       "dev": true
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
-      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+      "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==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "de-indent": "^1.0.2",
         "he": "^1.2.0"
@@ -18462,19 +18269,11 @@
       "dev": true
     },
     "node_modules/vue-toastification": {
-      "version": "1.7.14",
-      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz",
-      "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==",
-      "peerDependencies": {
-        "vue": "^2.0.0"
-      }
-    },
-    "node_modules/vue-ts-types": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/vue-ts-types/-/vue-ts-types-1.6.1.tgz",
-      "integrity": "sha512-Fee0nT2LSm/Drf7Gghpy8ssK4eGWtNgsPjgvC691lkMFWFtWRvgrD2+nFjRvd6aKJQhjcvY+SIPUCJpQpsyScA==",
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
       "peerDependencies": {
-        "vue": "^2.6 || ^3.2"
+        "vue": "^3.0.2"
       }
     },
     "node_modules/vuedraggable": {
@@ -18486,23 +18285,47 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.7.1.tgz",
-      "integrity": "sha512-DVFmRsDtYrITw9yuGLwpFWngFYzEgk0KwloDCIV3+vhZw+NBFJOSzdbttbYmOwtqvQlhDxUyIRQolrRbSFAKlg==",
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.4.9.tgz",
+      "integrity": "sha512-pgBPdbgrHHHZWRybWevzRFezMax6CP2MccTivjOZSOF0XsnzoNOJGGpkTgIfBrk4UCp9jKx6JOJIztGtx/IcSw==",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/johnleider"
       },
       "peerDependencies": {
-        "vue": "^2.6.4"
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=1.0.0-alpha.12",
+        "vue": "^3.3.0",
+        "vue-i18n": "^9.0.0",
+        "webpack-plugin-vuetify": ">=2.0.0-alpha.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
       }
     },
     "node_modules/vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
       "peerDependencies": {
-        "vue": "^2.0.0"
+        "vue": "^3.2.0"
       }
     },
     "node_modules/w3c-keyname": {
@@ -18667,6 +18490,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/webpack-bundle-analyzer/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/webpack-bundle-analyzer/node_modules/ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
@@ -19231,9 +19063,9 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "8.15.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz",
-      "integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 135f4137c5..7023d8ec58 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@ecamp3/frontend",
   "private": true,
+  "type": "module",
   "scripts": {
     "serve": "vite --host 0.0.0.0",
     "preview": "vite preview --host 0.0.0.0 --port 3000",
@@ -44,7 +45,9 @@
     "@tiptap/extension-strike": "2.1.13",
     "@tiptap/extension-text": "2.1.13",
     "@tiptap/extension-underline": "2.1.13",
-    "@tiptap/vue-2": "2.1.13",
+    "@tiptap/vue-3": "2.1.13",
+    "@vee-validate/i18n": "4.12.4",
+    "@vee-validate/rules": "4.12.4",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "@zxcvbn-ts/language-de": "3.0.2",
@@ -59,7 +62,7 @@
     "deepmerge": "4.3.1",
     "emoji-regex": "10.3.0",
     "file-saver": "2.0.5",
-    "hal-json-vuex": "2.0.0-alpha.16",
+    "hal-json-vuex": "3.0.0-alpha.1",
     "inter-ui": "3.19.3",
     "js-cookie": "3.0.5",
     "lodash": "4.17.21",
@@ -69,17 +72,17 @@
     "util": "0.12.5",
     "uuid": "9.0.1",
     "v-resize-observer": "2.1.0",
-    "vee-validate": "3.4.15",
+    "vee-validate": "4.12.4",
     "vue": "3.3.13",
     "@vue/compat": "3.3.13",
     "vue-axios": "3.5.2",
-    "vue-i18n": "8.28.2",
-    "vue-recaptcha-v3": "1.9.0",
-    "vue-router": "3.6.5",
-    "vue-toastification": "1.7.14",
+    "vue-i18n": "9.8.0",
+    "vue-recaptcha-v3": "2.0.1",
+    "vue-router": "4.2.5",
+    "vue-toastification": "2.0.0-rc.5",
     "vuedraggable": "2.24.3",
-    "vuetify": "2.7.1",
-    "vuex": "3.6.2",
+    "vuetify": "3.4.9",
+    "vuex": "4.1.0",
     "xlsx": "0.18.5"
   },
   "devDependencies": {
@@ -87,8 +90,8 @@
     "@sentry/vite-plugin": "2.10.2",
     "@testing-library/jest-dom": "6.1.6",
     "@testing-library/user-event": "14.5.2",
-    "@testing-library/vue": "5.9.0",
-    "@vitejs/plugin-vue2": "2.3.1",
+    "@testing-library/vue": "8.0.1",
+    "@vitejs/plugin-vue": "5.0.2",
     "@vitest/coverage-v8": "1.1.0",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
@@ -99,7 +102,7 @@
     "@vue/server-renderer": "3.3.13",
     "@vue/shared": "3.3.13",
     "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/test-utils": "1.3.6",
+    "@vue/test-utils": "2.4.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
@@ -114,11 +117,12 @@
     "jsdom": "23.0.1",
     "lint-staged": "15.2.0",
     "prettier": "3.1.1",
-    "sass": "1.32.13",
+    "sass": "1.69.6",
     "unplugin-vue-components": "0.26.0",
     "vite": "5.0.10",
     "vite-plugin-comlink": "3.0.5",
-    "vite-plugin-vue2-svg": "0.4.0",
+    "vite-plugin-svg4vue": "3.1.0",
+    "vite-plugin-vuetify": "2.0.1",
     "vitest": "1.1.0",
     "vitest-canvas-mock": "0.3.3",
     "vue-cli-plugin-vuetify": "2.5.8"
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 337e40a211..e60d45b586 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -72,7 +72,7 @@ export default {
 @import 'src/scss/global';
 @import '~@mdi/font/css/materialdesignicons.css';
 
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get($display-breakpoints, 'xs')} {
   html,
   body,
   .v-application {
@@ -122,7 +122,7 @@ export default {
   border-top-right-radius: 0 !important;
 }
 
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get($display-breakpoints, 'xs')} {
   .v-main > .v-main__wrap > .container {
     min-height: 100%;
     display: flex;
diff --git a/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue b/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
index fb6d59bac1..000ecc13ed 100644
--- a/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
+++ b/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
@@ -15,7 +15,7 @@
     <template v-for="key in localSortedKeys">
       <StoryboardRowDefault
         v-if="variant === 'default'"
-        :key="key"
+        :key="`default-${key}`"
         :disabled="disabled"
         :is-last-section="isLastSection"
         :item-key="key"
@@ -26,7 +26,7 @@
       />
       <StoryboardRowDense
         v-else-if="variant === 'dense'"
-        :key="key"
+        :key="`dense-${key}`"
         :disabled="disabled"
         :is-last-section="isLastSection"
         :item-key="key"
diff --git a/frontend/src/components/campCreate/CampCreateStep1.vue b/frontend/src/components/campCreate/CampCreateStep1.vue
index 10e4286d58..a85260d9a8 100644
--- a/frontend/src/components/campCreate/CampCreateStep1.vue
+++ b/frontend/src/components/campCreate/CampCreateStep1.vue
@@ -1,58 +1,55 @@
 <template>
   <v-stepper-content :step="1" class="pa-0">
-    <ValidationObserver v-slot="{ handleSubmit, valid, validate }">
-      <v-form ref="form" @submit.prevent="handleSubmit(() => $emit('next-step'))">
-        <v-card-text>
-          <e-text-field
-            v-model="localCamp.name"
-            :name="$tc('entity.camp.fields.name')"
-            vee-rules="required"
-            required
-            autofocus
-          />
-          <e-text-field
-            v-model="localCamp.title"
-            :name="$tc('entity.camp.fields.title')"
-            vee-rules="required"
-            required
-          />
-          <e-text-field
-            v-model="localCamp.motto"
-            :name="$tc('entity.camp.fields.motto')"
-          />
-          <create-camp-periods
-            :add-period="addPeriod"
-            :periods="localCamp.periods"
-            :delete-period="deletePeriod"
-            :period-deletable="periodDeletable"
-          />
-        </v-card-text>
-        <v-divider />
-        <ContentActions>
-          <v-spacer />
-          <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
-          <ButtonContinue v-if="valid" @click="$emit('next-step')" />
-          <v-tooltip v-else top>
-            <template #activator="{ attrs, on }">
-              <v-btn
-                elevation="0"
-                color="secondary"
-                v-bind="attrs"
-                @click="validate()"
-                v-on="on"
-              >
-                {{ $tc('global.button.continue') }}
-              </v-btn>
-            </template>
-            {{ $tc('components.campCreate.campCreateStep1.submitTooltip') }}
-          </v-tooltip>
-        </ContentActions>
-      </v-form>
-    </ValidationObserver>
+    <!--    <ValidationObserver v-slot="{ handleSubmit, valid, validate }">-->
+    <v-form ref="form" @submit.prevent="handleSubmit(() => $emit('next-step'))">
+      <v-card-text>
+        <e-text-field
+          v-model="localCamp.name"
+          :name="$tc('entity.camp.fields.name')"
+          vee-rules="required"
+          required
+          autofocus
+        />
+        <e-text-field
+          v-model="localCamp.title"
+          :name="$tc('entity.camp.fields.title')"
+          vee-rules="required"
+          required
+        />
+        <e-text-field v-model="localCamp.motto" :name="$tc('entity.camp.fields.motto')" />
+        <create-camp-periods
+          :add-period="addPeriod"
+          :periods="localCamp.periods"
+          :delete-period="deletePeriod"
+          :period-deletable="periodDeletable"
+        />
+      </v-card-text>
+      <v-divider />
+      <ContentActions>
+        <v-spacer />
+        <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
+        <ButtonContinue v-if="valid" @click="$emit('next-step')" />
+        <v-tooltip v-else top>
+          <template #activator="{ attrs, on }">
+            <v-btn
+              elevation="0"
+              color="secondary"
+              v-bind="attrs"
+              @click="validate()"
+              v-on="on"
+            >
+              {{ $tc('global.button.continue') }}
+            </v-btn>
+          </template>
+          {{ $tc('components.campCreate.campCreateStep1.submitTooltip') }}
+        </v-tooltip>
+      </ContentActions>
+    </v-form>
+    <!--    </ValidationObserver>-->
   </v-stepper-content>
 </template>
 <script>
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import ButtonCancel from '@/components/buttons/ButtonCancel.vue'
 import ButtonContinue from '@/components/buttons/ButtonContinue.vue'
 import ContentActions from '@/components/layout/ContentActions.vue'
@@ -67,7 +64,7 @@ export default {
     ContentActions,
     CreateCampPeriods,
     ETextField,
-    ValidationObserver,
+    // ValidationObserver,
   },
   props: {
     camp: { type: Object, required: true },
diff --git a/frontend/src/components/campCreate/CampCreateStep2.vue b/frontend/src/components/campCreate/CampCreateStep2.vue
index 59872b77a5..db231c7e80 100644
--- a/frontend/src/components/campCreate/CampCreateStep2.vue
+++ b/frontend/src/components/campCreate/CampCreateStep2.vue
@@ -1,118 +1,115 @@
 <template>
   <v-stepper-content :step="2" class="pa-0">
-    <ValidationObserver v-slot="{ handleSubmit, valid, validate }">
-      <v-form ref="form" @submit.prevent="handleSubmit(() => $emit('create-camp'))">
-        <v-card-text>
-          <server-error :server-error="serverError" />
-          <e-select
-            v-model="localCamp.campPrototype"
-            :vee-rules="{ required: false, excluded: ['', false, true] }"
-            :skip-if-empty="false"
-            :name="$tc('entity.camp.prototype')"
-            :hint="prorotypeHint"
-            persistent-hint
-            :items="campTemplates"
-            :menu-props="{ offsetY: true }"
-          />
-          <div v-if="localCamp.campPrototype" class="px-2 rounded-lg dashborder">
-            <h3 class="mt-2 h3">
-              {{ $tc('components.campCreate.campCreateStep2.preview') }}
-            </h3>
-            <v-list class="w-100" dense color="transparent">
-              <v-subheader class="px-0" style="height: auto">
-                {{ $tc('components.campCreate.campCreateStep2.category') }}
-              </v-subheader>
-              <v-list-item
-                v-for="category in prototypePreview.categories().items"
-                :key="category._meta.self"
-                class="pt-0 pb-1 px-0 min-h-0"
+    <!--    <ValidationObserver v-slot="{ handleSubmit, valid, validate }">-->
+    <v-form ref="form" @submit.prevent="handleSubmit(() => $emit('create-camp'))">
+      <v-card-text>
+        <server-error :server-error="serverError" />
+        <e-select
+          v-model="localCamp.campPrototype"
+          :vee-rules="{ required: false, excluded: ['', false, true] }"
+          :skip-if-empty="false"
+          :name="$tc('entity.camp.prototype')"
+          :hint="prorotypeHint"
+          persistent-hint
+          :items="campTemplates"
+          :menu-props="{ offsetY: true }"
+        />
+        <div v-if="localCamp.campPrototype" class="px-2 rounded-lg dashborder">
+          <h3 class="mt-2 h3">
+            {{ $tc('components.campCreate.campCreateStep2.preview') }}
+          </h3>
+          <v-list class="w-100" dense color="transparent">
+            <v-subheader class="px-0" style="height: auto">
+              {{ $tc('components.campCreate.campCreateStep2.category') }}
+            </v-subheader>
+            <v-list-item
+              v-for="category in prototypePreview.categories().items"
+              :key="category._meta.self"
+              class="pt-0 pb-1 px-0 min-h-0"
+            >
+              <v-list-item-title class="d-flex gap-2 align-baseline">
+                <CategoryChip :category="category" class="mx-0 flex-shrink-0" dense />
+                <span class="font-weight-medium">{{ category.name }}</span>
+                <small class="blue-grey--text">{{
+                  category
+                    .preferredContentTypes()
+                    .items.map((item) =>
+                      $tc('contentNode.' + camelCase(item.name) + '.name')
+                    )
+                    .join(', ') || $tc('components.campCreate.campCreateStep2.noContent')
+                }}</small>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+          <v-list class="w-100" dense color="transparent">
+            <v-subheader class="px-0" style="height: auto">
+              {{ $tc('components.campCreate.campCreateStep2.progressStates') }}
+            </v-subheader>
+            <v-list-item
+              v-for="(progressLabel, idx) in prototypePreview.progressLabels().items"
+              :key="progressLabel._meta.self"
+              class="pt-1 pb-1 px-0 min-h-0"
+            >
+              <v-list-item-title class="d-flex gap-2 align-baseline">
+                <v-avatar color="rgba(0,0,0,0.12)" size="20">{{ idx + 1 }}</v-avatar>
+                {{ progressLabel.title }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </div>
+        <v-alert
+          v-if="localCamp.campPrototype === null"
+          color="#0661ab"
+          elevation="0"
+          text
+          icon="mdi-alert-circle-outline"
+        >
+          <strong>{{
+            $tc('components.campCreate.campCreateStep2.noPrototypeAlert.title')
+          }}</strong>
+          <br />
+          {{ $tc('components.campCreate.campCreateStep2.noPrototypeAlert.description') }}
+        </v-alert>
+      </v-card-text>
+      <v-divider />
+      <ContentActions>
+        <v-btn
+          text
+          color="secondary"
+          :disabled="isSaving"
+          @click="$emit('previous-step')"
+        >
+          <v-icon left>mdi-arrow-left</v-icon>
+          {{ $tc('global.button.back') }}
+        </v-btn>
+        <div class="ml-auto">
+          <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
+          <ButtonAdd v-if="valid" type="submit" :loading="isSaving">
+            {{ $tc('components.campCreate.campCreateStep2.create') }}
+          </ButtonAdd>
+          <v-tooltip v-else top>
+            <template #activator="{ attrs, on }">
+              <ButtonAdd
+                color="secondary"
+                elevation="0"
+                v-bind="attrs"
+                @click="validate()"
+                v-on="on"
               >
-                <v-list-item-title class="d-flex gap-2 align-baseline">
-                  <CategoryChip :category="category" class="mx-0 flex-shrink-0" dense />
-                  <span class="font-weight-medium">{{ category.name }}</span>
-                  <small class="blue-grey--text">{{
-                    category
-                      .preferredContentTypes()
-                      .items.map((item) =>
-                        $tc('contentNode.' + camelCase(item.name) + '.name')
-                      )
-                      .join(', ') ||
-                    $tc('components.campCreate.campCreateStep2.noContent')
-                  }}</small>
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-            <v-list class="w-100" dense color="transparent">
-              <v-subheader class="px-0" style="height: auto">
-                {{ $tc('components.campCreate.campCreateStep2.progressStates') }}
-              </v-subheader>
-              <v-list-item
-                v-for="(progressLabel, idx) in prototypePreview.progressLabels().items"
-                :key="progressLabel._meta.self"
-                class="pt-1 pb-1 px-0 min-h-0"
-              >
-                <v-list-item-title class="d-flex gap-2 align-baseline">
-                  <v-avatar color="rgba(0,0,0,0.12)" size="20">{{ idx + 1 }}</v-avatar>
-                  {{ progressLabel.title }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </div>
-          <v-alert
-            v-if="localCamp.campPrototype === null"
-            color="#0661ab"
-            elevation="0"
-            text
-            icon="mdi-alert-circle-outline"
-          >
-            <strong>{{
-              $tc('components.campCreate.campCreateStep2.noPrototypeAlert.title')
-            }}</strong>
-            <br />
-            {{
-              $tc('components.campCreate.campCreateStep2.noPrototypeAlert.description')
-            }}
-          </v-alert>
-        </v-card-text>
-        <v-divider />
-        <ContentActions>
-          <v-btn
-            text
-            color="secondary"
-            :disabled="isSaving"
-            @click="$emit('previous-step')"
-          >
-            <v-icon left>mdi-arrow-left</v-icon>
-            {{ $tc('global.button.back') }}
-          </v-btn>
-          <div class="ml-auto">
-            <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
-            <ButtonAdd v-if="valid" type="submit" :loading="isSaving">
-              {{ $tc('components.campCreate.campCreateStep2.create') }}
-            </ButtonAdd>
-            <v-tooltip v-else top>
-              <template #activator="{ attrs, on }">
-                <ButtonAdd
-                  color="secondary"
-                  elevation="0"
-                  v-bind="attrs"
-                  @click="validate()"
-                  v-on="on"
-                >
-                  {{ $tc('components.campCreate.campCreateStep2.create') }}
-                </ButtonAdd>
-              </template>
-              {{ $tc('components.campCreate.campCreateStep2.submitTooltipPrototype') }}
-            </v-tooltip>
-          </div>
-        </ContentActions>
-      </v-form>
-    </ValidationObserver>
+                {{ $tc('components.campCreate.campCreateStep2.create') }}
+              </ButtonAdd>
+            </template>
+            {{ $tc('components.campCreate.campCreateStep2.submitTooltipPrototype') }}
+          </v-tooltip>
+        </div>
+      </ContentActions>
+    </v-form>
+    <!--    </ValidationObserver>-->
   </v-stepper-content>
 </template>
 <script>
 import camelCase from 'lodash/camelCase.js'
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 import ButtonCancel from '@/components/buttons/ButtonCancel.vue'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
@@ -127,7 +124,7 @@ export default {
     CategoryChip,
     ContentActions,
     ServerError,
-    ValidationObserver,
+    // ValidationObserver,
   },
   props: {
     camp: { type: Object, required: true },
diff --git a/frontend/src/components/collaborator/CollaboratorForm.vue b/frontend/src/components/collaborator/CollaboratorForm.vue
index 17a83250dd..70bb7f90b9 100644
--- a/frontend/src/components/collaborator/CollaboratorForm.vue
+++ b/frontend/src/components/collaborator/CollaboratorForm.vue
@@ -35,10 +35,10 @@
               <span
                 >{{ item.role }} &middot;
                 <span class="grey--text"
-                  ><template v-for="icon in item.icons"
-                    ><v-icon :key="icon" x-small>{{ icon }}</v-icon
-                    >&thinsp;</template
-                  ></span
+                  ><v-icon v-for="icon in item.icons" :key="icon" x-small>{{
+                    icon
+                  }}</v-icon
+                  >&thinsp; ></span
                 >
               </span>
             </template>
@@ -66,10 +66,8 @@
           </v-list-item-content>
           <v-list-item-action-text class="text-right">
             <span
-              ><template v-for="icon in item.icons"
-                ><v-icon :key="icon" small>{{ icon }}</v-icon
-                >&thinsp;</template
-              ></span
+              ><v-icon v-for="icon in item.icons" :key="icon" small>{{ icon }}</v-icon
+              >&thinsp;</span
             >
           </v-list-item-action-text>
         </v-list-item>
@@ -78,10 +76,8 @@
         <span
           >{{ item.role }} &middot;
           <span class="grey--text"
-            ><template v-for="icon in item.icons"
-              ><v-icon :key="icon" x-small>{{ icon }}</v-icon
-              >&thinsp;</template
-            ></span
+            ><v-icon v-for="icon in item.icons" :key="icon" x-small>{{ icon }}</v-icon
+            >&thinsp;</span
           >
         </span>
       </template>
diff --git a/frontend/src/components/collaborator/CollaboratorListItem.vue b/frontend/src/components/collaborator/CollaboratorListItem.vue
index cb0b3877e3..caf948e019 100644
--- a/frontend/src/components/collaborator/CollaboratorListItem.vue
+++ b/frontend/src/components/collaborator/CollaboratorListItem.vue
@@ -13,13 +13,13 @@
             <button v-on="on">
               {{ $tc(roles[collaborator.role].roleTranslation)
               }}<span>
-                &middot;
-                <template v-for="icon in roles[collaborator.role].icons"
-                  ><v-icon :key="icon" x-small class="vertical-baseline">{{
-                    icon
-                  }}</v-icon
-                  >&thinsp;</template
-                ></span
+                &middot;<v-icon
+                  v-for="icon in roles[collaborator.role].icons"
+                  :key="icon"
+                  x-small
+                  class="vertical-baseline"
+                  >{{ icon }}</v-icon
+                >&thinsp;</span
               >
             </button>
           </template>
diff --git a/frontend/src/components/dialog/DialogBottomSheet.vue b/frontend/src/components/dialog/DialogBottomSheet.vue
index 00d7e008d5..3e1275d514 100644
--- a/frontend/src/components/dialog/DialogBottomSheet.vue
+++ b/frontend/src/components/dialog/DialogBottomSheet.vue
@@ -10,89 +10,92 @@
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
     </template>
-    <ValidationObserver v-if="value" ref="validation" v-slot="{ handleSubmit }">
-      <!-- ValidationObserver/handleSubmit ensures that doSubmit is only called if there are no validation errors -->
-      <v-form @submit.prevent="handleSubmit(doSubmit)">
-        <v-card rounded="b-0">
-          <v-toolbar dense elevation="0" class="ec-dialog-toolbar">
-            <v-icon left>
-              {{ icon }}
-            </v-icon>
-            <v-toolbar-title>
-              {{ title }}
-            </v-toolbar-title>
-            <v-btn
-              v-if="cancelAction != null"
-              icon
-              class="ml-auto"
-              :title="$tc('global.button.cancel')"
-              @click="doCancel"
-            >
-              <v-icon>mdi-close</v-icon>
-              <span class="d-sr-only">{{ $tc('global.button.cancel') }}</span>
-            </v-btn>
-          </v-toolbar>
-          <div class="pa-4">
-            <v-skeleton-loader v-if="loading" type="article" />
-            <slot v-else />
-          </div>
+    <!--    <ValidationObserver v-if="value" ref="validation" v-slot="{ handleSubmit }">-->
+    <!-- ValidationObserver/handleSubmit ensures that doSubmit is only called if there are no validation errors -->
+    <v-form @submit.prevent="handleSubmit(doSubmit)">
+      <v-card rounded="b-0">
+        <v-toolbar dense elevation="0" class="ec-dialog-toolbar">
+          <v-icon left>
+            {{ icon }}
+          </v-icon>
+          <v-toolbar-title>
+            {{ title }}
+          </v-toolbar-title>
+          <v-btn
+            v-if="cancelAction != null"
+            icon
+            class="ml-auto"
+            :title="$tc('global.button.cancel')"
+            @click="doCancel"
+          >
+            <v-icon>mdi-close</v-icon>
+            <span class="d-sr-only">{{ $tc('global.button.cancel') }}</span>
+          </v-btn>
+        </v-toolbar>
+        <div class="pa-4">
+          <v-skeleton-loader v-if="loading" type="article" />
+          <slot v-else />
+        </div>
 
-          <v-card-text class="py-0 error-area">
-            <!-- error message via slot -->
-            <v-alert v-if="$slots.error" text outlined color="warning" icon="mdi-alert">
-              <slot name="error" />
-            </v-alert>
+        <v-card-text class="py-0 error-area">
+          <!-- error message via slot -->
+          <v-alert v-if="$slots.error" text outlined color="warning" icon="mdi-alert">
+            <slot name="error" />
+          </v-alert>
 
-            <!-- error message via props -->
-            <server-error v-else :server-error="error" />
-          </v-card-text>
+          <!-- error message via props -->
+          <server-error v-else :server-error="error" />
+        </v-card-text>
 
-          <slot name="afterErrors" />
+        <slot name="afterErrors" />
 
-          <div class="d-flex flex-wrap justify-end">
-            <v-card-actions>
-              <slot name="moreActions" />
-            </v-card-actions>
+        <div class="d-flex flex-wrap justify-end">
+          <v-card-actions>
+            <slot name="moreActions" />
+          </v-card-actions>
+          <v-spacer />
+          <v-card-actions>
             <v-spacer />
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                v-if="cancelVisible && cancelAction != null"
-                :color="cancelColor"
-                text
-                :disabled="!cancelEnabled"
-                @click="doCancel"
-              >
-                {{ cancelLabel }}
-              </v-btn>
-              <v-btn
-                v-if="submitAction != null"
-                :color="submitColor"
-                type="submit"
-                :loading="currentlySaving"
-                :disabled="!submitEnabled"
-              >
-                <v-icon v-if="!!submitIcon" left>
-                  {{ submitIcon }}
-                </v-icon>
-                {{ submitLabel }}
-              </v-btn>
-              <slot name="actions" />
-            </v-card-actions>
-          </div>
-        </v-card>
-      </v-form>
-    </ValidationObserver>
+            <v-btn
+              v-if="cancelVisible && cancelAction != null"
+              :color="cancelColor"
+              text
+              :disabled="!cancelEnabled"
+              @click="doCancel"
+            >
+              {{ cancelLabel }}
+            </v-btn>
+            <v-btn
+              v-if="submitAction != null"
+              :color="submitColor"
+              type="submit"
+              :loading="currentlySaving"
+              :disabled="!submitEnabled"
+            >
+              <v-icon v-if="!!submitIcon" left>
+                {{ submitIcon }}
+              </v-icon>
+              {{ submitLabel }}
+            </v-btn>
+            <slot name="actions" />
+          </v-card-actions>
+        </div>
+      </v-card>
+    </v-form>
+    <!--    </ValidationObserver>-->
   </v-bottom-sheet>
 </template>
 <script>
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import ServerError from '@/components/form/ServerError.vue'
 import DialogUiBase from '@/components/dialog/DialogUiBase.vue'
 
 export default {
   name: 'DialogBottomSheet',
-  components: { ServerError, ValidationObserver },
+  components: {
+    ServerError,
+    // ValidationObserver
+  },
   extends: DialogUiBase,
   props: {
     icon: { type: String, default: '', required: false },
diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
index e353ccddb1..355eea188a 100644
--- a/frontend/src/components/dialog/DialogForm.vue
+++ b/frontend/src/components/dialog/DialogForm.vue
@@ -12,7 +12,7 @@
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
     </template>
-    <ValidationObserver v-if="value" ref="validation" v-slot="{ handleSubmit }">
+<!--    <ValidationObserver v-if="value" ref="validation" v-slot="{ handleSubmit }">-->
       <!-- ValidationObserver/handleSubmit ensures that doSubmit is only called if there are no validation errors -->
       <v-form @submit.prevent="handleSubmit(doSubmit)">
         <v-card>
@@ -77,18 +77,21 @@
           </v-card-actions>
         </v-card>
       </v-form>
-    </ValidationObserver>
+<!--    </ValidationObserver>-->
   </v-dialog>
 </template>
 
 <script>
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import ServerError from '@/components/form/ServerError.vue'
 import DialogUiBase from '@/components/dialog/DialogUiBase.vue'
 
 export default {
   name: 'DialogForm',
-  components: { ValidationObserver, ServerError },
+  components: {
+    // ValidationObserver,
+    ServerError
+  },
   extends: DialogUiBase,
   props: {
     icon: { type: String, default: '', required: false },
@@ -134,7 +137,7 @@ export default {
 </script>
 
 <style lang="scss">
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get($display-breakpoints, 'xs')} {
   .ec-dialog-form {
     .v-form,
     .v-form > .v-sheet {
diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
index f58f0e03db..5f16a5d5fa 100644
--- a/frontend/src/components/form/api/ApiWrapper.vue
+++ b/frontend/src/components/form/api/ApiWrapper.vue
@@ -3,40 +3,40 @@ Wrapper component for form components to save data back to API
 -->
 
 <template>
-  <ValidationObserver ref="validationObserver" v-slot="validationObserver" slim>
-    <v-form
-      :class="[{ 'api-wrapper--inline': !autoSave && !readonly && !separateButtons }]"
-      class="e-form-container"
-      @submit.prevent="onEnter"
-    >
-      <slot
-        :local-value="localValue"
-        :parsed-value="parsedLocalValue"
-        :has-server-error="hasServerError"
-        :has-loading-error="hasLoadingError"
-        :has-validation-error="validationObserver.invalid"
-        :error-messages="errorMessages"
-        :is-saving="isSaving"
-        :is-loading="isLoading"
-        :auto-save="autoSave"
-        :readonly="readonly || !hasFinishedLoading"
-        :status="status"
-        :dirty="dirty"
-        :on="eventHandlers"
-      />
-    </v-form>
-  </ValidationObserver>
+  <!--  <ValidationObserver ref="validationObserver" v-slot="validationObserver" slim>-->
+  <v-form
+    :class="[{ 'api-wrapper--inline': !autoSave && !readonly && !separateButtons }]"
+    class="e-form-container"
+    @submit.prevent="onEnter"
+  >
+    <slot
+      :local-value="localValue"
+      :parsed-value="parsedLocalValue"
+      :has-server-error="hasServerError"
+      :has-loading-error="hasLoadingError"
+      :has-validation-error="validationObserver.invalid"
+      :error-messages="errorMessages"
+      :is-saving="isSaving"
+      :is-loading="isLoading"
+      :auto-save="autoSave"
+      :readonly="readonly || !hasFinishedLoading"
+      :status="status"
+      :dirty="dirty"
+      :on="eventHandlers"
+    />
+  </v-form>
+  <!--  </ValidationObserver>-->
 </template>
 
 <script>
 import { debounce, set, get } from 'lodash'
 import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import { serverErrorToString } from '@/helpers/serverError.js'
 
 export default {
   name: 'ApiWrapper',
-  components: { ValidationObserver },
+  // components: { ValidationObserver },
   mixins: [apiPropsMixin],
   props: {
     separateButtons: {
diff --git a/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js b/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js
index 4910424445..1c5bb34b62 100644
--- a/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js
+++ b/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js
@@ -5,7 +5,7 @@ import flushPromises from 'flush-promises'
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import veeValidatePlugin from '@/plugins/veeValidate'
 import ApiWrapper from '../ApiWrapper.vue'
-import { VBtn, VForm } from 'vuetify/lib'
+import { VBtn, VForm } from 'vuetify/components'
 import { ValidationObserver } from 'vee-validate'
 
 const { cloneDeep } = await vi.importActual('lodash')
diff --git a/frontend/src/components/form/base/BaseComponent.vue b/frontend/src/components/form/base/BaseComponent.vue
index 9601fd9035..d81a84e5ee 100644
--- a/frontend/src/components/form/base/BaseComponent.vue
+++ b/frontend/src/components/form/base/BaseComponent.vue
@@ -29,7 +29,7 @@
 <script>
 import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
-import { VTextField } from 'vuetify/lib'
+import { VTextField } from 'vuetify/components'
 
 export default {
   name: 'BaseComponent',
diff --git a/frontend/src/components/form/base/ECheckbox.vue b/frontend/src/components/form/base/ECheckbox.vue
index 0e01327cd3..1e136c675f 100644
--- a/frontend/src/components/form/base/ECheckbox.vue
+++ b/frontend/src/components/form/base/ECheckbox.vue
@@ -1,41 +1,43 @@
 <template>
-  <ValidationProvider
-    v-slot="{ errors: veeErrors }"
-    :name="name"
-    :vid="veeId"
-    :rules="veeRules"
-    :required="required"
+  <!--  <ValidationProvider-->
+  <!--    v-slot="{ errors: veeErrors }"-->
+  <!--    :name="name"-->
+  <!--    :vid="veeId"-->
+  <!--    :rules="veeRules"-->
+  <!--    :required="required"-->
+  <!--  >-->
+  <v-checkbox
+    v-bind="$attrs"
+    :id="id"
+    :hide-details="hideDetails"
+    :error-messages="veeErrors.concat(errorMessages)"
+    :label="label || name"
+    :class="[inputClass]"
+    :input-value="value"
+    @change="$emit('input', $event)"
+    v-on="$listeners"
   >
-    <v-checkbox
-      v-bind="$attrs"
-      :id="id"
-      :hide-details="hideDetails"
-      :error-messages="veeErrors.concat(errorMessages)"
-      :label="label || name"
-      :class="[inputClass]"
-      :input-value="value"
-      @change="$emit('input', $event)"
-      v-on="$listeners"
-    >
-      <!-- passing through all slots -->
-      <template v-for="(_, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </v-checkbox>
-  </ValidationProvider>
+    <!-- passing through all slots -->
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-checkbox>
+  <!--  </ValidationProvider>-->
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
+// import { ValidationProvider } from 'vee-validate'
 
 export default {
   name: 'ECheckbox',
-  components: { ValidationProvider },
+  components: {
+    // ValidationProvider
+  },
   mixins: [formComponentPropsMixin, formComponentMixin],
   props: {
     value: { type: Boolean, required: false },
diff --git a/frontend/src/components/form/base/ERichtext.vue b/frontend/src/components/form/base/ERichtext.vue
index 626df1c907..2bb891e8ee 100644
--- a/frontend/src/components/form/base/ERichtext.vue
+++ b/frontend/src/components/form/base/ERichtext.vue
@@ -1,43 +1,46 @@
 <template>
-  <ValidationProvider
-    v-slot="{ errors: veeErrors }"
-    tag="div"
-    :name="name"
-    :vid="veeId"
-    :rules="veeRules"
-    :required="required"
-    class="e-form-container"
+  <!--  <ValidationProvider-->
+  <!--    v-slot="{ errors: veeErrors }"-->
+  <!--    tag="div"-->
+  <!--    :name="name"-->
+  <!--    :vid="veeId"-->
+  <!--    :rules="veeRules"-->
+  <!--    :required="required"-->
+  <!--    class="e-form-container"-->
+  <!--  >-->
+  <v-tiptap-editor
+    v-bind="$attrs"
+    :with-extensions="true"
+    :filled="filled"
+    :hide-details="hideDetails"
+    :error-messages="veeErrors.concat(errorMessages)"
+    :label="label || name"
+    :class="[inputClass]"
+    v-on="$listeners"
   >
-    <v-tiptap-editor
-      v-bind="$attrs"
-      :with-extensions="true"
-      :filled="filled"
-      :hide-details="hideDetails"
-      :error-messages="veeErrors.concat(errorMessages)"
-      :label="label || name"
-      :class="[inputClass]"
-      v-on="$listeners"
-    >
-      <!-- passing through all slots -->
-      <template v-for="(_, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </v-tiptap-editor>
-  </ValidationProvider>
+    <!-- passing through all slots -->
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-tiptap-editor>
+  <!--  </ValidationProvider>-->
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate'
+// import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import VTiptapEditor from '@/components/form/tiptap/VTiptapEditor.vue'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 
 export default {
   name: 'ERichtext',
-  components: { VTiptapEditor, ValidationProvider },
+  components: {
+    VTiptapEditor,
+    // ValidationProvider
+  },
   mixins: [formComponentPropsMixin, formComponentMixin],
 }
 </script>
diff --git a/frontend/src/components/form/base/ESelect.vue b/frontend/src/components/form/base/ESelect.vue
index 2165cfa178..14bbb43f8c 100644
--- a/frontend/src/components/form/base/ESelect.vue
+++ b/frontend/src/components/form/base/ESelect.vue
@@ -1,43 +1,45 @@
 <template>
-  <ValidationProvider
-    v-slot="{ errors: veeErrors }"
-    tag="div"
-    :name="name"
-    :vid="veeId"
-    :rules="veeRules"
-    :skip-if-empty="skipIfEmpty"
-    :required="required"
-    :immediate="immediateValidation"
-    class="e-form-container"
+  <!--  <ValidationProvider-->
+  <!--    v-slot="{ errors: veeErrors }"-->
+  <!--    tag="div"-->
+  <!--    :name="name"-->
+  <!--    :vid="veeId"-->
+  <!--    :rules="veeRules"-->
+  <!--    :skip-if-empty="skipIfEmpty"-->
+  <!--    :required="required"-->
+  <!--    :immediate="immediateValidation"-->
+  <!--    class="e-form-container"-->
+  <!--  >-->
+  <v-select
+    v-bind="$attrs"
+    :filled="filled"
+    :hide-details="hideDetails"
+    :error-messages="veeErrors.concat(errorMessages)"
+    :label="label || name"
+    :class="[inputClass]"
+    v-on="$listeners"
   >
-    <v-select
-      v-bind="$attrs"
-      :filled="filled"
-      :hide-details="hideDetails"
-      :error-messages="veeErrors.concat(errorMessages)"
-      :label="label || name"
-      :class="[inputClass]"
-      v-on="$listeners"
-    >
-      <!-- passing through all slots -->
-      <template v-for="(_, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </v-select>
-  </ValidationProvider>
+    <!-- passing through all slots -->
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-select>
+  <!--  </ValidationProvider>-->
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate'
+// import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 
 export default {
   name: 'ESelect',
-  components: { ValidationProvider },
+  components: {
+    // ValidationProvider
+  },
   mixins: [formComponentPropsMixin, formComponentMixin],
   props: {
     immediateValidation: { type: Boolean, default: false },
diff --git a/frontend/src/components/form/base/ESwitch.vue b/frontend/src/components/form/base/ESwitch.vue
index e7abdf691a..34bafd108d 100644
--- a/frontend/src/components/form/base/ESwitch.vue
+++ b/frontend/src/components/form/base/ESwitch.vue
@@ -1,41 +1,43 @@
 <template>
-  <ValidationProvider
-    v-slot="{ errors: veeErrors }"
-    :name="name"
-    :vid="veeId"
-    :rules="veeRules"
-    :required="required"
+  <!--  <ValidationProvider-->
+  <!--    v-slot="{ errors: veeErrors }"-->
+  <!--    :name="name"-->
+  <!--    :vid="veeId"-->
+  <!--    :rules="veeRules"-->
+  <!--    :required="required"-->
+  <!--  >-->
+  <v-switch
+    inset
+    v-bind="$attrs"
+    :hide-details="hideDetails"
+    :error-messages="veeErrors.concat(errorMessages)"
+    :label="label || name"
+    :class="[inputClass]"
+    :input-value="value"
+    @change="$emit('input', $event)"
+    v-on="$listeners"
   >
-    <v-switch
-      inset
-      v-bind="$attrs"
-      :hide-details="hideDetails"
-      :error-messages="veeErrors.concat(errorMessages)"
-      :label="label || name"
-      :class="[inputClass]"
-      :input-value="value"
-      @change="$emit('input', $event)"
-      v-on="$listeners"
-    >
-      <!-- passing through all slots -->
-      <template v-for="(_, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </v-switch>
-  </ValidationProvider>
+    <!-- passing through all slots -->
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-switch>
+  <!--  </ValidationProvider>-->
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate'
+// import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 
 export default {
   name: 'ESwitch',
-  components: { ValidationProvider },
+  components: {
+    // ValidationProvider
+  },
   mixins: [formComponentPropsMixin, formComponentMixin],
   props: {
     value: { type: Boolean, required: false },
diff --git a/frontend/src/components/form/base/ETextField.vue b/frontend/src/components/form/base/ETextField.vue
index 22413e6ee9..bb4402dae3 100644
--- a/frontend/src/components/form/base/ETextField.vue
+++ b/frontend/src/components/form/base/ETextField.vue
@@ -1,14 +1,14 @@
 <template>
-  <ValidationProvider
-    v-slot="{ errors: veeErrors }"
-    ref="validationProvider"
-    tag="div"
-    :name="name"
-    :vid="veeId"
-    :rules="veeRules"
-    :required="required"
-    class="e-form-container"
-  >
+<!--  <ValidationProvider-->
+<!--    v-slot="{ errors: veeErrors }"-->
+<!--    ref="validationProvider"-->
+<!--    tag="div"-->
+<!--    :name="name"-->
+<!--    :vid="veeId"-->
+<!--    :rules="veeRules"-->
+<!--    :required="required"-->
+<!--    class="e-form-container"-->
+<!--  >-->
     <v-text-field
       ref="textField"
       v-bind="$attrs"
@@ -29,17 +29,19 @@
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-text-field>
-  </ValidationProvider>
+<!--  </ValidationProvider>-->
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate'
+// import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 
 export default {
   name: 'ETextField',
-  components: { ValidationProvider },
+  components: {
+    // ValidationProvider
+  },
   mixins: [formComponentPropsMixin, formComponentMixin],
   props: {
     type: {
diff --git a/frontend/src/components/form/base/ETextarea.vue b/frontend/src/components/form/base/ETextarea.vue
index fa5282e173..bf41185767 100644
--- a/frontend/src/components/form/base/ETextarea.vue
+++ b/frontend/src/components/form/base/ETextarea.vue
@@ -1,13 +1,13 @@
 <template>
-  <ValidationProvider
-    v-slot="{ errors: veeErrors }"
-    tag="div"
-    :name="name"
-    :vid="veeId"
-    :rules="veeRules"
-    :required="required"
-    class="e-form-container"
-  >
+<!--  <ValidationProvider-->
+<!--    v-slot="{ errors: veeErrors }"-->
+<!--    tag="div"-->
+<!--    :name="name"-->
+<!--    :vid="veeId"-->
+<!--    :rules="veeRules"-->
+<!--    :required="required"-->
+<!--    class="e-form-container"-->
+<!--  >-->
     <v-tiptap-editor
       v-bind="$attrs"
       :with-extensions="false"
@@ -26,18 +26,21 @@
         <slot :name="name" v-bind="slotData" />
       </template>
     </v-tiptap-editor>
-  </ValidationProvider>
+<!--  </ValidationProvider>-->
 </template>
 
 <script>
-import { ValidationProvider } from 'vee-validate'
+// import { ValidationProvider } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import VTiptapEditor from '@/components/form/tiptap/VTiptapEditor.vue'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 
 export default {
   name: 'ETextarea',
-  components: { VTiptapEditor, ValidationProvider },
+  components: {
+    VTiptapEditor,
+    // ValidationProvider
+  },
   mixins: [formComponentPropsMixin, formComponentMixin],
 }
 </script>
diff --git a/frontend/src/components/form/tiptap/TiptapEditor.vue b/frontend/src/components/form/tiptap/TiptapEditor.vue
index bba40b0266..9ea1bb06dc 100644
--- a/frontend/src/components/form/tiptap/TiptapEditor.vue
+++ b/frontend/src/components/form/tiptap/TiptapEditor.vue
@@ -106,7 +106,7 @@
   </div>
 </template>
 <script>
-import { BubbleMenu, Editor, EditorContent } from '@tiptap/vue-2'
+import { BubbleMenu, Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
diff --git a/frontend/src/components/form/tiptap/VTiptapEditor.vue b/frontend/src/components/form/tiptap/VTiptapEditor.vue
index a831997d77..7fd712c2bb 100644
--- a/frontend/src/components/form/tiptap/VTiptapEditor.vue
+++ b/frontend/src/components/form/tiptap/VTiptapEditor.vue
@@ -1,5 +1,5 @@
 <script>
-import { VTextField } from 'vuetify/lib'
+import { VTextField } from 'vuetify/components'
 import TiptapEditor from './TiptapEditor.vue'
 
 export default {
diff --git a/frontend/src/components/layout/ContentCard.vue b/frontend/src/components/layout/ContentCard.vue
index 1c3214bf7c..cc24916e30 100644
--- a/frontend/src/components/layout/ContentCard.vue
+++ b/frontend/src/components/layout/ContentCard.vue
@@ -61,7 +61,7 @@ export default {
 
 <style scoped lang="scss">
 .ec-content-card__toolbar {
-  @media #{map-get($display-breakpoints, 'xs-only')} {
+  @media #{map-get($display-breakpoints, 'xs')} {
     position: sticky;
     top: 0;
     z-index: 5;
diff --git a/frontend/src/components/material/MaterialCreateItem.vue b/frontend/src/components/material/MaterialCreateItem.vue
index 2307d11f2c..26c35a5e80 100644
--- a/frontend/src/components/material/MaterialCreateItem.vue
+++ b/frontend/src/components/material/MaterialCreateItem.vue
@@ -1,12 +1,13 @@
 <template>
-  <ValidationObserver
-    v-if="materialLists.length > 0"
-    ref="validation"
-    tag="tr"
-    class="newItemRow"
-    @keyup.enter="submitForm"
-  >
-    <td class="pt-1">
+  <!--  <ValidationObserver-->
+  <!--    v-if="materialLists.length > 0"-->
+  <!--    ref="validation"-->
+  <!--    tag="tr"-->
+  <!--    class="newItemRow"-->
+  <!--    @keyup.enter="submitForm"-->
+  <!--  >-->
+  <tr v-if="materialLists.length > 0" class="pt-1">
+    <td>
       <e-text-field
         ref="quantity"
         v-model.number="materialItem.quantity"
@@ -48,8 +49,8 @@
     <td class="pt-1">
       <button-add height="52" hide-label @click="submitForm" />
     </td>
-  </ValidationObserver>
-
+  </tr>
+  <!--  </ValidationObserver>-->
   <tr v-else>
     <td :colspan="columns">
       <div>
@@ -67,12 +68,15 @@
 
 <script>
 import { campRoute } from '@/router.js'
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 
 export default {
   name: 'MaterialCreateItem',
-  components: { ValidationObserver, ButtonAdd },
+  components: {
+    // ValidationObserver,
+    ButtonAdd,
+  },
   props: {
     camp: { type: Object, required: true },
 
diff --git a/frontend/src/components/material/useMaterialViewHelper.js b/frontend/src/components/material/useMaterialViewHelper.js
index aea99c8d74..f39abccd8c 100644
--- a/frontend/src/components/material/useMaterialViewHelper.js
+++ b/frontend/src/components/material/useMaterialViewHelper.js
@@ -1,5 +1,5 @@
 import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router/composables'
+import { useRoute } from 'vue-router'
 import * as XLSX from 'xlsx'
 import { slugify } from '@/plugins/slugify.js'
 import i18n from '@/plugins/i18n/index.js'
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 123bc54e3c..8d04a5258c 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -31,9 +31,7 @@ Listing all given activity schedule entries in a calendar view.
       :event-ripple="false"
       v-on="vCalendarListeners"
       @mouseleave.native="onMouseleave"
-      @mousedown.native.prevent="
-        /*this prevents from middle button to start scroll behavior*/
-      "
+      @mousedown.native.prevent="preventMiddleButtonFromStartingScrollBehaviour"
     >
       <!-- day header -->
       <template #day-label-header="{ date }">
@@ -255,6 +253,8 @@ export default {
       loadCalenderEventsFromScheduleEntries()
     }
 
+    function preventMiddleButtonFromStartingScrollBehaviour() {}
+
     return {
       vCalendarListeners,
       startResize: dragAndDropResize.startResize,
@@ -263,6 +263,7 @@ export default {
       reloadScheduleEntries,
       loadCalenderEventsFromScheduleEntries,
       events,
+      preventMiddleButtonFromStartingScrollBehaviour,
     }
   },
   data() {
@@ -350,7 +351,7 @@ export default {
   border: none;
   overflow: auto;
 
-  @media #{map-get($display-breakpoints, 'xs-only')} {
+  @media #{map-get($display-breakpoints, 'xs')} {
     position: fixed;
     height: inherit;
     top: 48px;
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 073ffd936d..244f7da782 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -19,7 +19,7 @@ import * as Sentry from '@sentry/vue'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 
-import { Resize } from 'vuetify/lib/directives'
+import { Resize } from 'vuetify/directives'
 import ResizeObserver from 'v-resize-observer'
 
 const env = getEnv()
diff --git a/frontend/src/plugins/i18n/index.js b/frontend/src/plugins/i18n/index.js
index a6b8a7a11a..5b6fbba6aa 100644
--- a/frontend/src/plugins/i18n/index.js
+++ b/frontend/src/plugins/i18n/index.js
@@ -1,5 +1,5 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import Vue from '@vue/compat'
+import { createI18n } from 'vue-i18n'
 import deepmerge from 'deepmerge'
 
 import itCommon from '@/common/locales/it.json'
@@ -24,24 +24,22 @@ import deCHScout from '@/locales/de-CH-scout.json'
 import rm from '@/locales/rm.json'
 import rmCHScout from '@/locales/rm-CH-scout.json'
 
-import validationIt from 'vee-validate/dist/locale/it.json'
-import validationFr from 'vee-validate/dist/locale/fr.json'
-import validationEn from 'vee-validate/dist/locale/en.json'
-import validationDe from 'vee-validate/dist/locale/de.json'
+import validationIt from '@vee-validate/i18n/dist/locale/it.json'
+import validationFr from '@vee-validate/i18n/dist/locale/fr.json'
+import validationEn from '@vee-validate/i18n/dist/locale/en.json'
+import validationDe from '@vee-validate/i18n/dist/locale/de.json'
 
 import vuetifyEn from 'vuetify/lib/locale/en'
 import vuetifyDe from 'vuetify/lib/locale/de'
 import vuetifyFr from 'vuetify/lib/locale/fr'
 import vuetifyIt from 'vuetify/lib/locale/it'
 
-Vue.use(VueI18n)
-
 const fallbackLocales = {
   rm: ['de'],
   default: 'en',
 }
 
-const i18n = new VueI18n({
+const i18n = createI18n({
   locale: 'de',
   fallbackLocale: fallbackLocales,
   messages: deepmerge.all([
@@ -108,6 +106,8 @@ const i18n = new VueI18n({
   silentTranslationWarn: true,
 })
 
+Vue.use(i18n)
+
 Object.defineProperty(i18n, 'browserPreferredLocale', {
   get: function () {
     const languages = navigator.languages || [navigator.language]
diff --git a/frontend/src/plugins/store/lang.js b/frontend/src/plugins/store/lang.js
index c7f8a5cde8..c4849e95e6 100644
--- a/frontend/src/plugins/store/lang.js
+++ b/frontend/src/plugins/store/lang.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import axios from 'axios'
 import VueI18n from '@/plugins/i18n'
-import { localeChanged } from 'vee-validate'
 import { dayjsLocaleMap } from '@/common/helpers/dayjs.js'
 
 const LANG_KEY = 'language'
@@ -26,7 +25,7 @@ export const mutations = {
     Vue.dayjs.locale(
       Object.keys(dayjsLocaleMap).includes(lang) ? dayjsLocaleMap[lang] : lang
     )
-    localeChanged()
+    this.$validator.localize(lang)
     axios.defaults.headers.common['Accept-Language'] = lang
     document.querySelector('html').setAttribute('lang', lang)
     window.localStorage.setItem(LANG_KEY, lang)
diff --git a/frontend/src/plugins/veeValidate.js b/frontend/src/plugins/veeValidate.js
index 3741b2d721..e7f45936be 100644
--- a/frontend/src/plugins/veeValidate.js
+++ b/frontend/src/plugins/veeValidate.js
@@ -1,14 +1,14 @@
-import { extend, configure, setInteractionMode } from 'vee-validate'
-import * as rules from 'vee-validate/dist/rules'
+import { configure } from 'vee-validate'
+import * as rules from '@vee-validate/rules'
 import i18n from '@/plugins/i18n'
-import greaterThan_time from './veeValidate/greaterThan_time.js'
-import greaterThanOrEqual_date from './veeValidate/greaterThanOrEqual_date.js'
-import lessThanOrEqual_date from './veeValidate/lessThanOrEqual_date.js'
+// import greaterThan_time from './veeValidate/greaterThan_time.js'
+// import greaterThanOrEqual_date from './veeValidate/greaterThanOrEqual_date.js'
+// import lessThanOrEqual_date from './veeValidate/lessThanOrEqual_date.js'
 
 class VeeValidatePlugin {
   install(Vue) {
     // Eager = Lazy at the beginning, Agressive once the field is invalid (https://vee-validate.logaretm.com/v3/guide/interaction-and-ux.html#interaction-modes)
-    setInteractionMode('eager')
+    // setInteractionMode('eager')
 
     // translate default error messages
     configure({
@@ -20,22 +20,22 @@ class VeeValidatePlugin {
 
     // install all default rules
     Object.keys(rules).forEach((rule) => {
-      extend(rule, {
-        ...rules[rule], // copies rule configuration
-      })
+      // extend(rule, {
+      //   ...rules[rule], // copies rule configuration
+      // })
     })
 
     /**
      * define custom rules
      */
 
-    extend('greaterThan_time', greaterThan_time(Vue.dayjs, i18n))
-
-    // check if date (value) is equal or larger than another date (min)
-    extend('greaterThanOrEqual_date', greaterThanOrEqual_date(Vue.dayjs, i18n))
-
-    // check if date (value) is equal or less than another date (max)
-    extend('lessThanOrEqual_date', lessThanOrEqual_date(Vue.dayjs, i18n))
+    // extend('greaterThan_time', greaterThan_time(Vue.dayjs, i18n))
+    //
+    // // check if date (value) is equal or larger than another date (min)
+    // extend('greaterThanOrEqual_date', greaterThanOrEqual_date(Vue.dayjs, i18n))
+    //
+    // // check if date (value) is equal or less than another date (max)
+    // extend('lessThanOrEqual_date', lessThanOrEqual_date(Vue.dayjs, i18n))
   }
 }
 
diff --git a/frontend/src/router.js b/frontend/src/router.js
index bde2be6e64..954aa9649a 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -1,19 +1,18 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import { slugify } from '@/plugins/slugify.js'
 import { isLoggedIn } from '@/plugins/auth'
 import { apiStore } from '@/plugins/store'
 import { getEnv } from '@/environment.js'
 
-Vue.use(Router)
-
 const NavigationDefault = () => import('./views/NavigationDefault.vue')
 const NavigationCamp = () => import('./views/camp/navigation/NavigationCamp.vue')
 const GenericPage = () => import('./components/generic/GenericPage.vue')
 
 /* istanbul ignore next */
-export default new Router({
+const router = createRouter({
   mode: 'history',
+  history: createWebHashHistory(),
   base: '/',
   routes: [
     ...(getEnv().FEATURE_DEVELOPER
@@ -383,7 +382,7 @@ export default new Router({
       redirect: { name: 'camps' },
     },
     {
-      path: '**',
+      path: '/**',
       name: 'PageNotFound',
       components: {
         navigation: NavigationDefault,
@@ -393,6 +392,10 @@ export default new Router({
   ],
 })
 
+Vue.use(router)
+
+export default router
+
 function evaluateGuards(guards, to, from, next) {
   const guardsLeft = guards.slice(0)
   const nextGuard = guardsLeft.shift()
diff --git a/frontend/src/views/auth/LoginCallback.vue b/frontend/src/views/auth/LoginCallback.vue
index 01361020d5..3e05eb03ff 100644
--- a/frontend/src/views/auth/LoginCallback.vue
+++ b/frontend/src/views/auth/LoginCallback.vue
@@ -4,7 +4,7 @@
       <v-row align="center" justify="center">
         <v-card>
           <v-card-text>
-            <h3>{{$tc('views.auth.loginCallback.loginInProgress')</h3>
+            <h3>{{ $tc('views.auth.loginCallback.loginInProgress') }}</h3>
           </v-card-text>
         </v-card>
       </v-row>
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index c67aa43f42..8131c54717 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -1,7 +1,7 @@
 <template>
   <auth-container>
     <h1 class="display-1 text-center">{{ $tc('views.auth.register.title') }}</h1>
-    <validation-observer v-slot="{ handleSubmit }">
+<!--    <validation-observer v-slot="{ handleSubmit }">-->
       <v-form @submit.prevent="handleSubmit(register)">
         <e-text-field
           v-model="firstname"
@@ -123,7 +123,7 @@
           <icon-spacer />
         </v-btn>
       </v-form>
-    </validation-observer>
+<!--    </validation-observer>-->
 
     <p class="mt-8 mb-0 text--secondary text-center">
       {{ $tc('views.auth.register.alreadyHaveAnAccount') }}<br />
@@ -139,7 +139,7 @@ import { load } from 'recaptcha-v3'
 import AuthContainer from '@/components/layout/AuthContainer.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import VueI18n from '@/plugins/i18n'
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import { passwordStrengthMixin } from '../../mixins/passwordStrengthMixin.js'
 import { parseTemplate } from 'url-template'
 import { getEnv } from '@/environment.js'
@@ -148,7 +148,7 @@ export default {
   name: 'Register',
   components: {
     AuthContainer,
-    ValidationObserver,
+    // ValidationObserver,
   },
   mixins: [passwordStrengthMixin],
   data() {
diff --git a/frontend/src/views/auth/ResetPassword.vue b/frontend/src/views/auth/ResetPassword.vue
index 469c1a5efb..3c28fbc64e 100644
--- a/frontend/src/views/auth/ResetPassword.vue
+++ b/frontend/src/views/auth/ResetPassword.vue
@@ -20,81 +20,81 @@
       {{ $tc('views.auth.resetPassword.errorMessage') }}
     </v-alert>
 
-    <validation-observer v-slot="{ handleSubmit }">
-      <v-form
-        v-if="status == 'loaded' || status == 'reseting'"
-        @submit.prevent="handleSubmit(resetPassword)"
+    <!--    <validation-observer v-slot="{ handleSubmit }">-->
+    <v-form
+      v-if="status == 'loaded' || status == 'reseting'"
+      @submit.prevent="handleSubmit(resetPassword)"
+    >
+      <e-text-field
+        :value="email"
+        :label="$tc('entity.user.fields.email')"
+        name="email"
+        append-icon="mdi-at"
+        :dense="$vuetify.breakpoint.xsOnly"
+        type="email"
+        autocomplete="username"
+        readonly
+      />
+
+      <e-text-field
+        v-model="password"
+        :name="$tc('views.auth.resetPassword.password')"
+        vee-id="password"
+        vee-rules="required|min:12|max:128"
+        validate-on-blur
+        append-icon="mdi-lock-outline"
+        :dense="$vuetify.breakpoint.xsOnly"
+        type="password"
+        autocomplete="new-password"
+        minlength="12"
+        maxlength="128"
+        passwordrules="minlength: 12; maxlength: 128;"
+        loading
+        autofocus
+        @input="debouncedPasswordStrengthCheck"
       >
-        <e-text-field
-          :value="email"
-          :label="$tc('entity.user.fields.email')"
-          name="email"
-          append-icon="mdi-at"
-          :dense="$vuetify.breakpoint.xsOnly"
-          type="email"
-          autocomplete="username"
-          readonly
-        />
-
-        <e-text-field
-          v-model="password"
-          :name="$tc('views.auth.resetPassword.password')"
-          vee-id="password"
-          vee-rules="required|min:12|max:128"
-          validate-on-blur
-          append-icon="mdi-lock-outline"
-          :dense="$vuetify.breakpoint.xsOnly"
-          type="password"
-          autocomplete="new-password"
-          minlength="12"
-          maxlength="128"
-          passwordrules="minlength: 12; maxlength: 128;"
-          loading
-          autofocus
-          @input="debouncedPasswordStrengthCheck"
-        >
-          <template #progress>
-            <v-progress-linear
-              :value="passwordStrength"
-              :color="passwordStrengthColor"
-              absolute
-              height="5"
-            />
-          </template>
-        </e-text-field>
-
-        <e-text-field
-          v-model="confirmation"
-          :name="$tc('views.auth.resetPassword.passwordConfirmation')"
-          vee-rules="required|confirmed:password"
-          validate-on-blur
-          :dense="$vuetify.breakpoint.xsOnly"
-          append-icon="mdi-lock-outline"
-          type="password"
-          autocomplete="new-password"
-          minlength="12"
-          maxlength="128"
-          passwordrules="minlength: 12; maxlength: 128;"
-        />
-
-        <v-btn
-          type="submit"
-          block
-          :color="email ? 'blue darken-2' : 'blue lightne-4'"
-          :disabled="!email"
-          outlined
-          :x-large="$vuetify.breakpoint.smAndUp"
-          class="my-4"
-        >
-          <v-progress-circular v-if="status == 'reseting'" indeterminate size="24" />
-          <v-icon v-else>$vuetify.icons.ecamp</v-icon>
-          <v-spacer />
-          <span>{{ $tc('views.auth.resetPassword.send') }}</span>
-          <v-spacer />
-          <icon-spacer />
-        </v-btn>
-      </v-form>
-    </validation-observer>
+        <template #progress>
+          <v-progress-linear
+            :value="passwordStrength"
+            :color="passwordStrengthColor"
+            absolute
+            height="5"
+          />
+        </template>
+      </e-text-field>
+
+      <e-text-field
+        v-model="confirmation"
+        :name="$tc('views.auth.resetPassword.passwordConfirmation')"
+        vee-rules="required|confirmed:password"
+        validate-on-blur
+        :dense="$vuetify.breakpoint.xsOnly"
+        append-icon="mdi-lock-outline"
+        type="password"
+        autocomplete="new-password"
+        minlength="12"
+        maxlength="128"
+        passwordrules="minlength: 12; maxlength: 128;"
+      />
+
+      <v-btn
+        type="submit"
+        block
+        :color="email ? 'blue darken-2' : 'blue lightne-4'"
+        :disabled="!email"
+        outlined
+        :x-large="$vuetify.breakpoint.smAndUp"
+        class="my-4"
+      >
+        <v-progress-circular v-if="status == 'reseting'" indeterminate size="24" />
+        <v-icon v-else>$vuetify.icons.ecamp</v-icon>
+        <v-spacer />
+        <span>{{ $tc('views.auth.resetPassword.send') }}</span>
+        <v-spacer />
+        <icon-spacer />
+      </v-btn>
+    </v-form>
+    <!--    </validation-observer>-->
     <p class="mt-8 mb0 text--secondary text-center">
       <router-link :to="{ name: 'login' }">
         {{ $tc('global.button.login') }}
@@ -105,13 +105,15 @@
 
 <script>
 import { load } from 'recaptcha-v3'
-import { ValidationObserver } from 'vee-validate'
+// import { ValidationObserver } from 'vee-validate'
 import { passwordStrengthMixin } from '../../mixins/passwordStrengthMixin.js'
 import { getEnv } from '@/environment'
 
 export default {
   name: 'ResetPassword',
-  components: { ValidationObserver },
+  components: {
+    // ValidationObserver
+  },
   mixins: [passwordStrengthMixin],
   props: {
     id: { type: String, required: true },
diff --git a/frontend/src/views/camp/Invitation.vue b/frontend/src/views/camp/Invitation.vue
index e471f222da..7b56a60cd6 100644
--- a/frontend/src/views/camp/Invitation.vue
+++ b/frontend/src/views/camp/Invitation.vue
@@ -95,14 +95,12 @@
 
 <script>
 import { loginRoute } from '@/router'
-import VueRouter from 'vue-router'
+import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import ButtonBack from '@/components/buttons/ButtonBack.vue'
 import UserMeta from '@/components/navigation/UserMeta.vue'
-
-const { isNavigationFailure, NavigationFailureType } = VueRouter
 const ignoreNavigationFailure = (e) => {
-  if (!isNavigationFailure(e, NavigationFailureType.redirected)) {
+  if (!isNavigationFailure(e, NavigationFailureType.duplicated)) {
     return Promise.reject(e)
   }
 }
@@ -332,7 +330,7 @@ export default {
   order: -1;
 }
 
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get($display-breakpoints, 'xs')} {
   .wood {
     font-size: 22px;
   }
@@ -399,7 +397,7 @@ export default {
   right: min(5%, 42px);
 }
 
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get($display-breakpoints, 'xs')} {
   .rope,
   .rope::before,
   .rope::after {
diff --git a/frontend/src/views/dev/Controls.vue b/frontend/src/views/dev/Controls.vue
index 6dd0c356a0..8c6ae35e34 100644
--- a/frontend/src/views/dev/Controls.vue
+++ b/frontend/src/views/dev/Controls.vue
@@ -86,7 +86,7 @@ import ApiDatePicker from '@/components/form/api/ApiDatePicker.vue'
 import ApiTimePicker from '@/components/form/api/ApiTimePicker.vue'
 import ApiColorPicker from '@/components/form/api/ApiColorPicker.vue'
 import VueI18n from '@/plugins/i18n'
-import { VTextField, VTextarea, VCheckbox, VSwitch, VSelect } from 'vuetify/lib'
+import { VTextField, VTextarea, VCheckbox, VSwitch, VSelect } from 'vuetify/components'
 
 export default {
   name: 'Controls',
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index b6f790c243..c097b1750b 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,12 +1,13 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue2'
-import { createSvgPlugin } from 'vite-plugin-vue2-svg'
+import vue from '@vitejs/plugin-vue'
+// import { svg4VuePlugin } from 'vite-plugin-svg4vue'
 import { comlink } from 'vite-plugin-comlink'
 import * as path from 'path'
-import { VuetifyResolver } from 'unplugin-vue-components/resolvers'
+// import { VuetifyResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { configDefaults } from 'vitest/config'
+import vuetify from 'vite-plugin-vuetify'
 
 const plugins = [
   comlink(), // must be first
@@ -21,11 +22,16 @@ const plugins = [
   }),
   Components({
     resolvers: [
-      // Vuetify
-      VuetifyResolver(),
+      // // Vuetify
+      // VuetifyResolver(),
     ],
   }),
-  createSvgPlugin(),
+  vuetify({
+    autoImport: {
+      labs: true,
+    },
+  }),
+  // svg4VuePlugin(),
 ]
 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN
 if (sentryAuthToken) {
@@ -107,13 +113,16 @@ export default defineConfig(({ mode }) => ({
       'vue',
       'vuedraggable',
       'vue-toastification',
-      'vuetify/es5/components/VCalendar/modes/column.js',
-      'vuetify/es5/components/VCalendar/util/events.js',
+      // 'vuetify/es5/components/VCalendar/modes/column.js',
+      // 'vuetify/es5/components/VCalendar/util/events.js',
     ],
   },
   build: {
     sourcemap: true,
     minify: mode === 'development' ? false : 'esbuild',
+    rollupOptions: {
+      external: ['vuetify/lib'],
+    },
   },
   resolve: {
     alias: [
@@ -143,7 +152,8 @@ export default defineConfig(({ mode }) => ({
         replacement: path.resolve(__dirname, 'node_modules', 'dayjs'),
       },
       {
-        vue: '@vue/compat',
+        find: 'vue',
+        replacement: '@vue/compat',
       },
     ],
     preserveSymlinks: true,
@@ -151,7 +161,13 @@ export default defineConfig(({ mode }) => ({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: '@import "./node_modules/vuetify/src/styles/styles.sass";\n', // original default variables from vuetify
+        additionalData: `
+        // original default variables from vuetify
+        @import "./node_modules/vuetify/lib/styles/settings/_variables.scss";
+        @import "./node_modules/vuetify/lib/styles/settings/_colors.scss";
+        @import "./node_modules/vuetify/dist/_component-variables.sass";
+        @import "./node_modules/vuetify/dist/_component-variables-labs.sass";
+        `,
       },
       sass: {
         additionalData: '@import "./src/scss/variables.scss"\n', // vuetify variable overrides

From 83b72299218652bff154a480ab627f841a06f9d0 Mon Sep 17 00:00:00 2001
From: BacLuc <lucius.bachmann@gmx.ch>
Date: Sun, 31 Dec 2023 18:21:30 +0100
Subject: [PATCH 04/21] tmp

---
 frontend/src/plugins/vuetify.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index dd478928da..7a5d8d83e2 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -1,7 +1,7 @@
 // You still need to register Vuetify itself
 // src/plugins/vuetify.js
 
-import Vuetify from 'vuetify/lib'
+import { createVuetify } from 'vuetify'
 import PbsLogo from '@/assets/PbsLogo.svg'
 import GoogleLogo from '@/assets/GoogleLogo.svg'
 import eCampLogo from '@/assets/eCampLogo.svg'
@@ -13,12 +13,10 @@ import BigScreen from '@/assets/icons/BigScreen.svg'
 import ResponsiveLayout from '@/assets/icons/ResponsiveLayout.svg'
 import ColumnLayout from '@/assets/icons/ColumnLayout.svg'
 import i18n from '@/plugins/i18n'
-import colors from 'vuetify/lib/util/colors'
+import * as colors from 'vuetify/util/colors'
 
 class VuetifyLoaderPlugin {
   install(Vue) {
-    Vue.use(Vuetify)
-
     const opts = {
       lang: {
         t: (key, ...params) => i18n.tc(key, 0, params),
@@ -46,7 +44,7 @@ class VuetifyLoaderPlugin {
       },
     }
 
-    vuetify = new Vuetify(opts)
+    vuetify = new createVuetify(opts)
   }
 }
 

From 6e4bb5717aaea405ebf2f5aea9e1d966b2fc7ee2 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 17:44:05 +0100
Subject: [PATCH 05/21] fix deprecated filters & v-bind order

---
 frontend/src/components/user/UserAvatar.vue   |  2 +-
 frontend/src/main.js                          |  2 --
 frontend/src/plugins/filterLoading.js         | 20 -------------------
 frontend/src/plugins/index.js                 |  1 -
 .../camp/navigation/desktop/NavTopbar.vue     |  5 +----
 5 files changed, 2 insertions(+), 28 deletions(-)
 delete mode 100644 frontend/src/plugins/filterLoading.js

diff --git a/frontend/src/components/user/UserAvatar.vue b/frontend/src/components/user/UserAvatar.vue
index 3e4f6f1829..25a87b6148 100644
--- a/frontend/src/components/user/UserAvatar.vue
+++ b/frontend/src/components/user/UserAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :size="size" :color="color" :title="displayName" v-bind="$attrs">
+  <v-avatar v-bind="$attrs" :size="size" :color="color" :title="displayName">
     <span :aria-hidden="shortAria ? null : 'true'" :style="style">{{ initials }}</span>
     <span v-if="shortAria" class="d-sr-only">{{ displayName }}</span>
   </v-avatar>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 244f7da782..59940e61ea 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,7 +5,6 @@ import {
   vuetifyLoader,
   auth,
   storeLoader,
-  filterLoading,
   formBaseComponents,
   ignoreNativeBindingWarnMessages,
   i18n,
@@ -35,7 +34,6 @@ if (env && env.SENTRY_FRONTEND_DSN) {
 }
 
 Vue.use(auth)
-Vue.use(filterLoading)
 Vue.use(formBaseComponents)
 Vue.use(ignoreNativeBindingWarnMessages)
 Vue.use(storeLoader)
diff --git a/frontend/src/plugins/filterLoading.js b/frontend/src/plugins/filterLoading.js
deleted file mode 100644
index 1fa47f8a74..0000000000
--- a/frontend/src/plugins/filterLoading.js
+++ /dev/null
@@ -1,20 +0,0 @@
-class FilterLoadingPlugin {
-  install(Vue) {
-    Vue.filter(
-      'loading',
-      function (
-        value,
-        loadingState,
-        isLoading = (v) => typeof v === 'function' && v.loading
-      ) {
-        if (typeof value === 'function' && !value.loading) {
-          // Wrap the function that is passed into the | loading filter
-          return (v, ...args) => (isLoading(v) ? loadingState : value(v, ...args))
-        }
-        return isLoading(value) ? loadingState : value
-      }
-    )
-  }
-}
-
-export default new FilterLoadingPlugin()
diff --git a/frontend/src/plugins/index.js b/frontend/src/plugins/index.js
index ba397a2f27..d0fdc2ea1a 100644
--- a/frontend/src/plugins/index.js
+++ b/frontend/src/plugins/index.js
@@ -1,7 +1,6 @@
 export { default as vuetifyLoader } from './vuetify'
 export { default as storeLoader } from './store'
 export { default as auth } from './auth'
-export { default as filterLoading } from './filterLoading'
 export { default as formBaseComponents } from './formBaseComponents'
 export { default as ignoreNativeBindingWarnMessages } from './ignoreNativeBindingWarnMessages'
 export { default as i18n } from './i18n'
diff --git a/frontend/src/views/camp/navigation/desktop/NavTopbar.vue b/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
index 5de166a951..3926649619 100644
--- a/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
+++ b/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
@@ -5,10 +5,7 @@
     <v-toolbar-items>
       <v-btn :to="campRoute(camp())" text>
         <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-tent</v-icon>
-        <span class="sr-only-sm-and-down">{{
-          camp().title
-            | loading($tc('views.camp.navigation.desktop.navTopbar.campIsLoading'))
-        }}</span>
+        <span class="sr-only-sm-and-down">{{ camp().title }}</span>
       </v-btn>
       <v-btn :to="campRoute(camp(), 'program')" text>
         <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-view-dashboard</v-icon>

From d4eeef50e662469bdf2edd4678849163743e95e6 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 18:05:00 +0100
Subject: [PATCH 06/21] migrate hal-json-vuex setup and disable store commits

---
 frontend/src/App.vue                          |   4 +-
 .../components/layout/LanguageSwitcher.vue    |   2 +-
 frontend/src/main.js                          |   2 +
 frontend/src/plugins/auth.js                  |   6 +-
 frontend/src/plugins/hal-json-vuex.js         |  35 +++
 frontend/src/plugins/index.js                 |   1 +
 frontend/src/plugins/store/index.js           |  23 --
 frontend/src/views/Profile.vue                |   2 +-
 frontend/src/views/auth/Login.vue             |   4 +-
 frontend/src/views/auth/Register.vue          | 232 +++++++++---------
 10 files changed, 163 insertions(+), 148 deletions(-)
 create mode 100644 frontend/src/plugins/hal-json-vuex.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e60d45b586..61084c3cba 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -54,7 +54,7 @@ export default {
     },
   },
   created() {
-    this.$store.commit('setLanguage', this.$store.state.lang.language)
+    // this.$store.commit('setLanguage', this.$store.state.lang.language)
   },
   async mounted() {
     if (this.$auth.isLoggedIn()) {
@@ -62,7 +62,7 @@ export default {
       const profile = await user.profile()._meta.load
 
       if (VueI18n.availableLocales.includes(profile.language)) {
-        this.$store.commit('setLanguage', profile.language)
+        // this.$store.commit('setLanguage', profile.language)
       }
     }
   },
diff --git a/frontend/src/components/layout/LanguageSwitcher.vue b/frontend/src/components/layout/LanguageSwitcher.vue
index c63b12d083..c219b7fa34 100644
--- a/frontend/src/components/layout/LanguageSwitcher.vue
+++ b/frontend/src/components/layout/LanguageSwitcher.vue
@@ -33,7 +33,7 @@ export default {
   name: 'LanguageSwitcher',
   methods: {
     changeLang(lang) {
-      this.$store.commit('setLanguage', lang)
+      // this.$store.commit('setLanguage', lang)
     },
   },
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 59940e61ea..2370500d2d 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,6 +5,7 @@ import {
   vuetifyLoader,
   auth,
   storeLoader,
+  halJsonVuex,
   formBaseComponents,
   ignoreNativeBindingWarnMessages,
   i18n,
@@ -43,6 +44,7 @@ Vue.use(veeValidate)
 Vue.use(Toast, {
   maxToasts: 2,
 })
+Vue.use(halJsonVuex)
 
 // manually importing necessary vuetify directives (there's no auomatic vuetify-loader for vitejs)
 Vue.directive('resize', Resize)
diff --git a/frontend/src/plugins/auth.js b/frontend/src/plugins/auth.js
index ecb456abd3..18154fef9c 100644
--- a/frontend/src/plugins/auth.js
+++ b/frontend/src/plugins/auth.js
@@ -74,14 +74,14 @@ async function resetPassword(id, password, recaptchaToken) {
 
 async function loadUser() {
   if (!getJWTPayloadFromCookie()) {
-    store.commit('logout')
+    // store.commit('logout')
     return null
   }
 
   try {
     const user = await apiStore.get(parseJWTPayload(getJWTPayloadFromCookie()).user)._meta
       .load
-    store.commit('login', user)
+    // store.commit('login', user)
     return user
   } catch (e) {
     if (e.response && [401, 403, 404].includes(e.response.status)) {
@@ -136,7 +136,7 @@ async function loginJublaDB() {
 
 export async function logout() {
   Cookies.remove(headerAndPayloadCookieName())
-  store.commit('logout')
+  // store.commit('logout')
   return router
     .push({ name: 'login' })
     .catch(() => {}) // prevents throwing NavigationDuplicated is already on /login
diff --git a/frontend/src/plugins/hal-json-vuex.js b/frontend/src/plugins/hal-json-vuex.js
new file mode 100644
index 0000000000..75f6d88a2f
--- /dev/null
+++ b/frontend/src/plugins/hal-json-vuex.js
@@ -0,0 +1,35 @@
+import HalJsonVuex from 'hal-json-vuex'
+import axios from 'axios'
+import { createStore } from 'vuex'
+import { getEnv } from '@/environment.js'
+
+export default {
+  install: (app, options) => {
+    // create store
+    const store = createStore({
+      state() {
+        return {}
+      },
+    })
+    app.use(store)
+
+    const axiosInstance = axios.create({
+      withCredentials: true,
+      baseURL: getEnv().API_ROOT_URL,
+      headers: { common: { Accept: 'application/hal+json' } },
+    })
+    axiosInstance.interceptors.request.use(function (config) {
+      if (config.method === 'patch') {
+        config.headers['Content-Type'] = 'application/merge-patch+json'
+      }
+      return config
+    })
+
+    // create and inject API
+    const api = new HalJsonVuex(store, axiosInstance, {
+      forceRequestedSelfLink: true,
+    })
+
+    app.use(api)
+  },
+}
diff --git a/frontend/src/plugins/index.js b/frontend/src/plugins/index.js
index d0fdc2ea1a..48dc97aebd 100644
--- a/frontend/src/plugins/index.js
+++ b/frontend/src/plugins/index.js
@@ -6,3 +6,4 @@ export { default as ignoreNativeBindingWarnMessages } from './ignoreNativeBindin
 export { default as i18n } from './i18n'
 export { default as veeValidate } from './veeValidate'
 export { default as dayjs } from './dayjs'
+export { default as halJsonVuex } from './hal-json-vuex'
diff --git a/frontend/src/plugins/store/index.js b/frontend/src/plugins/store/index.js
index 110b57a1eb..0c21a0aa55 100644
--- a/frontend/src/plugins/store/index.js
+++ b/frontend/src/plugins/store/index.js
@@ -1,10 +1,6 @@
 import Vuex from 'vuex'
-import axios from 'axios'
-import VueAxios from 'vue-axios/dist/vue-axios.common.min'
-import HalJsonVuex from 'hal-json-vuex'
 import lang from './lang'
 import auth from './auth'
-import { getEnv } from '@/environment.js'
 
 class StorePlugin {
   install(Vue) {
@@ -17,25 +13,6 @@ class StorePlugin {
       },
       strict: process.env.NODE_ENV !== 'production',
     })
-
-    axios.defaults.withCredentials = true
-    axios.defaults.baseURL = getEnv().API_ROOT_URL
-    axios.defaults.headers.common.Accept = 'application/hal+json'
-    axios.interceptors.request.use(function (config) {
-      if (config.method === 'patch') {
-        config.headers['Content-Type'] = 'application/merge-patch+json'
-      }
-      return config
-    })
-
-    Vue.use(VueAxios, axios)
-
-    let halJsonVuex = HalJsonVuex
-    if (typeof halJsonVuex !== 'function') {
-      halJsonVuex = HalJsonVuex.default
-    }
-    apiStore = halJsonVuex(store, axios, { forceRequestedSelfLink: true })
-    Vue.use(apiStore)
   }
 }
 
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 2d944b2eaf..854d8c48ed 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -116,7 +116,7 @@ export default {
   watch: {
     profile() {
       if (VueI18n.availableLocales.includes(this.profile?.language)) {
-        this.$store.commit('setLanguage', this.profile?.language)
+        // this.$store.commit('setLanguage', this.profile?.language)
       }
     },
   },
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index ccf5a1c366..657b8b9d2b 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -206,7 +206,7 @@ export default {
     },
   },
   mounted() {
-    this.$store.commit('setLanguage', this.$i18n.browserPreferredLocale)
+    // this.$store.commit('setLanguage', this.$i18n.browserPreferredLocale)
   },
   methods: {
     async login() {
@@ -218,7 +218,7 @@ export default {
           const user = await this.$auth.loadUser()
           const profile = await user.profile()._meta.load
           if (VueI18n.availableLocales.includes(profile.language)) {
-            await this.$store.commit('setLanguage', profile.language)
+            // await this.$store.commit('setLanguage', profile.language)
           }
           this.$router.replace(this.$route.query.redirect || '/')
         })
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index 8131c54717..2a36c1f91a 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -1,129 +1,129 @@
 <template>
   <auth-container>
     <h1 class="display-1 text-center">{{ $tc('views.auth.register.title') }}</h1>
-<!--    <validation-observer v-slot="{ handleSubmit }">-->
-      <v-form @submit.prevent="handleSubmit(register)">
-        <e-text-field
-          v-model="firstname"
-          :name="$tc('entity.user.fields.firstname')"
-          vee-rules="required"
-          append-icon="mdi-account-outline"
-          dense
-          type="text"
-          autocomplete="given-name"
-        />
+    <!--    <validation-observer v-slot="{ handleSubmit }">-->
+    <v-form @submit.prevent="handleSubmit(register)">
+      <e-text-field
+        v-model="firstname"
+        :name="$tc('entity.user.fields.firstname')"
+        vee-rules="required"
+        append-icon="mdi-account-outline"
+        dense
+        type="text"
+        autocomplete="given-name"
+      />
 
-        <e-text-field
-          v-model="surname"
-          :name="$tc('entity.user.fields.surname')"
-          vee-rules="required"
-          append-icon="mdi-account-outline"
-          dense
-          type="text"
-          autocomplete="family-name"
-        />
+      <e-text-field
+        v-model="surname"
+        :name="$tc('entity.user.fields.surname')"
+        vee-rules="required"
+        append-icon="mdi-account-outline"
+        dense
+        type="text"
+        autocomplete="family-name"
+      />
 
-        <e-text-field
-          v-model="email"
-          :name="$tc('entity.user.fields.email')"
-          vee-rules="email|required"
-          append-icon="mdi-at"
-          dense
-          type="email"
-          autocomplete="username"
-        />
+      <e-text-field
+        v-model="email"
+        :name="$tc('entity.user.fields.email')"
+        vee-rules="email|required"
+        append-icon="mdi-at"
+        dense
+        type="email"
+        autocomplete="username"
+      />
 
-        <e-text-field
-          v-model="pw1"
-          :name="$tc('entity.user.fields.password')"
-          vee-id="password"
-          vee-rules="required|min:12|max:128"
-          validate-on-blur
-          append-icon="mdi-lock-outline"
-          dense
-          type="password"
-          autocomplete="new-password"
-          minlength="12"
-          maxlength="128"
-          passwordrules="minlength: 12; maxlength: 128;"
-          loading
-          @input="debouncedPasswordStrengthCheck"
-        >
-          <template #progress>
-            <v-progress-linear
-              :value="passwordStrength"
-              :color="passwordStrengthColor"
-              absolute
-              height="5"
-            />
-          </template>
-        </e-text-field>
+      <e-text-field
+        v-model="pw1"
+        :name="$tc('entity.user.fields.password')"
+        vee-id="password"
+        vee-rules="required|min:12|max:128"
+        validate-on-blur
+        append-icon="mdi-lock-outline"
+        dense
+        type="password"
+        autocomplete="new-password"
+        minlength="12"
+        maxlength="128"
+        passwordrules="minlength: 12; maxlength: 128;"
+        loading
+        @input="debouncedPasswordStrengthCheck"
+      >
+        <template #progress>
+          <v-progress-linear
+            :value="passwordStrength"
+            :color="passwordStrengthColor"
+            absolute
+            height="5"
+          />
+        </template>
+      </e-text-field>
 
-        <e-text-field
-          v-model="pw2"
-          :name="$tc('views.auth.register.passwordConfirmation')"
-          vee-rules="required|confirmed:password"
-          validate-on-blur
-          dense
-          append-icon="mdi-lock-outline"
-          type="password"
-          autocomplete="new-password"
-          minlength="12"
-          maxlength="128"
-          passwordrules="minlength: 12; maxlength: 128;"
-        />
+      <e-text-field
+        v-model="pw2"
+        :name="$tc('views.auth.register.passwordConfirmation')"
+        vee-rules="required|confirmed:password"
+        validate-on-blur
+        dense
+        append-icon="mdi-lock-outline"
+        type="password"
+        autocomplete="new-password"
+        minlength="12"
+        maxlength="128"
+        passwordrules="minlength: 12; maxlength: 128;"
+      />
 
-        <e-select
-          v-model="language"
-          :name="$tc('entity.user.fields.language')"
-          dense
-          :items="availableLocales"
-        />
+      <e-select
+        v-model="language"
+        :name="$tc('entity.user.fields.language')"
+        dense
+        :items="availableLocales"
+      />
 
-        <e-checkbox
-          v-if="termsOfServiceLink"
-          v-model="tos"
-          :vee-rules="{ required: { allowFalse: false } }"
-          class="align-center"
-          :name="$tc('views.auth.register.acceptTermsOfService')"
-        >
-          <template #label>
-            <span style="hyphens: auto" :class="{ 'body-2': $vuetify.breakpoint.xsOnly }">
-              {{ $tc('views.auth.register.acceptTermsOfService') }}
-            </span>
-          </template>
-          <template #append>
-            <v-btn
-              text
-              dense
-              min-width="0"
-              :title="$tc('global.button.open')"
-              target="_blank"
-              class="px-1"
-              :href="termsOfServiceLink"
-              tabindex="-1"
-            >
-              <v-icon small>mdi-open-in-new</v-icon>
-            </v-btn>
-          </template>
-        </e-checkbox>
+      <e-checkbox
+        v-if="termsOfServiceLink"
+        v-model="tos"
+        :vee-rules="{ required: { allowFalse: false } }"
+        class="align-center"
+        :name="$tc('views.auth.register.acceptTermsOfService')"
+      >
+        <template #label>
+          <span style="hyphens: auto" :class="{ 'body-2': $vuetify.breakpoint.xsOnly }">
+            {{ $tc('views.auth.register.acceptTermsOfService') }}
+          </span>
+        </template>
+        <template #append>
+          <v-btn
+            text
+            dense
+            min-width="0"
+            :title="$tc('global.button.open')"
+            target="_blank"
+            class="px-1"
+            :href="termsOfServiceLink"
+            tabindex="-1"
+          >
+            <v-icon small>mdi-open-in-new</v-icon>
+          </v-btn>
+        </template>
+      </e-checkbox>
 
-        <p class="mt-0 mb-4 text--secondary text-left">
-          <small>
-            <span style="color: #d32f2f">*</span>
-            {{ $tc('views.auth.register.requiredField') }}
-          </small>
-        </p>
+      <p class="mt-0 mb-4 text--secondary text-left">
+        <small>
+          <span style="color: #d32f2f">*</span>
+          {{ $tc('views.auth.register.requiredField') }}
+        </small>
+      </p>
 
-        <v-btn type="submit" color="primary" block x-large>
-          <v-progress-circular v-if="registering" indeterminate size="24" />
-          <v-spacer />
-          <span>{{ $tc('views.auth.register.register') }}</span>
-          <v-spacer />
-          <icon-spacer />
-        </v-btn>
-      </v-form>
-<!--    </validation-observer>-->
+      <v-btn type="submit" color="primary" block x-large>
+        <v-progress-circular v-if="registering" indeterminate size="24" />
+        <v-spacer />
+        <span>{{ $tc('views.auth.register.register') }}</span>
+        <v-spacer />
+        <icon-spacer />
+      </v-btn>
+    </v-form>
+    <!--    </validation-observer>-->
 
     <p class="mt-8 mb-0 text--secondary text-center">
       {{ $tc('views.auth.register.alreadyHaveAnAccount') }}<br />
@@ -191,7 +191,7 @@ export default {
   watch: {
     language() {
       if (VueI18n.availableLocales.includes(this.language)) {
-        this.$store.commit('setLanguage', this.language)
+        // this.$store.commit('setLanguage', this.language)
       }
     },
   },

From 2032c0e44d745135ae505cabbf47e09961d2895b Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 18:09:14 +0100
Subject: [PATCH 07/21] fix GLOBAL_PROTOTYPE

---
 frontend/src/plugins/auth.js  | 4 ++--
 frontend/src/plugins/dayjs.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/plugins/auth.js b/frontend/src/plugins/auth.js
index 18154fef9c..430714db87 100644
--- a/frontend/src/plugins/auth.js
+++ b/frontend/src/plugins/auth.js
@@ -168,8 +168,8 @@ export const auth = {
 }
 
 class AuthPlugin {
-  install(Vue) {
-    Object.defineProperties(Vue.prototype, {
+  install(app) {
+    Object.defineProperties(app.config.globalProperties, {
       $auth: {
         get() {
           return auth
diff --git a/frontend/src/plugins/dayjs.js b/frontend/src/plugins/dayjs.js
index 975ad2011a..9f830125cd 100644
--- a/frontend/src/plugins/dayjs.js
+++ b/frontend/src/plugins/dayjs.js
@@ -1,14 +1,14 @@
 import dayjs from '@/common/helpers/dayjs.js'
 
 export default {
-  install: (Vue) => {
-    Object.defineProperties(Vue.prototype, {
+  install: (app) => {
+    Object.defineProperties(app.config.globalProperties, {
       $date: {
         get() {
           return dayjs
         },
       },
     })
-    Vue.dayjs = dayjs
+    // Vue.dayjs = dayjs
   },
 }

From 4cb8996a2cf689ee44544ddbe33fd51242416a24 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 18:21:10 +0100
Subject: [PATCH 08/21] cleanup main.js

---
 frontend/src/main.js                | 65 ++++++++++++++++-------------
 frontend/src/plugins/i18n/index.js  |  2 +-
 frontend/src/plugins/store/index.js | 17 ++++----
 frontend/src/router.js              |  2 -
 4 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2370500d2d..2f6bc90f5c 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from '@/router.js'
 import {
@@ -22,38 +22,43 @@ import 'vue-toastification/dist/index.css'
 import { Resize } from 'vuetify/directives'
 import ResizeObserver from 'v-resize-observer'
 
-const env = getEnv()
-if (env && env.SENTRY_FRONTEND_DSN) {
-  const sentryEnvironment = env.SENTRY_ENVIRONMENT ?? 'local'
-  Sentry.init({
-    Vue,
-    dsn: env.SENTRY_FRONTEND_DSN,
-    environment: sentryEnvironment,
-    tracing: false,
-    logErrors: process.env.NODE_ENV !== 'production',
-  })
-}
+// const env = getEnv()
+// if (env && env.SENTRY_FRONTEND_DSN) {
+//   const sentryEnvironment = env.SENTRY_ENVIRONMENT ?? 'local'
+//   Sentry.init({
+//     Vue,
+//     dsn: env.SENTRY_FRONTEND_DSN,
+//     environment: sentryEnvironment,
+//     tracing: false,
+//     logErrors: process.env.NODE_ENV !== 'production',
+//   })
+// }
 
-Vue.use(auth)
-Vue.use(formBaseComponents)
-Vue.use(ignoreNativeBindingWarnMessages)
-Vue.use(storeLoader)
-Vue.use(vuetifyLoader)
-Vue.use(dayjs)
-Vue.use(veeValidate)
-Vue.use(Toast, {
+const app = createApp(App)
+
+app.use(auth)
+app.use(formBaseComponents)
+app.use(ignoreNativeBindingWarnMessages)
+app.use(storeLoader)
+app.use(vuetifyLoader)
+app.use(dayjs)
+app.use(veeValidate)
+app.use(Toast, {
   maxToasts: 2,
 })
-Vue.use(halJsonVuex)
+app.use(halJsonVuex)
+app.use(router)
 
 // manually importing necessary vuetify directives (there's no auomatic vuetify-loader for vitejs)
-Vue.directive('resize', Resize)
-Vue.directive('resizeobserver', ResizeObserver.directive)
+app.directive('resize', Resize)
+app.directive('resizeobserver', ResizeObserver.directive)
 
-new Vue({
-  router,
-  store,
-  vuetify,
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app')
+// new Vue({
+//   router,
+//   store,
+//   vuetify,
+//   i18n,
+//   render: (h) => h(App),
+// }).$mount('#app')'
+
+app.mount('#app')
diff --git a/frontend/src/plugins/i18n/index.js b/frontend/src/plugins/i18n/index.js
index 5b6fbba6aa..6ce636d950 100644
--- a/frontend/src/plugins/i18n/index.js
+++ b/frontend/src/plugins/i18n/index.js
@@ -106,7 +106,7 @@ const i18n = createI18n({
   silentTranslationWarn: true,
 })
 
-Vue.use(i18n)
+// Vue.use(i18n)
 
 Object.defineProperty(i18n, 'browserPreferredLocale', {
   get: function () {
diff --git a/frontend/src/plugins/store/index.js b/frontend/src/plugins/store/index.js
index 0c21a0aa55..c155c8710d 100644
--- a/frontend/src/plugins/store/index.js
+++ b/frontend/src/plugins/store/index.js
@@ -4,15 +4,14 @@ import auth from './auth'
 
 class StorePlugin {
   install(Vue) {
-    Vue.use(Vuex)
-
-    store = new Vuex.Store({
-      modules: {
-        lang,
-        auth,
-      },
-      strict: process.env.NODE_ENV !== 'production',
-    })
+    // Vue.use(Vuex)
+    // store = new Vuex.Store({
+    //   modules: {
+    //     lang,
+    //     auth,
+    //   },
+    //   strict: process.env.NODE_ENV !== 'production',
+    // })
   }
 }
 
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 954aa9649a..030704f0e2 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -392,8 +392,6 @@ const router = createRouter({
   ],
 })
 
-Vue.use(router)
-
 export default router
 
 function evaluateGuards(guards, to, from, next) {

From 15196411f826c39a0d2cd83c90aac811dd3d694e Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 18:51:29 +0100
Subject: [PATCH 09/21] run lint (vue rules only)

---
 .../__tests__/packageDirectory.spec.js        |   2 +-
 ...ionKeys.js => matchingTranslationKeys.cjs} |   2 +-
 ...ckageDirectory.js => packageDirectory.cjs} |   0
 .../{babel.config.js => babel.config.cjs}     |   0
 frontend/eslint-local-rules.cjs               |   8 ++
 frontend/eslint-local-rules/index.js          |   8 --
 frontend/package-lock.json                    | 119 ++++++++--------
 frontend/package.json                         |  16 +--
 .../activity/DraggableContentNodes.vue        |   2 +-
 .../columnLayout/ResizableColumnHeader.vue    |   2 +-
 .../content/storyboard/StoryboardSortable.vue |   8 +-
 frontend/src/components/dialog/DialogForm.vue | 128 +++++++++---------
 .../components/form/base/BaseComponent.vue    |   2 +-
 .../src/components/form/base/BasePicker.vue   |   2 +-
 .../src/components/form/base/ECheckbox.vue    |   2 +-
 .../src/components/form/base/EDatePicker.vue  |   2 +-
 .../src/components/form/base/ERichtext.vue    |   2 +-
 frontend/src/components/form/base/ESelect.vue |   2 +-
 frontend/src/components/form/base/ESwitch.vue |   2 +-
 .../src/components/form/base/ETextField.vue   |  62 ++++-----
 .../src/components/form/base/ETextarea.vue    |  56 ++++----
 .../src/components/generic/DetailPane.vue     |   8 +-
 .../src/components/navigation/SideBar.vue     |   2 +-
 .../components/program/ScheduleEntries.vue    |   2 +-
 .../components/program/picasso/Picasso.vue    |   4 +-
 .../program/picasso/PicassoEntry.vue          |   4 +-
 .../src/views/activity/SideBarProgram.vue     |   2 +-
 frontend/src/views/camp/CampProgram.vue       |   4 +-
 frontend/{vue.config.js => vue.config.cjs}    |   0
 29 files changed, 217 insertions(+), 236 deletions(-)
 rename common/eslint-local-rules/{matchingTranslationKeys.js => matchingTranslationKeys.cjs} (98%)
 rename common/eslint-local-rules/{packageDirectory.js => packageDirectory.cjs} (100%)
 rename frontend/{babel.config.js => babel.config.cjs} (100%)
 create mode 100644 frontend/eslint-local-rules.cjs
 delete mode 100644 frontend/eslint-local-rules/index.js
 rename frontend/{vue.config.js => vue.config.cjs} (100%)

diff --git a/common/eslint-local-rules/__tests__/packageDirectory.spec.js b/common/eslint-local-rules/__tests__/packageDirectory.spec.js
index ef8efbcbdd..777523ba42 100644
--- a/common/eslint-local-rules/__tests__/packageDirectory.spec.js
+++ b/common/eslint-local-rules/__tests__/packageDirectory.spec.js
@@ -1,4 +1,4 @@
-import factory from '../packageDirectory.js'
+import factory from '../packageDirectory.cjs'
 import path from 'path'
 import fs from 'fs'
 
diff --git a/common/eslint-local-rules/matchingTranslationKeys.js b/common/eslint-local-rules/matchingTranslationKeys.cjs
similarity index 98%
rename from common/eslint-local-rules/matchingTranslationKeys.js
rename to common/eslint-local-rules/matchingTranslationKeys.cjs
index fbfbc80edd..682ea23432 100644
--- a/common/eslint-local-rules/matchingTranslationKeys.js
+++ b/common/eslint-local-rules/matchingTranslationKeys.cjs
@@ -1,5 +1,5 @@
 module.exports = (path, utils, fs) => {
-  const { packageDirectory } = require('./packageDirectory.js')(path, fs)
+  const { packageDirectory } = require('./packageDirectory.cjs')(path, fs)
 
   /**
    * Convert a file path to our convention for translation key structures
diff --git a/common/eslint-local-rules/packageDirectory.js b/common/eslint-local-rules/packageDirectory.cjs
similarity index 100%
rename from common/eslint-local-rules/packageDirectory.js
rename to common/eslint-local-rules/packageDirectory.cjs
diff --git a/frontend/babel.config.js b/frontend/babel.config.cjs
similarity index 100%
rename from frontend/babel.config.js
rename to frontend/babel.config.cjs
diff --git a/frontend/eslint-local-rules.cjs b/frontend/eslint-local-rules.cjs
new file mode 100644
index 0000000000..e4cd23a537
--- /dev/null
+++ b/frontend/eslint-local-rules.cjs
@@ -0,0 +1,8 @@
+const path = require('path')
+const fs = require('fs')
+const utils = require('eslint-plugin-vue/lib/utils/index.js')
+const matchingTranslationKeys = require('./src/common/eslint-local-rules/matchingTranslationKeys.cjs')
+
+module.exports = {
+  // 'matching-translation-keys': matchingTranslationKeys(path, utils, fs),
+}
diff --git a/frontend/eslint-local-rules/index.js b/frontend/eslint-local-rules/index.js
deleted file mode 100644
index 7da60a12f9..0000000000
--- a/frontend/eslint-local-rules/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const utils = require('eslint-plugin-vue/lib/utils/index.js')
-const matchingTranslationKeys = require('../src/common/eslint-local-rules/matchingTranslationKeys.js')
-
-module.exports = {
-  'matching-translation-keys': matchingTranslationKeys(path, utils, fs),
-}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 92229b8ac7..eee2d7f8ea 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -98,6 +98,7 @@
         "eslint-plugin-prettier": "5.1.2",
         "eslint-plugin-promise": "6.1.1",
         "eslint-plugin-vue": "9.19.2",
+        "eslint-plugin-vuetify": "^2.1.1",
         "flush-promises": "1.0.2",
         "jest-serializer-vue-tjw": "3.20.0",
         "jsdom": "23.0.1",
@@ -1942,7 +1943,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -1958,7 +1958,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1974,7 +1973,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1990,7 +1988,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -2006,7 +2003,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -2022,7 +2018,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -2038,7 +2033,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -2054,7 +2048,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -2070,7 +2063,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2086,7 +2078,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2102,7 +2093,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2118,7 +2108,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2134,7 +2123,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2150,7 +2138,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2166,7 +2153,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2182,7 +2168,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2198,7 +2183,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2214,7 +2198,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -2230,7 +2213,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -2246,7 +2228,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -2262,7 +2243,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2278,7 +2258,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2294,7 +2273,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2623,7 +2601,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2637,7 +2615,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2646,7 +2624,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2655,7 +2633,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
       "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -2670,7 +2648,7 @@
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -2993,7 +2971,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -3006,7 +2983,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -3019,7 +2995,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3032,7 +3007,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3045,7 +3019,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3058,7 +3031,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3071,7 +3043,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3084,7 +3055,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3097,7 +3067,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3110,7 +3079,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3123,7 +3091,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3136,7 +3103,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3149,7 +3115,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -4226,7 +4191,7 @@
       "version": "20.10.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz",
       "integrity": "sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -5660,7 +5625,7 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5846,7 +5811,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -6245,7 +6210,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -6347,7 +6312,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -6431,7 +6396,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/bytes": {
       "version": "3.0.0",
@@ -6690,7 +6655,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "individual",
@@ -6717,7 +6682,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -8765,6 +8730,20 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/eslint-plugin-vuetify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-2.1.1.tgz",
+      "integrity": "sha512-86MX47xzD1HzbPRh2x5LVmukYj5SKfI3ooGT4fn71vKr83VyrhYCQzqFmYmTPqwNDwZFXcCYtZWVQFOneITVpg==",
+      "dev": true,
+      "dependencies": {
+        "eslint-plugin-vue": "^9.6.0",
+        "requireindex": "^1.2.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.0.0",
+        "vuetify": "^3.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -9460,7 +9439,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9723,7 +9702,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -10491,7 +10469,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
       "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -10636,7 +10614,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -10741,7 +10719,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10785,7 +10763,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -10842,7 +10820,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -12842,7 +12820,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13570,7 +13548,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -14978,7 +14956,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -15242,6 +15220,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.5"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -15493,7 +15480,7 @@
       "version": "1.69.6",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.6.tgz",
       "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -15951,7 +15938,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15968,7 +15955,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -16523,7 +16510,7 @@
       "version": "5.26.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz",
       "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -16593,7 +16580,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
@@ -16776,7 +16763,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -17009,7 +16996,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
diff --git a/frontend/package.json b/frontend/package.json
index 7023d8ec58..894fd12640 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,6 +48,7 @@
     "@tiptap/vue-3": "2.1.13",
     "@vee-validate/i18n": "4.12.4",
     "@vee-validate/rules": "4.12.4",
+    "@vue/compat": "3.3.13",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "@zxcvbn-ts/language-de": "3.0.2",
@@ -74,7 +75,6 @@
     "v-resize-observer": "2.1.0",
     "vee-validate": "4.12.4",
     "vue": "3.3.13",
-    "@vue/compat": "3.3.13",
     "vue-axios": "3.5.2",
     "vue-i18n": "9.8.0",
     "vue-recaptcha-v3": "2.0.1",
@@ -98,10 +98,10 @@
     "@vue/cli-service": "5.0.8",
     "@vue/compiler-dom": "3.3.13",
     "@vue/compiler-sfc": "3.3.13",
+    "@vue/eslint-config-prettier": "9.0.0",
     "@vue/runtime-dom": "3.3.13",
     "@vue/server-renderer": "3.3.13",
     "@vue/shared": "3.3.13",
-    "@vue/eslint-config-prettier": "9.0.0",
     "@vue/test-utils": "2.4.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "eslint": "8.56.0",
@@ -112,6 +112,7 @@
     "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.19.2",
+    "eslint-plugin-vuetify": "^2.1.1",
     "flush-promises": "1.0.2",
     "jest-serializer-vue-tjw": "3.20.0",
     "jsdom": "23.0.1",
@@ -134,7 +135,7 @@
       "jest": true
     },
     "extends": [
-      "plugin:vue/recommended",
+      "plugin:vue/vue3-recommended",
       "eslint:recommended",
       "plugin:prettier/recommended",
       "@vue/eslint-config-prettier"
@@ -158,13 +159,6 @@
           "argsIgnorePattern": "^_$"
         }
       ],
-      "local-rules/matching-translation-keys": [
-        "error",
-        {
-          "ignoreKeysRegex": "^(global|entity|contentNode\\.[a-z][a-zA-Z]+|print\\.(global|activity|cover|picasso|program|story|toc))\\..+",
-          "translationKeyPropRegex": "[a-zA-Z0-9]-i18n-key$"
-        }
-      ],
       "vue/no-mutating-props": [
         "error",
         {
@@ -202,4 +196,4 @@
       "git add"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/activity/DraggableContentNodes.vue b/frontend/src/components/activity/DraggableContentNodes.vue
index ce4c05f14a..833e498859 100644
--- a/frontend/src/components/activity/DraggableContentNodes.vue
+++ b/frontend/src/components/activity/DraggableContentNodes.vue
@@ -114,7 +114,7 @@ export default {
       },
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.cleanupDrag()
   },
   methods: {
diff --git a/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue b/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
index 587dd72590..0132c1fbf2 100644
--- a/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
+++ b/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
@@ -52,7 +52,7 @@ export default {
     document.documentElement.addEventListener('touchcancel', this.mouseUp, true)
     document.documentElement.addEventListener('touchstart', this.mouseUp, true)
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     document.documentElement.removeEventListener('mousemove', this.mouseMove)
     document.documentElement.removeEventListener('mouseup', this.mouseUp)
     document.documentElement.removeEventListener('mouseleave', this.mouseUp)
diff --git a/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue b/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
index 000ecc13ed..6214342de1 100644
--- a/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
+++ b/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
@@ -21,8 +21,8 @@
         :item-key="key"
         :layout-mode="layoutMode"
         @delete="deleteItem"
-        @moveDown="moveDown"
-        @moveUp="moveUp"
+        @move-down="moveDown"
+        @move-up="moveUp"
       />
       <StoryboardRowDense
         v-else-if="variant === 'dense'"
@@ -32,8 +32,8 @@
         :item-key="key"
         :layout-mode="layoutMode"
         @delete="deleteItem"
-        @moveDown="moveDown"
-        @moveUp="moveUp"
+        @move-down="moveDown"
+        @move-up="moveUp"
       />
     </template>
   </draggable>
diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
index 355eea188a..e301fec453 100644
--- a/frontend/src/components/dialog/DialogForm.vue
+++ b/frontend/src/components/dialog/DialogForm.vue
@@ -12,72 +12,72 @@
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
     </template>
-<!--    <ValidationObserver v-if="value" ref="validation" v-slot="{ handleSubmit }">-->
-      <!-- ValidationObserver/handleSubmit ensures that doSubmit is only called if there are no validation errors -->
-      <v-form @submit.prevent="handleSubmit(doSubmit)">
-        <v-card>
-          <v-toolbar dense elevation="0" class="ec-dialog-toolbar">
-            <v-icon left>
-              {{ icon }}
-            </v-icon>
-            <v-toolbar-title>
-              {{ title }}
-            </v-toolbar-title>
-            <v-btn
-              v-if="$vuetify.breakpoint.smAndUp && cancelAction != null"
-              icon
-              class="ml-auto"
-              :title="$tc('global.button.cancel')"
-              @click="doCancel"
-            >
-              <v-icon>mdi-close</v-icon>
-              <span class="d-sr-only">{{ $tc('global.button.cancel') }}</span>
-            </v-btn>
-          </v-toolbar>
-          <div class="pa-4">
-            <v-skeleton-loader v-if="loading" type="article" />
-            <slot v-else />
-          </div>
+    <!--    <ValidationObserver v-if="value" ref="validation" v-slot="{ handleSubmit }">-->
+    <!-- ValidationObserver/handleSubmit ensures that doSubmit is only called if there are no validation errors -->
+    <v-form @submit.prevent="handleSubmit(doSubmit)">
+      <v-card>
+        <v-toolbar dense elevation="0" class="ec-dialog-toolbar">
+          <v-icon left>
+            {{ icon }}
+          </v-icon>
+          <v-toolbar-title>
+            {{ title }}
+          </v-toolbar-title>
+          <v-btn
+            v-if="$vuetify.breakpoint.smAndUp && cancelAction != null"
+            icon
+            class="ml-auto"
+            :title="$tc('global.button.cancel')"
+            @click="doCancel"
+          >
+            <v-icon>mdi-close</v-icon>
+            <span class="d-sr-only">{{ $tc('global.button.cancel') }}</span>
+          </v-btn>
+        </v-toolbar>
+        <div class="pa-4">
+          <v-skeleton-loader v-if="loading" type="article" />
+          <slot v-else />
+        </div>
 
-          <v-card-text>
-            <!-- error message via slot -->
-            <v-alert v-if="$slots.error" text outlined color="warning" icon="mdi-alert">
-              <slot name="error" />
-            </v-alert>
+        <v-card-text>
+          <!-- error message via slot -->
+          <v-alert v-if="$slots.error" text outlined color="warning" icon="mdi-alert">
+            <slot name="error" />
+          </v-alert>
 
-            <!-- error message via props -->
-            <server-error v-else :server-error="error" />
-          </v-card-text>
+          <!-- error message via props -->
+          <server-error v-else :server-error="error" />
+        </v-card-text>
 
-          <v-card-actions>
-            <slot name="moreActions" />
-            <v-spacer />
-            <v-btn
-              v-if="cancelVisible && cancelAction != null"
-              :color="cancelColor"
-              text
-              :disabled="!cancelEnabled"
-              @click="doCancel"
-            >
-              {{ cancelLabel }}
-            </v-btn>
-            <v-btn
-              v-if="submitAction != null"
-              :color="submitColor"
-              type="submit"
-              :loading="currentlySaving"
-              :disabled="!submitEnabled"
-            >
-              <v-icon v-if="!!submitIcon" left>
-                {{ submitIcon }}
-              </v-icon>
-              {{ submitLabel }}
-            </v-btn>
-            <slot name="actions" />
-          </v-card-actions>
-        </v-card>
-      </v-form>
-<!--    </ValidationObserver>-->
+        <v-card-actions>
+          <slot name="moreActions" />
+          <v-spacer />
+          <v-btn
+            v-if="cancelVisible && cancelAction != null"
+            :color="cancelColor"
+            text
+            :disabled="!cancelEnabled"
+            @click="doCancel"
+          >
+            {{ cancelLabel }}
+          </v-btn>
+          <v-btn
+            v-if="submitAction != null"
+            :color="submitColor"
+            type="submit"
+            :loading="currentlySaving"
+            :disabled="!submitEnabled"
+          >
+            <v-icon v-if="!!submitIcon" left>
+              {{ submitIcon }}
+            </v-icon>
+            {{ submitLabel }}
+          </v-btn>
+          <slot name="actions" />
+        </v-card-actions>
+      </v-card>
+    </v-form>
+    <!--    </ValidationObserver>-->
   </v-dialog>
 </template>
 
@@ -90,7 +90,7 @@ export default {
   name: 'DialogForm',
   components: {
     // ValidationObserver,
-    ServerError
+    ServerError,
   },
   extends: DialogUiBase,
   props: {
diff --git a/frontend/src/components/form/base/BaseComponent.vue b/frontend/src/components/form/base/BaseComponent.vue
index d81a84e5ee..6872ea199b 100644
--- a/frontend/src/components/form/base/BaseComponent.vue
+++ b/frontend/src/components/form/base/BaseComponent.vue
@@ -19,7 +19,7 @@
       <template v-for="(_, name) in $slots" #[name]>
         <slot :name="name" />
       </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+      <template v-for="(_, name) in $slots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </component>
diff --git a/frontend/src/components/form/base/BasePicker.vue b/frontend/src/components/form/base/BasePicker.vue
index 649387bb88..75e14c8192 100644
--- a/frontend/src/components/form/base/BasePicker.vue
+++ b/frontend/src/components/form/base/BasePicker.vue
@@ -157,7 +157,7 @@ export default {
 
     this.setValue(this.value)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.clickOutsideHandler) {
       document.removeEventListener('click', this.clickOutsideHandler)
     }
diff --git a/frontend/src/components/form/base/ECheckbox.vue b/frontend/src/components/form/base/ECheckbox.vue
index 1e136c675f..8422964701 100644
--- a/frontend/src/components/form/base/ECheckbox.vue
+++ b/frontend/src/components/form/base/ECheckbox.vue
@@ -21,7 +21,7 @@
     <template v-for="(_, name) in $slots" #[name]>
       <slot :name="name" />
     </template>
-    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </v-checkbox>
diff --git a/frontend/src/components/form/base/EDatePicker.vue b/frontend/src/components/form/base/EDatePicker.vue
index 8186d1fda7..18269013cf 100644
--- a/frontend/src/components/form/base/EDatePicker.vue
+++ b/frontend/src/components/form/base/EDatePicker.vue
@@ -20,6 +20,7 @@ Displays a field as a date picker (can be used with v-model)
   >
     <template #default="picker">
       <v-date-picker
+        v-model:picker-date="pickerMonth"
         :value="picker.value || ''"
         :locale="$i18n.locale"
         first-day-of-week="1"
@@ -29,7 +30,6 @@ Displays a field as a date picker (can be used with v-model)
         no-title
         scrollable
         show-adjacent-months
-        :picker-date.sync="pickerMonth"
         @input="picker.onInput"
       >
         <v-spacer />
diff --git a/frontend/src/components/form/base/ERichtext.vue b/frontend/src/components/form/base/ERichtext.vue
index 2bb891e8ee..69e6e0ae6b 100644
--- a/frontend/src/components/form/base/ERichtext.vue
+++ b/frontend/src/components/form/base/ERichtext.vue
@@ -22,7 +22,7 @@
     <template v-for="(_, name) in $slots" #[name]>
       <slot :name="name" />
     </template>
-    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </v-tiptap-editor>
diff --git a/frontend/src/components/form/base/ESelect.vue b/frontend/src/components/form/base/ESelect.vue
index 14bbb43f8c..50399220e2 100644
--- a/frontend/src/components/form/base/ESelect.vue
+++ b/frontend/src/components/form/base/ESelect.vue
@@ -23,7 +23,7 @@
     <template v-for="(_, name) in $slots" #[name]>
       <slot :name="name" />
     </template>
-    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </v-select>
diff --git a/frontend/src/components/form/base/ESwitch.vue b/frontend/src/components/form/base/ESwitch.vue
index 34bafd108d..b6e31370bd 100644
--- a/frontend/src/components/form/base/ESwitch.vue
+++ b/frontend/src/components/form/base/ESwitch.vue
@@ -21,7 +21,7 @@
     <template v-for="(_, name) in $slots" #[name]>
       <slot :name="name" />
     </template>
-    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </v-switch>
diff --git a/frontend/src/components/form/base/ETextField.vue b/frontend/src/components/form/base/ETextField.vue
index bb4402dae3..7421ebbf53 100644
--- a/frontend/src/components/form/base/ETextField.vue
+++ b/frontend/src/components/form/base/ETextField.vue
@@ -1,35 +1,35 @@
 <template>
-<!--  <ValidationProvider-->
-<!--    v-slot="{ errors: veeErrors }"-->
-<!--    ref="validationProvider"-->
-<!--    tag="div"-->
-<!--    :name="name"-->
-<!--    :vid="veeId"-->
-<!--    :rules="veeRules"-->
-<!--    :required="required"-->
-<!--    class="e-form-container"-->
-<!--  >-->
-    <v-text-field
-      ref="textField"
-      v-bind="$attrs"
-      :filled="filled"
-      :required="required"
-      :hide-details="hideDetails"
-      :error-messages="veeErrors.concat(errorMessages)"
-      :label="label || name"
-      :class="[inputClass]"
-      :type="type"
-      v-on="inputListeners"
-    >
-      <!-- passing through all slots -->
-      <template v-for="(_, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </v-text-field>
-<!--  </ValidationProvider>-->
+  <!--  <ValidationProvider-->
+  <!--    v-slot="{ errors: veeErrors }"-->
+  <!--    ref="validationProvider"-->
+  <!--    tag="div"-->
+  <!--    :name="name"-->
+  <!--    :vid="veeId"-->
+  <!--    :rules="veeRules"-->
+  <!--    :required="required"-->
+  <!--    class="e-form-container"-->
+  <!--  >-->
+  <v-text-field
+    ref="textField"
+    v-bind="$attrs"
+    :filled="filled"
+    :required="required"
+    :hide-details="hideDetails"
+    :error-messages="veeErrors.concat(errorMessages)"
+    :label="label || name"
+    :class="[inputClass]"
+    :type="type"
+    v-on="inputListeners"
+  >
+    <!-- passing through all slots -->
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-text-field>
+  <!--  </ValidationProvider>-->
 </template>
 
 <script>
diff --git a/frontend/src/components/form/base/ETextarea.vue b/frontend/src/components/form/base/ETextarea.vue
index bf41185767..a103db6691 100644
--- a/frontend/src/components/form/base/ETextarea.vue
+++ b/frontend/src/components/form/base/ETextarea.vue
@@ -1,32 +1,32 @@
 <template>
-<!--  <ValidationProvider-->
-<!--    v-slot="{ errors: veeErrors }"-->
-<!--    tag="div"-->
-<!--    :name="name"-->
-<!--    :vid="veeId"-->
-<!--    :rules="veeRules"-->
-<!--    :required="required"-->
-<!--    class="e-form-container"-->
-<!--  >-->
-    <v-tiptap-editor
-      v-bind="$attrs"
-      :with-extensions="false"
-      :filled="filled"
-      :hide-details="hideDetails"
-      :error-messages="veeErrors.concat(errorMessages)"
-      :label="label || name"
-      :class="[inputClass]"
-      v-on="$listeners"
-    >
-      <!-- passing through all slots -->
-      <template v-for="(_, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </v-tiptap-editor>
-<!--  </ValidationProvider>-->
+  <!--  <ValidationProvider-->
+  <!--    v-slot="{ errors: veeErrors }"-->
+  <!--    tag="div"-->
+  <!--    :name="name"-->
+  <!--    :vid="veeId"-->
+  <!--    :rules="veeRules"-->
+  <!--    :required="required"-->
+  <!--    class="e-form-container"-->
+  <!--  >-->
+  <v-tiptap-editor
+    v-bind="$attrs"
+    :with-extensions="false"
+    :filled="filled"
+    :hide-details="hideDetails"
+    :error-messages="veeErrors.concat(errorMessages)"
+    :label="label || name"
+    :class="[inputClass]"
+    v-on="$listeners"
+  >
+    <!-- passing through all slots -->
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-tiptap-editor>
+  <!--  </ValidationProvider>-->
 </template>
 
 <script>
diff --git a/frontend/src/components/generic/DetailPane.vue b/frontend/src/components/generic/DetailPane.vue
index e1d0013474..4eb1f460cf 100644
--- a/frontend/src/components/generic/DetailPane.vue
+++ b/frontend/src/components/generic/DetailPane.vue
@@ -1,21 +1,21 @@
 <template>
   <DialogBottomSheet
     v-if="$vuetify.breakpoint.smAndDown"
-    :saving-override.sync="isSaving"
+    v-model:saving-override="isSaving"
     :value="value"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
   >
     <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </DialogBottomSheet>
   <DialogForm
     v-else
+    v-model:saving-override="isSaving"
     content-class="ec-dialog-form"
     eager
-    :saving-override.sync="isSaving"
     :value="value"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
@@ -23,7 +23,7 @@
     <template v-for="(_, name) in $slots" #[name]>
       <slot :name="name" />
     </template>
-    <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </DialogForm>
diff --git a/frontend/src/components/navigation/SideBar.vue b/frontend/src/components/navigation/SideBar.vue
index 76fabace94..a10a2efb47 100644
--- a/frontend/src/components/navigation/SideBar.vue
+++ b/frontend/src/components/navigation/SideBar.vue
@@ -2,11 +2,11 @@
   <v-navigation-drawer
     v-if="$vuetify.breakpoint.smAndUp"
     v-model="drawer"
+    v-model:mini-variant="mini"
     app
     clipped
     permanent
     :temporary="!mini && !$vuetify.breakpoint.mdAndUp"
-    :mini-variant.sync="mini"
     mini-variant-width="40"
     :width="$vuetify.breakpoint.xl || (!mini && !$vuetify.breakpoint.mdAndUp) ? 350 : 256"
     :color="!title || mini ? 'blue-grey lighten-4' : null"
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
index 5ff011af82..b643feba5d 100644
--- a/frontend/src/components/program/ScheduleEntries.vue
+++ b/frontend/src/components/program/ScheduleEntries.vue
@@ -5,7 +5,7 @@
       ref="dialogActivityCreate"
       :period="period"
       :schedule-entry="newScheduleEntry"
-      @activityCreated="afterCreateActivity($event)"
+      @activity-created="afterCreateActivity($event)"
     />
 
     <v-btn
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 8d04a5258c..4324a9b195 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -61,8 +61,8 @@ Listing all given activity schedule entries in a calendar view.
         <PicassoEntry
           :schedule-entry="event"
           :editable="editable"
-          @startResize="startResize(event)"
-          @finishEdit="reloadScheduleEntries"
+          @start-resize="startResize(event)"
+          @finish-edit="reloadScheduleEntries"
         />
       </template>
     </v-calendar>
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 2c0c432104..f1091ee1b4 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -32,7 +32,7 @@
       v-if="!scheduleEntry.tmpEvent"
       ref="editDialog"
       :schedule-entry="scheduleEntry"
-      @activityUpdated="$emit('finishEdit')"
+      @activity-updated="$emit('finishEdit')"
       @error="$emit('finishEdit')"
     >
       <template #activator="{ on }">
@@ -256,7 +256,7 @@ export default {
     this.scrollHeight = this.$el.scrollHeight
     window.addEventListener('resize', this.onResize)
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('resize', this.onResize)
   },
   methods: {
diff --git a/frontend/src/views/activity/SideBarProgram.vue b/frontend/src/views/activity/SideBarProgram.vue
index c38e8f427f..5ed3e62db9 100644
--- a/frontend/src/views/activity/SideBarProgram.vue
+++ b/frontend/src/views/activity/SideBarProgram.vue
@@ -9,7 +9,7 @@
           :camp="camp"
           :day-selection="daySelection"
           :loading="slotProps.loading"
-          @changeDay="selectedDay = $event"
+          @change-day="selectedDay = $event"
         />
         <v-divider />
         <v-skeleton-loader v-if="slotProps.loading" class="mx-1" type="list-item@6" />
diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
index 7fc203811f..faf229e2b8 100644
--- a/frontend/src/views/camp/CampProgram.vue
+++ b/frontend/src/views/camp/CampProgram.vue
@@ -43,8 +43,8 @@ Show all activity schedule entries of a single period.
             :start="period().start"
             :end="period().end"
             :editable="editMode"
-            @newEntry="slotProps.on.newEntry"
-            @unlockReminder="showUnlockReminder"
+            @new-entry="slotProps.on.newEntry"
+            @unlock-reminder="showUnlockReminder"
           />
         </template>
       </template>
diff --git a/frontend/vue.config.js b/frontend/vue.config.cjs
similarity index 100%
rename from frontend/vue.config.js
rename to frontend/vue.config.cjs

From e24c6f3a1b7da8cc37676571701934fc0030d512 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 19:19:38 +0100
Subject: [PATCH 10/21] supress or fix all warnings / hello world

---
 frontend/package-lock.json                    | 95 +++++++++++++------
 frontend/package.json                         |  5 +-
 frontend/src/App.vue                          | 13 +--
 .../activity/ActivityResponsibles.vue         |  2 +-
 .../src/components/activity/ContentNode.vue   |  2 +-
 .../activity/DraggableContentNodes.vue        |  2 +-
 .../src/components/activity/ScheduleEntry.vue |  2 +-
 .../src/components/buttons/ButtonBack.vue     |  2 +-
 .../src/components/buttons/ButtonContinue.vue |  2 +-
 .../src/components/buttons/ButtonDelete.vue   |  6 +-
 .../src/components/buttons/ButtonEdit.vue     |  4 +-
 .../src/components/buttons/IconButton.vue     |  2 +-
 .../campAdmin/CampActivityProgressLabels.vue  |  2 +-
 .../components/campAdmin/CampCategories.vue   |  2 +-
 .../campAdmin/CampMaterialLists.vue           |  2 +-
 .../src/components/campAdmin/CampPeriods.vue  |  2 +-
 .../src/components/campCreate/CampCreate.vue  |  4 +-
 .../PromptCollaboratorDeactivate.vue          |  2 +-
 .../src/components/dashboard/ActivityRow.vue  |  4 +-
 .../components/dialog/DialogBottomSheet.vue   |  2 +-
 frontend/src/components/dialog/DialogForm.vue |  6 +-
 .../src/components/form/api/ApiCheckbox.vue   |  2 +-
 .../src/components/form/api/ApiDatePicker.vue |  2 +-
 .../src/components/form/api/ApiSelect.vue     |  2 +-
 .../src/components/form/base/BasePicker.vue   |  2 +-
 .../src/components/generic/DetailPane.vue     |  2 +-
 .../components/generic/IconWithTooltip.vue    |  4 +-
 .../src/components/layout/AuthContainer.vue   |  8 +-
 .../src/components/layout/ContentCard.vue     |  6 +-
 .../material/MaterialCreateItem.vue           |  2 +-
 .../material/ScheduleEntryLinks.vue           |  6 +-
 .../src/components/navigation/SideBar.vue     |  8 +-
 .../src/components/navigation/UserMeta.vue    |  2 +-
 .../print/configurator/PagesConfig.vue        |  2 +-
 .../components/program/ScheduleEntries.vue    |  4 +-
 .../components/program/picasso/Picasso.vue    |  8 +-
 frontend/src/plugins/auth.js                  | 61 ++++++------
 frontend/src/plugins/i18n/index.js            |  1 -
 frontend/src/plugins/store/lang.js            |  1 -
 frontend/src/plugins/vuetify.js               |  7 +-
 frontend/src/router.js                        |  1 -
 frontend/src/views/Camps.vue                  |  2 +-
 frontend/src/views/NavigationDefault.vue      |  2 +-
 frontend/src/views/PageNotFound.vue           |  4 +-
 frontend/src/views/Profile.vue                |  2 +-
 frontend/src/views/activity/Category.vue      |  4 +-
 frontend/src/views/auth/Login.vue             | 16 ++--
 frontend/src/views/auth/Register.vue          |  2 +-
 frontend/src/views/auth/ResetPassword.vue     |  8 +-
 .../src/views/auth/ResetPasswordRequest.vue   |  4 +-
 frontend/src/views/camp/Admin.vue             |  2 +-
 frontend/src/views/camp/Invitation.vue        |  8 +-
 .../views/camp/navigation/NavigationCamp.vue  |  2 +-
 .../camp/navigation/desktop/NavTopbar.vue     | 10 +-
 frontend/vite.config.js                       |  4 -
 55 files changed, 200 insertions(+), 164 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eee2d7f8ea..260a56d5d0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1943,6 +1943,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -1958,6 +1959,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1973,6 +1975,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1988,6 +1991,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -2003,6 +2007,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -2018,6 +2023,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -2033,6 +2039,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -2048,6 +2055,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -2063,6 +2071,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2078,6 +2087,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2093,6 +2103,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2108,6 +2119,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2123,6 +2135,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2138,6 +2151,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2153,6 +2167,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2168,6 +2183,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2183,6 +2199,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2198,6 +2215,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -2213,6 +2231,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -2228,6 +2247,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -2243,6 +2263,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2258,6 +2279,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2273,6 +2295,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2601,7 +2624,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2615,7 +2638,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2624,7 +2647,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2633,7 +2656,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
       "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -2648,7 +2671,7 @@
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -2971,6 +2994,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -2983,6 +3007,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -2995,6 +3020,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3007,6 +3033,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3019,6 +3046,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3031,6 +3059,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3043,6 +3072,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3055,6 +3085,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3067,6 +3098,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3079,6 +3111,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3091,6 +3124,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3103,6 +3137,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3115,6 +3150,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -4191,7 +4227,7 @@
       "version": "20.10.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz",
       "integrity": "sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -5625,7 +5661,7 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5811,7 +5847,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -6210,7 +6246,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6312,7 +6348,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -6396,7 +6432,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/bytes": {
       "version": "3.0.0",
@@ -6655,7 +6691,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6682,7 +6718,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -9439,7 +9475,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9702,6 +9738,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -10469,7 +10506,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
       "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -10614,7 +10651,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -10719,7 +10756,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10763,7 +10800,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -10820,7 +10857,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -12820,7 +12857,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13548,7 +13585,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -14956,7 +14993,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -15480,7 +15517,7 @@
       "version": "1.69.6",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.6.tgz",
       "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -15938,7 +15975,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15955,7 +15992,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -16510,7 +16547,7 @@
       "version": "5.26.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz",
       "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -16580,7 +16617,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
@@ -16763,7 +16800,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -16996,7 +17033,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
diff --git a/frontend/package.json b/frontend/package.json
index 894fd12640..85e2b8fb08 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -135,7 +135,8 @@
       "jest": true
     },
     "extends": [
-      "plugin:vue/vue3-recommended",
+      "plugin:vue/base",
+      "plugin:vuetify/base",
       "eslint:recommended",
       "plugin:prettier/recommended",
       "@vue/eslint-config-prettier"
@@ -160,7 +161,7 @@
         }
       ],
       "vue/no-mutating-props": [
-        "error",
+        "off",
         {
           "shallowOnly": false
         }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 61084c3cba..d48e4a7571 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,16 +1,17 @@
 <template>
   <v-app>
-    <router-view name="navigation" />
+    HELLO WORLD!
+    <!-- <router-view name="navigation" />
 
-    <router-view name="aside" />
+    <router-view name="aside" /> -->
 
     <!-- main content -->
-    <v-main>
+    <!-- <v-main>
       <router-view />
-    </v-main>
+    </v-main> -->
 
     <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.mdAndUp" app color="grey lighten-5">
+    <!-- <v-footer v-if="$vuetify.display.mdAndUp" app color="grey lighten-5">
       <small
         >eCamp
         <a v-if="version" :href="versionLink" target="_blank">
@@ -20,7 +21,7 @@
       >
       <v-spacer />
       <language-switcher v-if="isDev" />
-    </v-footer>
+    </v-footer> -->
   </v-app>
 </template>
 
diff --git a/frontend/src/components/activity/ActivityResponsibles.vue b/frontend/src/components/activity/ActivityResponsibles.vue
index 8a297b2f0f..9039481a3a 100644
--- a/frontend/src/components/activity/ActivityResponsibles.vue
+++ b/frontend/src/components/activity/ActivityResponsibles.vue
@@ -1,6 +1,7 @@
 <template>
   <e-select
     v-model="selectedCampCollaborations"
+    v-bind="$attrs"
     :items="availableCampCollaborations"
     :loading="isSaving || isLoading ? 'secondary' : false"
     :name="$tc('entity.activity.fields.responsible')"
@@ -12,7 +13,6 @@
     chips
     deletable-chips
     small-chips
-    v-bind="$attrs"
     @input="onInput"
   >
     <template #selection="{ item }">
diff --git a/frontend/src/components/activity/ContentNode.vue b/frontend/src/components/activity/ContentNode.vue
index 422ffc5a5e..6e785376c2 100644
--- a/frontend/src/components/activity/ContentNode.vue
+++ b/frontend/src/components/activity/ContentNode.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    v-bind="$attrs"
     :is="contentNode.contentTypeName"
     v-if="!contentNode.loading"
     class="content-node"
@@ -8,7 +9,6 @@
     :layout-mode="layoutMode"
     :draggable="draggable"
     :disabled="disabled"
-    v-bind="$attrs"
   />
 </template>
 
diff --git a/frontend/src/components/activity/DraggableContentNodes.vue b/frontend/src/components/activity/DraggableContentNodes.vue
index 833e498859..f6f357e2aa 100644
--- a/frontend/src/components/activity/DraggableContentNodes.vue
+++ b/frontend/src/components/activity/DraggableContentNodes.vue
@@ -84,7 +84,7 @@ export default {
       return keyBy(this.allContentNodes().items, 'id')
     },
     draggingEnabled() {
-      return this.layoutMode && this.$vuetify.breakpoint.mdAndUp && !this.disabled
+      return this.layoutMode && this.$vuetify.display.mdAndUp && !this.disabled
     },
     contentNodeIds() {
       return sortBy(
diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
index 6a628460fa..e264125508 100644
--- a/frontend/src/components/activity/ScheduleEntry.vue
+++ b/frontend/src/components/activity/ScheduleEntry.vue
@@ -86,7 +86,7 @@ Displays a single scheduleEntry
         outlined
         @click="layoutMode = false"
       >
-        <template v-if="$vuetify.breakpoint.smAndUp">
+        <template v-if="$vuetify.display.smAndUp">
           <v-icon left>mdi-file-document-edit-outline</v-icon>
           {{ $tc('components.activity.scheduleEntry.backToContents') }}
         </template>
diff --git a/frontend/src/components/buttons/ButtonBack.vue b/frontend/src/components/buttons/ButtonBack.vue
index dc7b525b27..f6c12e41fb 100644
--- a/frontend/src/components/buttons/ButtonBack.vue
+++ b/frontend/src/components/buttons/ButtonBack.vue
@@ -1,8 +1,8 @@
 <template>
   <v-btn
+    v-bind="$attrs"
     :icon="!visibleLabel"
     :aria-label="$tc('global.button.back')"
-    v-bind="$attrs"
     @click="$router.go(-1)"
   >
     <v-icon :left="visibleLabel">mdi-arrow-left</v-icon>
diff --git a/frontend/src/components/buttons/ButtonContinue.vue b/frontend/src/components/buttons/ButtonContinue.vue
index ad86e730bd..8843e02fea 100644
--- a/frontend/src/components/buttons/ButtonContinue.vue
+++ b/frontend/src/components/buttons/ButtonContinue.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn color="primary" v-bind="$attrs" v-on="$listeners">
+  <v-btn v-bind="$attrs" color="primary" v-on="$listeners">
     {{ $tc('global.button.continue') }}
   </v-btn>
 </template>
diff --git a/frontend/src/components/buttons/ButtonDelete.vue b/frontend/src/components/buttons/ButtonDelete.vue
index 5b8ea48391..9a017cabf1 100644
--- a/frontend/src/components/buttons/ButtonDelete.vue
+++ b/frontend/src/components/buttons/ButtonDelete.vue
@@ -9,10 +9,8 @@
     v-on="$listeners"
   >
     <v-icon v-if="iconOnly">{{ icon }}</v-icon>
-    <v-icon v-else-if="!text" :left="$vuetify.breakpoint.smAndUp">{{ icon }}</v-icon>
-    <v-icon v-if="!iconOnly && text" :left="$vuetify.breakpoint.smAndUp">{{
-      icon
-    }}</v-icon>
+    <v-icon v-else-if="!text" :left="$vuetify.display.smAndUp">{{ icon }}</v-icon>
+    <v-icon v-if="!iconOnly && text" :left="$vuetify.display.smAndUp">{{ icon }}</v-icon>
 
     <span v-if="!iconOnly" class="d-none d-sm-block">
       <slot>{{ $tc('global.button.delete') }}</slot>
diff --git a/frontend/src/components/buttons/ButtonEdit.vue b/frontend/src/components/buttons/ButtonEdit.vue
index fb45409904..fac1f09488 100644
--- a/frontend/src/components/buttons/ButtonEdit.vue
+++ b/frontend/src/components/buttons/ButtonEdit.vue
@@ -1,10 +1,10 @@
 <template>
   <IconButton
+    v-bind="$attrs"
     class="px-3 px-sm-4"
     color="primary"
     :icon="icon"
-    :hide-label="hideLabel || $vuetify.breakpoint.xsOnly"
-    v-bind="$attrs"
+    :hide-label="hideLabel || $vuetify.display.xsOnly"
     v-on="$listeners"
   >
     <slot>{{ $tc('global.button.edit') }}</slot>
diff --git a/frontend/src/components/buttons/IconButton.vue b/frontend/src/components/buttons/IconButton.vue
index 12a73b5d38..b941009aa5 100644
--- a/frontend/src/components/buttons/IconButton.vue
+++ b/frontend/src/components/buttons/IconButton.vue
@@ -1,9 +1,9 @@
 <template>
   <v-btn
+    v-bind="$attrs"
     class="px-3 px-sm-4"
     min-width="0"
     :color="color"
-    v-bind="$attrs"
     v-on="$listeners"
   >
     <v-icon v-if="!iconLast" :left="!hideLabel" size="150%" :class="{ animate: animate }">
diff --git a/frontend/src/components/campAdmin/CampActivityProgressLabels.vue b/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
index 1949849394..e29a77152e 100644
--- a/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
+++ b/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
@@ -8,7 +8,7 @@
             <button-add
               color="secondary"
               text
-              :hide-label="$vuetify.breakpoint.xsOnly"
+              :hide-label="$vuetify.display.xsOnly"
               class="my-n2"
               v-on="on"
             >
diff --git a/frontend/src/components/campAdmin/CampCategories.vue b/frontend/src/components/campAdmin/CampCategories.vue
index 4a080e9a5d..3817cef375 100644
--- a/frontend/src/components/campAdmin/CampCategories.vue
+++ b/frontend/src/components/campAdmin/CampCategories.vue
@@ -8,7 +8,7 @@
             <button-add
               color="secondary"
               text
-              :hide-label="$vuetify.breakpoint.xsOnly"
+              :hide-label="$vuetify.display.xsOnly"
               class="my-n2"
               v-on="on"
             >
diff --git a/frontend/src/components/campAdmin/CampMaterialLists.vue b/frontend/src/components/campAdmin/CampMaterialLists.vue
index d98b17e069..6136bcd5c3 100644
--- a/frontend/src/components/campAdmin/CampMaterialLists.vue
+++ b/frontend/src/components/campAdmin/CampMaterialLists.vue
@@ -8,7 +8,7 @@
             <button-add
               color="secondary"
               text
-              :hide-label="$vuetify.breakpoint.xsOnly"
+              :hide-label="$vuetify.display.xsOnly"
               class="my-n1"
               v-on="on"
             >
diff --git a/frontend/src/components/campAdmin/CampPeriods.vue b/frontend/src/components/campAdmin/CampPeriods.vue
index 5151c1b389..b5b52fcac7 100644
--- a/frontend/src/components/campAdmin/CampPeriods.vue
+++ b/frontend/src/components/campAdmin/CampPeriods.vue
@@ -15,7 +15,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
               color="secondary"
               text
               class="my-n2"
-              :hide-label="$vuetify.breakpoint.xsOnly"
+              :hide-label="$vuetify.display.xsOnly"
               v-on="on"
             >
               {{ $tc('components.campAdmin.campPeriods.createPeriod') }}
diff --git a/frontend/src/components/campCreate/CampCreate.vue b/frontend/src/components/campCreate/CampCreate.vue
index 64ca7ba151..9ffb0b7495 100644
--- a/frontend/src/components/campCreate/CampCreate.vue
+++ b/frontend/src/components/campCreate/CampCreate.vue
@@ -1,7 +1,7 @@
 <template>
   <v-stepper v-model="step" flat>
     <v-stepper-header class="elevation-0">
-      <v-spacer v-if="$vuetify.breakpoint.smAndUp" />
+      <v-spacer v-if="$vuetify.display.smAndUp" />
       <v-stepper-step :complete="step > 1" :step="1" class="px-4">
         {{ $tc('components.campCreate.campCreate.steps.infos') }}
       </v-stepper-step>
@@ -9,7 +9,7 @@
       <v-stepper-step :complete="step > 2" :step="2" class="px-4">
         {{ $tc('components.campCreate.campCreate.steps.template') }}
       </v-stepper-step>
-      <v-spacer v-if="$vuetify.breakpoint.smAndUp" />
+      <v-spacer v-if="$vuetify.display.smAndUp" />
     </v-stepper-header>
     <v-divider />
     <v-stepper-items>
diff --git a/frontend/src/components/collaborator/PromptCollaboratorDeactivate.vue b/frontend/src/components/collaborator/PromptCollaboratorDeactivate.vue
index dcb3e65de5..86e3cccddf 100644
--- a/frontend/src/components/collaborator/PromptCollaboratorDeactivate.vue
+++ b/frontend/src/components/collaborator/PromptCollaboratorDeactivate.vue
@@ -1,6 +1,7 @@
 <template>
   <PopoverPrompt
     v-model="showDialog"
+    v-bind="$attrs"
     type="error"
     :error="error"
     :submit-action="deactivateUser"
@@ -10,7 +11,6 @@
     submit-icon="mdi-cancel"
     cancel-icon=""
     :cancel-action="close"
-    v-bind="$attrs"
   >
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 2bf9445418..0a4696a1a4 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -54,7 +54,7 @@
         {{ title }}
       </router-link>
 
-      <span v-if="$vuetify.breakpoint.mdAndUp" class="e-subtitle e-subtitle--smaller">
+      <span v-if="$vuetify.display.mdAndUp" class="e-subtitle e-subtitle--smaller">
         {{ progressLabel }}
       </span>
 
@@ -63,7 +63,7 @@
         <span class="e-subtitle">{{ location }}</span>
       </template>
 
-      <template v-if="!$vuetify.breakpoint.mdAndUp">
+      <template v-if="!$vuetify.display.mdAndUp">
         <br />
         <span class="e-subtitle e-subtitle--smaller">
           {{ progressLabel }}
diff --git a/frontend/src/components/dialog/DialogBottomSheet.vue b/frontend/src/components/dialog/DialogBottomSheet.vue
index 3e1275d514..1ff176d4fe 100644
--- a/frontend/src/components/dialog/DialogBottomSheet.vue
+++ b/frontend/src/components/dialog/DialogBottomSheet.vue
@@ -1,8 +1,8 @@
 <template>
   <v-bottom-sheet
+    v-bind="$attrs"
     content-class="ec-dialog-form"
     eager
-    v-bind="$attrs"
     :value="value"
     v-on="$listeners"
     @input="onInput"
diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
index e301fec453..c07efe90da 100644
--- a/frontend/src/components/dialog/DialogForm.vue
+++ b/frontend/src/components/dialog/DialogForm.vue
@@ -1,9 +1,9 @@
 <template>
   <v-dialog
+    v-bind="$attrs"
     content-class="ec-dialog-form"
-    :fullscreen="$vuetify.breakpoint.xsOnly"
+    :fullscreen="$vuetify.display.xsOnly"
     eager
-    v-bind="$attrs"
     :value="value"
     :max-width="maxWidth"
     v-on="$listeners"
@@ -24,7 +24,7 @@
             {{ title }}
           </v-toolbar-title>
           <v-btn
-            v-if="$vuetify.breakpoint.smAndUp && cancelAction != null"
+            v-if="$vuetify.display.smAndUp && cancelAction != null"
             icon
             class="ml-auto"
             :title="$tc('global.button.cancel')"
diff --git a/frontend/src/components/form/api/ApiCheckbox.vue b/frontend/src/components/form/api/ApiCheckbox.vue
index 0672564e46..534c2ba858 100644
--- a/frontend/src/components/form/api/ApiCheckbox.vue
+++ b/frontend/src/components/form/api/ApiCheckbox.vue
@@ -7,8 +7,8 @@ Displays a field as a e-checkbox + write access via API wrapper
 <template>
   <api-wrapper v-slot="wrapper" v-bind="$props" separate-buttons v-on="$listeners">
     <e-checkbox
-      :value="wrapper.localValue"
       v-bind="$attrs"
+      :value="wrapper.localValue"
       :readonly="wrapper.readonly"
       :disabled="disabled"
       :error-messages="wrapper.errorMessages"
diff --git a/frontend/src/components/form/api/ApiDatePicker.vue b/frontend/src/components/form/api/ApiDatePicker.vue
index 6b1f23d45d..b9034a3dab 100644
--- a/frontend/src/components/form/api/ApiDatePicker.vue
+++ b/frontend/src/components/form/api/ApiDatePicker.vue
@@ -5,8 +5,8 @@ Displays a field as a date picker + write access via API wrapper
 <template>
   <api-wrapper v-slot="wrapper" v-bind="$props" v-on="$listeners">
     <e-date-picker
-      :value="wrapper.localValue || ''"
       v-bind="$attrs"
+      :value="wrapper.localValue || ''"
       :readonly="wrapper.readonly"
       :disabled="disabled"
       :loading="wrapper.isSaving || wrapper.isLoading ? 'secondary' : false"
diff --git a/frontend/src/components/form/api/ApiSelect.vue b/frontend/src/components/form/api/ApiSelect.vue
index 282ce33f89..d80c52155c 100644
--- a/frontend/src/components/form/api/ApiSelect.vue
+++ b/frontend/src/components/form/api/ApiSelect.vue
@@ -10,8 +10,8 @@ Displays a field as a e-select + write access via API wrapper
     v-on="$listeners"
   >
     <e-select
-      :value="wrapper.localValue"
       v-bind="$attrs"
+      :value="wrapper.localValue"
       :readonly="wrapper.readonly"
       :disabled="disabled"
       :error-messages="wrapper.errorMessages"
diff --git a/frontend/src/components/form/base/BasePicker.vue b/frontend/src/components/form/base/BasePicker.vue
index 75e14c8192..2096b224d3 100644
--- a/frontend/src/components/form/base/BasePicker.vue
+++ b/frontend/src/components/form/base/BasePicker.vue
@@ -16,6 +16,7 @@ Displays a field as a picker (can be used with v-model)
     >
       <template #activator="{ on }">
         <e-text-field
+          v-bind="$attrs"
           :id="id"
           ref="textField"
           :value="fieldValue"
@@ -23,7 +24,6 @@ Displays a field as a picker (can be used with v-model)
           :input-class="inputClass"
           :name="name"
           :label="label"
-          v-bind="$attrs"
           :error-messages="combinedErrorMessages"
           :filled="filled"
           :disabled="disabled"
diff --git a/frontend/src/components/generic/DetailPane.vue b/frontend/src/components/generic/DetailPane.vue
index 4eb1f460cf..76ca5b28fc 100644
--- a/frontend/src/components/generic/DetailPane.vue
+++ b/frontend/src/components/generic/DetailPane.vue
@@ -1,6 +1,6 @@
 <template>
   <DialogBottomSheet
-    v-if="$vuetify.breakpoint.smAndDown"
+    v-if="$vuetify.display.smAndDown"
     v-model:saving-override="isSaving"
     :value="value"
     v-bind="{ ...$props, ...$attrs }"
diff --git a/frontend/src/components/generic/IconWithTooltip.vue b/frontend/src/components/generic/IconWithTooltip.vue
index 6ebfc0f2af..ac487913ea 100644
--- a/frontend/src/components/generic/IconWithTooltip.vue
+++ b/frontend/src/components/generic/IconWithTooltip.vue
@@ -44,12 +44,12 @@ export default {
   },
   methods: {
     click() {
-      if (this.$vuetify.breakpoint.xsOnly) {
+      if (this.$vuetify.display.xsOnly) {
         this.showTooltip = !this.showTooltip
       }
     },
     mouseenter() {
-      if (!this.$vuetify.breakpoint.xsOnly) {
+      if (!this.$vuetify.display.xsOnly) {
         this.showTooltip = true
       }
     },
diff --git a/frontend/src/components/layout/AuthContainer.vue b/frontend/src/components/layout/AuthContainer.vue
index 8c5a2a1a8a..4a793fa6e4 100644
--- a/frontend/src/components/layout/AuthContainer.vue
+++ b/frontend/src/components/layout/AuthContainer.vue
@@ -6,17 +6,17 @@
       md="5"
       lg="4"
       class="pa-0 pa-sm-4 pb-sm-12"
-      :class="{ 'fill-height': $vuetify.breakpoint.xsOnly }"
+      :class="{ 'fill-height': $vuetify.display.xsOnly }"
     >
       <v-card
         class="pa-8 sso--card"
-        :tile="$vuetify.breakpoint.xsOnly"
-        :class="{ 'fill-min-height': $vuetify.breakpoint.xsOnly }"
+        :tile="$vuetify.display.xsOnly"
+        :class="{ 'fill-min-height': $vuetify.display.xsOnly }"
       >
         <slot />
       </v-card>
     </v-col>
-    <span v-if="$vuetify.breakpoint.smAndUp" class="photo_credits ma-3 pa-1">
+    <span v-if="$vuetify.display.smAndUp" class="photo_credits ma-3 pa-1">
       {{ $tc('components.layout.authContainer.photoCredits') }}
     </span>
   </v-container>
diff --git a/frontend/src/components/layout/ContentCard.vue b/frontend/src/components/layout/ContentCard.vue
index cc24916e30..224704aa83 100644
--- a/frontend/src/components/layout/ContentCard.vue
+++ b/frontend/src/components/layout/ContentCard.vue
@@ -6,18 +6,18 @@ Displays the content wrapped inside a card.
   <v-card
     :max-width="maxWidth"
     width="100%"
-    :tile="$vuetify.breakpoint.xsOnly"
+    :tile="$vuetify.display.xsOnly"
     class="mx-auto"
   >
     <v-toolbar
-      v-if="back || !$vuetify.breakpoint.mdAndUp || toolbar"
+      v-if="back || !$vuetify.display.mdAndUp || toolbar"
       class="ec-content-card__toolbar"
       elevation="0"
       dense
     >
       <v-toolbar-items>
         <button-back
-          v-if="back || (!$vuetify.breakpoint.mdAndUp && !!$route.query.isDetail)"
+          v-if="back || (!$vuetify.display.mdAndUp && !!$route.query.isDetail)"
           class="ml-n4"
         />
       </v-toolbar-items>
diff --git a/frontend/src/components/material/MaterialCreateItem.vue b/frontend/src/components/material/MaterialCreateItem.vue
index 26c35a5e80..99cc5477cc 100644
--- a/frontend/src/components/material/MaterialCreateItem.vue
+++ b/frontend/src/components/material/MaterialCreateItem.vue
@@ -58,7 +58,7 @@
           {{ $tc('components.material.materialCreateItem.noMaterialListAvailable') }}
         </p>
         <v-btn :to="campRoute(camp, 'admin')">
-          <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-cogs</v-icon>
+          <v-icon :left="$vuetify.display.mdAndUp">mdi-cogs</v-icon>
           {{ $tc('components.material.materialCreateItem.campSettingsButton') }}
         </v-btn>
       </div>
diff --git a/frontend/src/components/material/ScheduleEntryLinks.vue b/frontend/src/components/material/ScheduleEntryLinks.vue
index 46b0fca261..316ee2c783 100644
--- a/frontend/src/components/material/ScheduleEntryLinks.vue
+++ b/frontend/src/components/material/ScheduleEntryLinks.vue
@@ -6,9 +6,7 @@
     class="e-title-link tabular-nums"
   >
     <CategoryChip dense :category="activity.category()" />&thinsp;{{
-      $vuetify.breakpoint.smAndUp
-        ? `${activity.title}: ${items[0].number}`
-        : items[0].number
+      $vuetify.display.smAndUp ? `${activity.title}: ${items[0].number}` : items[0].number
     }}
   </router-link>
   <span v-else class="d-inline-flex flex-sm-wrap gap-1 align-center py-sm-1">
@@ -18,7 +16,7 @@
         :to="scheduleEntryRoute(items[0])"
         dense
         :category="activity.category()"
-      />{{ $vuetify.breakpoint.smAndUp ? `\u2009${activity.title}:` : '' }}
+      />{{ $vuetify.display.smAndUp ? `\u2009${activity.title}:` : '' }}
     </span>
     <span class="d-inline-grid d-sm-inline-flex flex-wrap gap-1"
       ><router-link
diff --git a/frontend/src/components/navigation/SideBar.vue b/frontend/src/components/navigation/SideBar.vue
index a10a2efb47..b1ce2b3c6e 100644
--- a/frontend/src/components/navigation/SideBar.vue
+++ b/frontend/src/components/navigation/SideBar.vue
@@ -1,14 +1,14 @@
 <template>
   <v-navigation-drawer
-    v-if="$vuetify.breakpoint.smAndUp"
+    v-if="$vuetify.display.smAndUp"
     v-model="drawer"
     v-model:mini-variant="mini"
     app
     clipped
     permanent
-    :temporary="!mini && !$vuetify.breakpoint.mdAndUp"
+    :temporary="!mini && !$vuetify.display.mdAndUp"
     mini-variant-width="40"
-    :width="$vuetify.breakpoint.xl || (!mini && !$vuetify.breakpoint.mdAndUp) ? 350 : 256"
+    :width="$vuetify.display.xl || (!mini && !$vuetify.display.mdAndUp) ? 350 : 256"
     :color="!title || mini ? 'blue-grey lighten-4' : null"
   >
     <v-list class="py-0">
@@ -46,7 +46,7 @@ export default {
     mini() {
       return this.overrideExpanded !== null
         ? !this.overrideExpanded
-        : !this.$vuetify.breakpoint.mdAndUp
+        : !this.$vuetify.display.mdAndUp
     },
   },
 }
diff --git a/frontend/src/components/navigation/UserMeta.vue b/frontend/src/components/navigation/UserMeta.vue
index 8a50d20089..92764bb7b9 100644
--- a/frontend/src/components/navigation/UserMeta.vue
+++ b/frontend/src/components/navigation/UserMeta.vue
@@ -6,7 +6,7 @@
     dark
     right
     :content-class="
-      ['ec-usermenu', $vuetify.breakpoint.xsOnly && 'rounded-lg mt-2'].join(' ')
+      ['ec-usermenu', $vuetify.display.xsOnly && 'rounded-lg mt-2'].join(' ')
     "
     transition="slide-y-transition"
     :close-on-content-click="false"
diff --git a/frontend/src/components/print/configurator/PagesConfig.vue b/frontend/src/components/print/configurator/PagesConfig.vue
index 8344dec028..bb5331af6f 100644
--- a/frontend/src/components/print/configurator/PagesConfig.vue
+++ b/frontend/src/components/print/configurator/PagesConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="$vuetify.breakpoint.mdAndUp" class="e-pages-config__wrapper">
+  <div v-if="$vuetify.display.mdAndUp" class="e-pages-config__wrapper">
     <div
       class="e-pages-config"
       :class="{
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
index b643feba5d..fc9a96f242 100644
--- a/frontend/src/components/program/ScheduleEntries.vue
+++ b/frontend/src/components/program/ScheduleEntries.vue
@@ -10,8 +10,8 @@
 
     <v-btn
       v-if="showButton"
-      :fixed="$vuetify.breakpoint.mdAndUp"
-      :absolute="!$vuetify.breakpoint.mdAndUp"
+      :fixed="$vuetify.display.mdAndUp"
+      :absolute="!$vuetify.display.mdAndUp"
       dark
       fab
       style="z-index: 3"
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 4324a9b195..c2a58b0a68 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -295,9 +295,9 @@ export default {
       return this.period.camp()
     },
     computedIntervalHeight() {
-      return this.intervalHeight ?? this.$vuetify.breakpoint.xsOnly
-        ? (1.3 * (this.$vuetify.breakpoint.height - 140)) / this.intervalCount
-        : 1.3 * Math.max((this.$vuetify.breakpoint.height - 204) / this.intervalCount, 32)
+      return this.intervalHeight ?? this.$vuetify.display.xsOnly
+        ? (1.3 * (this.$vuetify.display.height - 140)) / this.intervalCount
+        : 1.3 * Math.max((this.$vuetify.display.height - 204) / this.intervalCount, 32)
     },
   },
   mounted() {
@@ -333,7 +333,7 @@ export default {
         .format(this.$tc('global.datetime.hourLong'))
     },
     dayFormat(day) {
-      if (this.$vuetify.breakpoint.smAndDown) {
+      if (this.$vuetify.display.smAndDown) {
         return this.$date.utc(day.date).format(this.$tc('global.datetime.dateShort'))
       } else {
         return this.$date.utc(day.date).format(this.$tc('global.datetime.dateLong'))
diff --git a/frontend/src/plugins/auth.js b/frontend/src/plugins/auth.js
index 430714db87..e1089ae153 100644
--- a/frontend/src/plugins/auth.js
+++ b/frontend/src/plugins/auth.js
@@ -38,13 +38,15 @@ function getJWTExpirationTimestamp() {
 }
 
 export function isLoggedIn() {
-  const isLoggedIn = Date.now() < getJWTExpirationTimestamp()
+  return false
 
-  if (isLoggedIn) {
-    loadUser()
-  }
+  // const isLoggedIn = Date.now() < getJWTExpirationTimestamp()
+
+  // if (isLoggedIn) {
+  //   loadUser()
+  // }
 
-  return isLoggedIn
+  // return isLoggedIn
 }
 
 export function isAdmin() {
@@ -73,29 +75,32 @@ async function resetPassword(id, password, recaptchaToken) {
 }
 
 async function loadUser() {
-  if (!getJWTPayloadFromCookie()) {
-    // store.commit('logout')
-    return null
-  }
-
-  try {
-    const user = await apiStore.get(parseJWTPayload(getJWTPayloadFromCookie()).user)._meta
-      .load
-    // store.commit('login', user)
-    return user
-  } catch (e) {
-    if (e.response && [401, 403, 404].includes(e.response.status)) {
-      // 401 means no complete token was submitted, so we may be missing the JWT signature cookie
-      // 403 means we can theoretically interact in some way with the user, but apparently not read it
-      // 404 means the user doesn't exist or we don't have access to it
-      // Either way, we aren't allowed to access the user from the token, so it's best to ask the user
-      // to log in again.
-      auth.logout()
-      return null
-    }
-
-    throw e
-  }
+  // TODO: remove
+  return null
+
+  // if (!getJWTPayloadFromCookie()) {
+  //   // store.commit('logout')
+  //   return null
+  // }
+
+  // try {
+  //   const user = await apiStore.get(parseJWTPayload(getJWTPayloadFromCookie()).user)._meta
+  //     .load
+  //   // store.commit('login', user)
+  //   return user
+  // } catch (e) {
+  //   if (e.response && [401, 403, 404].includes(e.response.status)) {
+  //     // 401 means no complete token was submitted, so we may be missing the JWT signature cookie
+  //     // 403 means we can theoretically interact in some way with the user, but apparently not read it
+  //     // 404 means the user doesn't exist or we don't have access to it
+  //     // Either way, we aren't allowed to access the user from the token, so it's best to ask the user
+  //     // to log in again.
+  //     auth.logout()
+  //     return null
+  //   }
+
+  //   throw e
+  // }
 }
 
 async function register(data) {
diff --git a/frontend/src/plugins/i18n/index.js b/frontend/src/plugins/i18n/index.js
index 6ce636d950..f58863b077 100644
--- a/frontend/src/plugins/i18n/index.js
+++ b/frontend/src/plugins/i18n/index.js
@@ -1,4 +1,3 @@
-import Vue from '@vue/compat'
 import { createI18n } from 'vue-i18n'
 import deepmerge from 'deepmerge'
 
diff --git a/frontend/src/plugins/store/lang.js b/frontend/src/plugins/store/lang.js
index c4849e95e6..405c7065a9 100644
--- a/frontend/src/plugins/store/lang.js
+++ b/frontend/src/plugins/store/lang.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import axios from 'axios'
 import VueI18n from '@/plugins/i18n'
 import { dayjsLocaleMap } from '@/common/helpers/dayjs.js'
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 7a5d8d83e2..b9b7c17b43 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -14,9 +14,10 @@ import ResponsiveLayout from '@/assets/icons/ResponsiveLayout.svg'
 import ColumnLayout from '@/assets/icons/ColumnLayout.svg'
 import i18n from '@/plugins/i18n'
 import * as colors from 'vuetify/util/colors'
+import { apiPropsMixin } from '@/mixins/apiPropsMixin'
 
 class VuetifyLoaderPlugin {
-  install(Vue) {
+  install(app) {
     const opts = {
       lang: {
         t: (key, ...params) => i18n.tc(key, 0, params),
@@ -44,7 +45,9 @@ class VuetifyLoaderPlugin {
       },
     }
 
-    vuetify = new createVuetify(opts)
+    vuetify = createVuetify(opts)
+
+    app.use(vuetify)
   }
 }
 
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 030704f0e2..b3de0fff48 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { slugify } from '@/plugins/slugify.js'
 import { isLoggedIn } from '@/plugins/auth'
diff --git a/frontend/src/views/Camps.vue b/frontend/src/views/Camps.vue
index 148c9a4675..3384846cd1 100644
--- a/frontend/src/views/Camps.vue
+++ b/frontend/src/views/Camps.vue
@@ -2,7 +2,7 @@
   <v-container fluid>
     <content-card :title="$tc('views.camps.title')" max-width="800" toolbar>
       <template #title-actions>
-        <UserMeta v-if="!$vuetify.breakpoint.mdAndUp" avatar-only btn-classes="mr-n4" />
+        <UserMeta v-if="!$vuetify.display.mdAndUp" avatar-only btn-classes="mr-n4" />
       </template>
       <v-list class="py-0">
         <template v-if="loading">
diff --git a/frontend/src/views/NavigationDefault.vue b/frontend/src/views/NavigationDefault.vue
index 017e0771c9..fe84e6cc76 100644
--- a/frontend/src/views/NavigationDefault.vue
+++ b/frontend/src/views/NavigationDefault.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app-bar
-    v-if="$vuetify.breakpoint.mdAndUp"
+    v-if="$vuetify.display.mdAndUp"
     app
     clipped-left
     color="blue-grey darken-4"
diff --git a/frontend/src/views/PageNotFound.vue b/frontend/src/views/PageNotFound.vue
index 653a582819..0758cf7705 100644
--- a/frontend/src/views/PageNotFound.vue
+++ b/frontend/src/views/PageNotFound.vue
@@ -3,12 +3,12 @@
     <div class="hill">
       <div class="d-flex absolute w-100 top-0 localnav">
         <ButtonBack
-          v-if="!$vuetify.breakpoint.mdAndUp && hasHistory"
+          v-if="!$vuetify.display.mdAndUp && hasHistory"
           visible-label
           text
           dark
         />
-        <UserMeta v-if="!$vuetify.breakpoint.mdAndUp" avatar-only />
+        <UserMeta v-if="!$vuetify.display.mdAndUp" avatar-only />
       </div>
       <ShootingStar class="shootingstar" />
       <TentNight class="tent" />
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 854d8c48ed..0fae86cce4 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -58,7 +58,7 @@
             {{ $tc('global.lokaliseMessage') }}
           </p>
           <v-btn
-            v-if="!$vuetify.breakpoint.mdAndUp"
+            v-if="!$vuetify.display.mdAndUp"
             class="mt-2"
             color="red"
             block
diff --git a/frontend/src/views/activity/Category.vue b/frontend/src/views/activity/Category.vue
index f42e425a07..65f3749fc0 100644
--- a/frontend/src/views/activity/Category.vue
+++ b/frontend/src/views/activity/Category.vue
@@ -13,14 +13,14 @@
 
       <template #title-actions>
         <v-btn v-if="!layoutMode" color="primary" outlined @click="layoutMode = true">
-          <template v-if="$vuetify.breakpoint.smAndUp">
+          <template v-if="$vuetify.display.smAndUp">
             <v-icon left>mdi-puzzle-edit-outline</v-icon>
             {{ $tc('views.activity.category.changeLayout') }}
           </template>
           <template v-else>{{ $tc('views.activity.category.layout') }}</template>
         </v-btn>
         <v-btn v-else color="success" outlined @click="layoutMode = false">
-          <template v-if="$vuetify.breakpoint.smAndUp">
+          <template v-if="$vuetify.display.smAndUp">
             <v-icon left>mdi-file-document-arrow-right-outline</v-icon>
             {{ $tc('views.activity.category.editContents') }}
           </template>
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index 657b8b9d2b..f876a6a7ff 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <auth-container>
-    <div v-if="isProdSuffix && $vuetify.breakpoint.smAndDown" class="text-center">
+    <div v-if="isProdSuffix && $vuetify.display.smAndDown" class="text-center">
       <v-icon size="64"> $vuetify.icons.ecamp </v-icon>
     </div>
 
@@ -35,7 +35,7 @@
         :label="$tc('views.auth.login.email')"
         name="email"
         append-icon="mdi-account-outline"
-        :dense="$vuetify.breakpoint.xsOnly"
+        :dense="$vuetify.display.xsOnly"
         type="email"
         autocomplete="username"
       />
@@ -47,7 +47,7 @@
         vee-rules="required"
         name="password"
         append-icon="mdi-lock-outline"
-        :dense="$vuetify.breakpoint.xsOnly"
+        :dense="$vuetify.display.xsOnly"
         type="password"
         autocomplete="current-password"
       />
@@ -67,7 +67,7 @@
         block
         :disabled="!(email && password) || authenticationInProgress"
         outlined
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         class="my-4"
       >
         <v-progress-circular v-if="authenticationInProgress" indeterminate size="24" />
@@ -83,7 +83,7 @@
       <v-btn
         dark
         color="#91697f"
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         text
         @click="loginPbsMiData"
       >
@@ -95,7 +95,7 @@
       <v-btn
         dark
         color="green"
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         text
         @click="loginCeviDB"
       >
@@ -107,7 +107,7 @@
       <v-btn
         dark
         color="blue"
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         text
         @click="loginJublaDB"
       >
@@ -119,7 +119,7 @@
       <v-btn
         dark
         color="blue-grey lighten-3"
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         text
         @click="loginGoogle"
       >
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index 2a36c1f91a..78ee20a9db 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -88,7 +88,7 @@
         :name="$tc('views.auth.register.acceptTermsOfService')"
       >
         <template #label>
-          <span style="hyphens: auto" :class="{ 'body-2': $vuetify.breakpoint.xsOnly }">
+          <span style="hyphens: auto" :class="{ 'body-2': $vuetify.display.xsOnly }">
             {{ $tc('views.auth.register.acceptTermsOfService') }}
           </span>
         </template>
diff --git a/frontend/src/views/auth/ResetPassword.vue b/frontend/src/views/auth/ResetPassword.vue
index 3c28fbc64e..dc5ac581df 100644
--- a/frontend/src/views/auth/ResetPassword.vue
+++ b/frontend/src/views/auth/ResetPassword.vue
@@ -30,7 +30,7 @@
         :label="$tc('entity.user.fields.email')"
         name="email"
         append-icon="mdi-at"
-        :dense="$vuetify.breakpoint.xsOnly"
+        :dense="$vuetify.display.xsOnly"
         type="email"
         autocomplete="username"
         readonly
@@ -43,7 +43,7 @@
         vee-rules="required|min:12|max:128"
         validate-on-blur
         append-icon="mdi-lock-outline"
-        :dense="$vuetify.breakpoint.xsOnly"
+        :dense="$vuetify.display.xsOnly"
         type="password"
         autocomplete="new-password"
         minlength="12"
@@ -68,7 +68,7 @@
         :name="$tc('views.auth.resetPassword.passwordConfirmation')"
         vee-rules="required|confirmed:password"
         validate-on-blur
-        :dense="$vuetify.breakpoint.xsOnly"
+        :dense="$vuetify.display.xsOnly"
         append-icon="mdi-lock-outline"
         type="password"
         autocomplete="new-password"
@@ -83,7 +83,7 @@
         :color="email ? 'blue darken-2' : 'blue lightne-4'"
         :disabled="!email"
         outlined
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         class="my-4"
       >
         <v-progress-circular v-if="status == 'reseting'" indeterminate size="24" />
diff --git a/frontend/src/views/auth/ResetPasswordRequest.vue b/frontend/src/views/auth/ResetPasswordRequest.vue
index 82e8201de8..86f0b61dfe 100644
--- a/frontend/src/views/auth/ResetPasswordRequest.vue
+++ b/frontend/src/views/auth/ResetPasswordRequest.vue
@@ -22,7 +22,7 @@
         name="email"
         vee-rules="email"
         append-icon="mdi-at"
-        :dense="$vuetify.breakpoint.xsOnly"
+        :dense="$vuetify.display.xsOnly"
         type="email"
         autocomplete="username"
         autofocus
@@ -33,7 +33,7 @@
         :color="email ? 'blue darken-2' : 'blue lightne-4'"
         :disabled="!email"
         outlined
-        :x-large="$vuetify.breakpoint.smAndUp"
+        :x-large="$vuetify.display.smAndUp"
         class="my-4"
       >
         <v-progress-circular v-if="status == 'sending'" indeterminate size="24" />
diff --git a/frontend/src/views/camp/Admin.vue b/frontend/src/views/camp/Admin.vue
index 1b55d9cb3d..7f0c2859b1 100644
--- a/frontend/src/views/camp/Admin.vue
+++ b/frontend/src/views/camp/Admin.vue
@@ -13,7 +13,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
           <camp-conditional-fields :camp="camp" :disabled="!isManager" />
 
           <v-btn
-            v-if="!$vuetify.breakpoint.mdAndUp"
+            v-if="!$vuetify.display.mdAndUp"
             :to="{ name: 'camp/collaborators', query: { isDetail: true } }"
           >
             {{ $tc('views.camp.admin.collaborators') }}
diff --git a/frontend/src/views/camp/Invitation.vue b/frontend/src/views/camp/Invitation.vue
index 7b56a60cd6..ef91083b18 100644
--- a/frontend/src/views/camp/Invitation.vue
+++ b/frontend/src/views/camp/Invitation.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="bg">
     <div class="hill">
-      <v-icon :size="$vuetify.breakpoint.smAndUp ? 300 : 200" class="tent"
+      <v-icon :size="$vuetify.display.smAndUp ? 300 : 200" class="tent"
         >$vuetify.icons.tentDay
       </v-icon>
       <div class="trees"></div>
       <div class="localnav justify-space-between d-flex w-100 py-2">
-        <ButtonBack v-if="!$vuetify.breakpoint.mdAndUp" text dark visible-label />
-        <UserMeta v-if="!$vuetify.breakpoint.mdAndUp" avatar-only />
+        <ButtonBack v-if="!$vuetify.display.mdAndUp" text dark visible-label />
+        <UserMeta v-if="!$vuetify.display.mdAndUp" avatar-only />
       </div>
       <h1 class="wood text-center align-self-end">
         <span class="rope"></span>
@@ -43,7 +43,7 @@
             colored-border
             color="primary"
             class="mb-1"
-            :icon="$vuetify.breakpoint.smAndUp ? 'mdi-information-outline' : false"
+            :icon="$vuetify.display.smAndUp ? 'mdi-information-outline' : false"
             type="info"
           >
             {{ $tc('views.camp.invitation.userAlreadyInCamp') }}
diff --git a/frontend/src/views/camp/navigation/NavigationCamp.vue b/frontend/src/views/camp/navigation/NavigationCamp.vue
index 16112f7a16..21249ace01 100644
--- a/frontend/src/views/camp/navigation/NavigationCamp.vue
+++ b/frontend/src/views/camp/navigation/NavigationCamp.vue
@@ -1,5 +1,5 @@
 <template>
-  <NavTopbar v-if="$vuetify.breakpoint.mdAndUp" :camp="camp" />
+  <NavTopbar v-if="$vuetify.display.mdAndUp" :camp="camp" />
   <div v-else>
     <NavBottombar :camp="camp" @input="open = $event" />
     <NavSidebar v-model="open" :camp="camp" />
diff --git a/frontend/src/views/camp/navigation/desktop/NavTopbar.vue b/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
index 3926649619..ea13eab6fa 100644
--- a/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
+++ b/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
@@ -4,29 +4,29 @@
 
     <v-toolbar-items>
       <v-btn :to="campRoute(camp())" text>
-        <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-tent</v-icon>
+        <v-icon :left="$vuetify.display.mdAndUp">mdi-tent</v-icon>
         <span class="sr-only-sm-and-down">{{ camp().title }}</span>
       </v-btn>
       <v-btn :to="campRoute(camp(), 'program')" text>
-        <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-view-dashboard</v-icon>
+        <v-icon :left="$vuetify.display.mdAndUp">mdi-view-dashboard</v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('views.camp.navigation.desktop.navTopbar.program')
         }}</span>
       </v-btn>
       <v-btn :to="campRoute(camp(), 'story')" text>
-        <v-icon :left="$vuetify.breakpoint.mdAndUp"> mdi-book-open-variant </v-icon>
+        <v-icon :left="$vuetify.display.mdAndUp"> mdi-book-open-variant </v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('views.camp.navigation.desktop.navTopbar.story')
         }}</span>
       </v-btn>
       <v-btn :to="materialListRoute(camp())" text>
-        <v-icon :left="$vuetify.breakpoint.mdAndUp"> mdi-package-variant </v-icon>
+        <v-icon :left="$vuetify.display.mdAndUp"> mdi-package-variant </v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('views.camp.navigation.desktop.navTopbar.material')
         }}</span>
       </v-btn>
       <v-btn :to="campRoute(camp(), 'admin')" text>
-        <v-icon :left="$vuetify.breakpoint.mdAndUp"> mdi-cogs </v-icon>
+        <v-icon :left="$vuetify.display.mdAndUp"> mdi-cogs </v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('global.navigation.admin.title')
         }}</span>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index c097b1750b..fd3bb51d12 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -151,10 +151,6 @@ export default defineConfig(({ mode }) => ({
         find: 'dayjs',
         replacement: path.resolve(__dirname, 'node_modules', 'dayjs'),
       },
-      {
-        find: 'vue',
-        replacement: '@vue/compat',
-      },
     ],
     preserveSymlinks: true,
   },

From ec86ab62753cbdff265c3f6e2d108c8eb787d78d Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sun, 14 Jan 2024 20:17:48 +0100
Subject: [PATCH 11/21] login page renders; custom icon placeholders

---
 frontend/package.json                              |  1 -
 frontend/src/App.vue                               |  5 ++---
 frontend/src/components/activity/ScheduleEntry.vue |  6 ++----
 .../components/activity/content/ColumnLayout.vue   |  2 +-
 .../activity/content/ResponsiveLayout.vue          |  2 +-
 frontend/src/components/form/base/ETextField.vue   |  4 ++--
 frontend/src/components/navigation/Logo.vue        |  3 +--
 frontend/src/main.js                               |  4 ++--
 frontend/src/plugins/i18n/index.js                 |  2 --
 frontend/src/plugins/vuetify.js                    | 14 +++++++++++++-
 frontend/src/views/auth/Login.vue                  | 12 ++++++------
 frontend/src/views/auth/ResetPassword.vue          |  2 +-
 frontend/src/views/auth/ResetPasswordRequest.vue   |  2 +-
 frontend/src/views/camp/Invitation.vue             |  4 +---
 .../views/camp/navigation/mobile/NavSidebar.vue    |  2 +-
 15 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 85e2b8fb08..ac0a84dbea 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,7 +48,6 @@
     "@tiptap/vue-3": "2.1.13",
     "@vee-validate/i18n": "4.12.4",
     "@vee-validate/rules": "4.12.4",
-    "@vue/compat": "3.3.13",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "@zxcvbn-ts/language-de": "3.0.2",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d48e4a7571..71566486d4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,14 +1,13 @@
 <template>
   <v-app>
-    HELLO WORLD!
     <!-- <router-view name="navigation" />
 
     <router-view name="aside" /> -->
 
     <!-- main content -->
-    <!-- <v-main>
+    <v-main>
       <router-view />
-    </v-main> -->
+    </v-main>
 
     <!-- footer -->
     <!-- <v-footer v-if="$vuetify.display.mdAndUp" app color="grey lighten-5">
diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
index e264125508..17f971dd73 100644
--- a/frontend/src/components/activity/ScheduleEntry.vue
+++ b/frontend/src/components/activity/ScheduleEntry.vue
@@ -107,10 +107,8 @@ Displays a single scheduleEntry
             @click="toggleDisplaySize"
             v-on="on"
           >
-            <v-icon v-if="isLocalPaperDisplaySize" class="resize-icon"
-              >$vuetify.icons.bigScreen</v-icon
-            >
-            <v-icon v-else class="resize-icon">$vuetify.icons.paperSize</v-icon>
+            <v-icon v-if="isLocalPaperDisplaySize" class="resize-icon">$bigScreen</v-icon>
+            <v-icon v-else class="resize-icon">$paperSize</v-icon>
           </v-btn>
         </template>
         {{
diff --git a/frontend/src/components/activity/content/ColumnLayout.vue b/frontend/src/components/activity/content/ColumnLayout.vue
index c101327aea..6db2e28828 100644
--- a/frontend/src/components/activity/content/ColumnLayout.vue
+++ b/frontend/src/components/activity/content/ColumnLayout.vue
@@ -8,7 +8,7 @@
   >
     <template #header>
       <strong>
-        <v-icon color="blue darken-2">$vuetify.icons.columnLayout</v-icon>
+        <v-icon color="blue darken-2">$columnLayout</v-icon>
         {{ $tc('contentNode.columnLayout.name') }}
       </strong>
       <MenuCardlessContentNode :content-node="contentNode">
diff --git a/frontend/src/components/activity/content/ResponsiveLayout.vue b/frontend/src/components/activity/content/ResponsiveLayout.vue
index 21a98f07d3..3910618dcd 100644
--- a/frontend/src/components/activity/content/ResponsiveLayout.vue
+++ b/frontend/src/components/activity/content/ResponsiveLayout.vue
@@ -12,7 +12,7 @@
   >
     <template #header>
       <strong>
-        <v-icon color="blue darken-2">$vuetify.icons.responsiveLayout</v-icon>
+        <v-icon color="blue darken-2">$responsiveLayout</v-icon>
         {{ $tc('contentNode.responsiveLayout.name') }}
       </strong>
       <menu-cardless-content-node :content-node="contentNode" />
diff --git a/frontend/src/components/form/base/ETextField.vue b/frontend/src/components/form/base/ETextField.vue
index 7421ebbf53..7b76481cf5 100644
--- a/frontend/src/components/form/base/ETextField.vue
+++ b/frontend/src/components/form/base/ETextField.vue
@@ -15,7 +15,7 @@
     :filled="filled"
     :required="required"
     :hide-details="hideDetails"
-    :error-messages="veeErrors.concat(errorMessages)"
+    :error-messages="errorMessages"
     :label="label || name"
     :class="[inputClass]"
     :type="type"
@@ -81,7 +81,7 @@ export default {
   mounted() {
     this.preventValidationOnBlur =
       'autofocus' in this.$attrs &&
-      'required' in this.$refs.validationProvider.$attrs &&
+      /*'required' in this.$refs.validationProvider.$attrs && */
       this.$refs.textField.value == ''
   },
   methods: {
diff --git a/frontend/src/components/navigation/Logo.vue b/frontend/src/components/navigation/Logo.vue
index 5612890004..d45d1078df 100644
--- a/frontend/src/components/navigation/Logo.vue
+++ b/frontend/src/components/navigation/Logo.vue
@@ -2,8 +2,7 @@
   <v-toolbar-items>
     <v-btn text class="px-2 e-logo" min-width="0" rounded exact :to="{ name: 'home' }">
       <v-toolbar-title>
-        <v-icon>$vuetify.icons.ecamp</v-icon
-        ><span v-show="text" class="mx-2 e-logo-text">eCamp</span>
+        <v-icon>$ecamp</v-icon><span v-show="text" class="mx-2 e-logo-text">eCamp</span>
       </v-toolbar-title>
     </v-btn>
     <slot />
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2f6bc90f5c..30ec57f433 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -7,7 +7,6 @@ import {
   storeLoader,
   halJsonVuex,
   formBaseComponents,
-  ignoreNativeBindingWarnMessages,
   i18n,
   dayjs,
   veeValidate,
@@ -38,7 +37,7 @@ const app = createApp(App)
 
 app.use(auth)
 app.use(formBaseComponents)
-app.use(ignoreNativeBindingWarnMessages)
+// app.use(ignoreNativeBindingWarnMessages)
 app.use(storeLoader)
 app.use(vuetifyLoader)
 app.use(dayjs)
@@ -48,6 +47,7 @@ app.use(Toast, {
 })
 app.use(halJsonVuex)
 app.use(router)
+app.use(i18n)
 
 // manually importing necessary vuetify directives (there's no auomatic vuetify-loader for vitejs)
 app.directive('resize', Resize)
diff --git a/frontend/src/plugins/i18n/index.js b/frontend/src/plugins/i18n/index.js
index f58863b077..7123c1abca 100644
--- a/frontend/src/plugins/i18n/index.js
+++ b/frontend/src/plugins/i18n/index.js
@@ -105,8 +105,6 @@ const i18n = createI18n({
   silentTranslationWarn: true,
 })
 
-// Vue.use(i18n)
-
 Object.defineProperty(i18n, 'browserPreferredLocale', {
   get: function () {
     const languages = navigator.languages || [navigator.language]
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index b9b7c17b43..bb161900c2 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -23,7 +23,19 @@ class VuetifyLoaderPlugin {
         t: (key, ...params) => i18n.tc(key, 0, params),
       },
       icons: {
-        values: {
+        aliases: {
+          pbs: 'mdi-close-circle',
+          google: 'mdi-close-circle',
+          ecamp: 'mdi-close-circle',
+          cevi: 'mdi-close-circle',
+          jubla: 'mdi-close-circle',
+          tentDay: 'mdi-close-circle',
+          paperSize: 'mdi-close-circle',
+          bigScreen: 'mdi-close-circle',
+          columnLayout: 'mdi-close-circle',
+          responsiveLayout: 'mdi-close-circle',
+        },
+        sets: {
           pbs: { component: PbsLogo },
           google: { component: GoogleLogo },
           ecamp: { component: eCampLogo },
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index f876a6a7ff..4accd721d4 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -1,7 +1,7 @@
 <template>
   <auth-container>
     <div v-if="isProdSuffix && $vuetify.display.smAndDown" class="text-center">
-      <v-icon size="64"> $vuetify.icons.ecamp </v-icon>
+      <v-icon size="64"> $ecamp </v-icon>
     </div>
 
     <h1 class="display-1 text-center" :class="{ 'my-4': isProdSuffix }">
@@ -71,7 +71,7 @@
         class="my-4"
       >
         <v-progress-circular v-if="authenticationInProgress" indeterminate size="24" />
-        <v-icon v-else>$vuetify.icons.ecamp</v-icon>
+        <v-icon v-else>$ecamp</v-icon>
         <v-spacer />
         <span>{{ $tc('views.auth.login.provider.ecamp') }}</span>
         <v-spacer />
@@ -87,7 +87,7 @@
         text
         @click="loginPbsMiData"
       >
-        <v-icon class="my-1" color="#521d3a">$vuetify.icons.pbs</v-icon>
+        <v-icon class="my-1" color="#521d3a">$pbs</v-icon>
         <span class="text--secondary body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.midata')
         }}</span>
@@ -99,7 +99,7 @@
         text
         @click="loginCeviDB"
       >
-        <v-icon class="my-1">$vuetify.icons.cevi</v-icon>
+        <v-icon class="my-1">$cevi</v-icon>
         <span class="text--secondary body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.cevidb')
         }}</span>
@@ -111,7 +111,7 @@
         text
         @click="loginJublaDB"
       >
-        <v-icon size="32">$vuetify.icons.jubla</v-icon>
+        <v-icon size="32">$jubla</v-icon>
         <span class="text--secondary body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.jubladb')
         }}</span>
@@ -123,7 +123,7 @@
         text
         @click="loginGoogle"
       >
-        <v-icon class="my-1">$vuetify.icons.google</v-icon>
+        <v-icon class="my-1">$google</v-icon>
         <span class="text--secondary body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.google')
         }}</span>
diff --git a/frontend/src/views/auth/ResetPassword.vue b/frontend/src/views/auth/ResetPassword.vue
index dc5ac581df..96fdb1401f 100644
--- a/frontend/src/views/auth/ResetPassword.vue
+++ b/frontend/src/views/auth/ResetPassword.vue
@@ -87,7 +87,7 @@
         class="my-4"
       >
         <v-progress-circular v-if="status == 'reseting'" indeterminate size="24" />
-        <v-icon v-else>$vuetify.icons.ecamp</v-icon>
+        <v-icon v-else>$ecamp</v-icon>
         <v-spacer />
         <span>{{ $tc('views.auth.resetPassword.send') }}</span>
         <v-spacer />
diff --git a/frontend/src/views/auth/ResetPasswordRequest.vue b/frontend/src/views/auth/ResetPasswordRequest.vue
index 86f0b61dfe..89917fadd5 100644
--- a/frontend/src/views/auth/ResetPasswordRequest.vue
+++ b/frontend/src/views/auth/ResetPasswordRequest.vue
@@ -37,7 +37,7 @@
         class="my-4"
       >
         <v-progress-circular v-if="status == 'sending'" indeterminate size="24" />
-        <v-icon v-else>$vuetify.icons.ecamp</v-icon>
+        <v-icon v-else>$ecamp</v-icon>
         <v-spacer />
         <span>{{ $tc('views.auth.resetPasswordRequest.send') }}</span>
         <v-spacer />
diff --git a/frontend/src/views/camp/Invitation.vue b/frontend/src/views/camp/Invitation.vue
index ef91083b18..2594164e5a 100644
--- a/frontend/src/views/camp/Invitation.vue
+++ b/frontend/src/views/camp/Invitation.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="bg">
     <div class="hill">
-      <v-icon :size="$vuetify.display.smAndUp ? 300 : 200" class="tent"
-        >$vuetify.icons.tentDay
-      </v-icon>
+      <v-icon :size="$vuetify.display.smAndUp ? 300 : 200" class="tent">$tentDay </v-icon>
       <div class="trees"></div>
       <div class="localnav justify-space-between d-flex w-100 py-2">
         <ButtonBack v-if="!$vuetify.display.mdAndUp" text dark visible-label />
diff --git a/frontend/src/views/camp/navigation/mobile/NavSidebar.vue b/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
index f4eb86d47d..a08da4e465 100644
--- a/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
+++ b/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
@@ -8,7 +8,7 @@
   >
     <div class="d-flex flex-column fill-height">
       <div class="d-flex flex-column align-center blue-grey darken-4 white--text py-6">
-        <v-icon x-large>$vuetify.icons.ecamp</v-icon>
+        <v-icon x-large>$ecamp</v-icon>
         <h2 class="title text-center">eCamp</h2>
       </div>
       <v-divider class="blue-grey darken-2" />

From 692d27bc206ea766ab4d39523b71fdb88aa2dd01 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Tue, 16 Jan 2024 13:54:18 +0100
Subject: [PATCH 12/21] run lint including rules from plugin:vuetify/base

---
 frontend/package.json                         |  5 +-
 .../activity/ActivityResponsibles.vue         |  2 +-
 .../activity/ButtonNestedContentNodeAdd.vue   |  4 +-
 .../activity/MenuCardlessContentNode.vue      |  4 +-
 .../src/components/activity/ScheduleEntry.vue | 10 ++--
 .../activity/content/ColumnLayout.vue         |  2 +-
 .../activity/content/LAThematicArea.vue       | 17 +++---
 .../activity/content/ResponsiveLayout.vue     | 17 ++----
 .../content/columnLayout/ColumnIndicator.vue  | 10 ++--
 .../columnLayout/ResizableColumnHeader.vue    |  2 +-
 .../content/layout/ContentNodeCard.vue        |  4 +-
 .../content/layout/LayoutNodeCard.vue         |  2 +-
 .../storyboard/StoryboardRowDefault.vue       |  4 +-
 .../content/storyboard/StoryboardRowDense.vue |  4 +-
 frontend/src/components/buttons/ButtonAdd.vue |  2 +-
 .../src/components/buttons/ButtonBack.vue     |  2 +-
 .../src/components/buttons/ButtonCancel.vue   |  2 +-
 .../src/components/buttons/ButtonDelete.vue   |  4 +-
 .../src/components/buttons/ButtonRetry.vue    |  2 +-
 .../src/components/buttons/IconButton.vue     |  9 ++-
 .../campAdmin/CampActivityProgressLabels.vue  | 13 ++---
 .../components/campAdmin/CampCategories.vue   |  2 +-
 .../campAdmin/CampConditionalFields.vue       | 10 ++--
 .../components/campAdmin/CampDangerZone.vue   | 27 +++++----
 .../campAdmin/CampMaterialLists.vue           |  2 +-
 .../src/components/campAdmin/CampPeriods.vue  |  2 +-
 .../campAdmin/CreateCampPeriods.vue           |  8 +--
 .../campAdmin/DialogPeriodDateEdit.vue        | 16 +++---
 .../components/campCreate/CampCreateStep1.vue |  2 +-
 .../components/campCreate/CampCreateStep2.vue | 12 ++--
 .../collaborator/CollaboratorEdit.vue         |  4 +-
 .../collaborator/CollaboratorForm.vue         | 25 +++++----
 .../collaborator/CollaboratorListItem.vue     | 50 ++++++++---------
 .../src/components/dashboard/ActivityRow.vue  |  2 +-
 .../components/dashboard/BooleanFilter.vue    |  2 +-
 .../src/components/dashboard/SelectFilter.vue | 20 ++++---
 .../components/dialog/DialogBottomSheet.vue   | 14 +++--
 frontend/src/components/dialog/DialogForm.vue | 18 ++++--
 frontend/src/components/form/ServerError.vue  |  8 ++-
 .../components/form/api/ApiWrapperAppend.vue  | 24 ++++----
 .../src/components/form/base/ECheckbox.vue    |  4 +-
 .../src/components/form/base/EColorPicker.vue |  4 +-
 .../src/components/form/base/EDatePicker.vue  |  2 +-
 frontend/src/components/form/base/ESwitch.vue |  4 +-
 .../src/components/form/base/ETimePicker.vue  |  2 +-
 .../components/form/tiptap/TiptapEditor.vue   |  2 +-
 .../components/generic/IconWithTooltip.vue    |  8 ++-
 .../src/components/generic/LockButton.vue     |  6 +-
 .../src/components/layout/AuthContainer.vue   |  2 +-
 .../src/components/layout/ContentCard.vue     |  2 +-
 .../src/components/layout/ContentGroup.vue    |  4 +-
 .../components/layout/LanguageSwitcher.vue    |  8 +--
 .../src/components/layout/SidebarListItem.vue |  8 +--
 .../material/MaterialCreateItem.vue           |  2 +-
 .../src/components/material/MaterialLists.vue | 36 ++++++------
 .../components/material/MaterialListsEdit.vue |  5 +-
 .../src/components/material/MaterialTable.vue |  8 +--
 .../material/PeriodMaterialLists.vue          | 10 ++--
 frontend/src/components/navigation/Logo.vue   |  9 ++-
 .../src/components/navigation/SideBar.vue     |  4 +-
 .../src/components/navigation/UserMeta.vue    | 16 +++---
 .../components/print/PrintConfigurator.vue    | 10 ++--
 .../print/configurator/PagesConfig.vue        |  4 +-
 .../print-client/DownloadClientPdfButton.vue  |  2 +-
 .../print/print-client/PrintPreviewClient.vue |  2 +-
 .../print-nuxt/DownloadNuxtPdfButton.vue      |  2 +-
 .../print/print-nuxt/PrintPreviewNuxt.vue     |  6 +-
 .../program/DialogActivityCreate.vue          | 28 ++++------
 .../program/FormScheduleEntryList.vue         |  2 +-
 .../src/components/program/PeriodSwitcher.vue | 22 ++++----
 .../components/program/ScheduleEntries.vue    |  3 +-
 .../program/picasso/PicassoEntry.vue          | 12 ++--
 .../src/components/prompt/PopoverPrompt.vue   | 16 ++++--
 frontend/src/components/story/StoryDay.vue    |  8 +--
 frontend/src/components/story/StoryPeriod.vue |  2 +-
 frontend/src/views/Camps.vue                  | 55 ++++++++-----------
 frontend/src/views/NavigationDefault.vue      |  2 +-
 frontend/src/views/PageNotFound.vue           |  6 +-
 frontend/src/views/Profile.vue                |  4 +-
 frontend/src/views/activity/Category.vue      | 15 +++--
 frontend/src/views/admin/Info.vue             |  2 +-
 frontend/src/views/auth/Activate.vue          |  4 +-
 frontend/src/views/auth/Login.vue             | 38 ++++++-------
 frontend/src/views/auth/Register.vue          | 10 ++--
 frontend/src/views/auth/RegisterDone.vue      |  4 +-
 frontend/src/views/auth/ResetPassword.vue     |  8 +--
 .../src/views/auth/ResetPasswordRequest.vue   |  6 +-
 frontend/src/views/camp/Dashboard.vue         |  4 +-
 frontend/src/views/camp/Invitation.vue        | 29 ++++++----
 frontend/src/views/camp/Story.vue             |  2 +-
 .../camp/navigation/desktop/NavTopbar.vue     | 22 ++++----
 .../camp/navigation/mobile/NavBottombar.vue   |  2 +-
 .../camp/navigation/mobile/NavSidebar.vue     | 20 +++----
 .../src/views/material/MaterialDetail.vue     | 10 +---
 .../src/views/material/MaterialOverview.vue   | 10 +---
 95 files changed, 456 insertions(+), 431 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index ac0a84dbea..48a3308eab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,7 @@
     "preview": "vite preview --host 0.0.0.0 --port 3000",
     "build": "vite build",
     "lint": "npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "vue-cli-service lint",
+    "lint:eslint": "eslint . --ext .vue,.js --fix --ignore-path .gitignore",
     "lint:prettier": "prettier --write --ignore-path .prettierignore **/*.{css,scss,json,md}",
     "lint:check": "npm run lint:check:eslint && npm run lint:check:prettier",
     "lint:check:eslint": "vue-cli-service lint --no-fix",
@@ -164,7 +164,8 @@
         {
           "shallowOnly": false
         }
-      ]
+      ],
+      "vuetify/no-deprecated-slots": "off"
     },
     "parserOptions": {
       "parser": "@babel/eslint-parser"
diff --git a/frontend/src/components/activity/ActivityResponsibles.vue b/frontend/src/components/activity/ActivityResponsibles.vue
index 9039481a3a..b128df1064 100644
--- a/frontend/src/components/activity/ActivityResponsibles.vue
+++ b/frontend/src/components/activity/ActivityResponsibles.vue
@@ -16,7 +16,7 @@
     @input="onInput"
   >
     <template #selection="{ item }">
-      <v-chip :key="item.value" small class="mx-0">
+      <v-chip :key="item.value" size="small" class="mx-0">
         <UserAvatar
           :camp-collaboration="item.campCollaboration"
           left
diff --git a/frontend/src/components/activity/ButtonNestedContentNodeAdd.vue b/frontend/src/components/activity/ButtonNestedContentNodeAdd.vue
index 6fb3ef9535..3269454a3a 100644
--- a/frontend/src/components/activity/ButtonNestedContentNodeAdd.vue
+++ b/frontend/src/components/activity/ButtonNestedContentNodeAdd.vue
@@ -9,7 +9,7 @@
       'ec-button-contentnode-add-wrapper--single': single,
     }"
   >
-    <v-menu bottom left offset-y>
+    <v-menu location="bottom left" offset-y>
       <template #activator="{ on, attrs }">
         <v-btn
           class="ec-button-contentnode-add"
@@ -19,7 +19,7 @@
           v-bind="attrs"
           v-on="on"
         >
-          <v-icon left>mdi-plus-circle-outline</v-icon>
+          <v-icon start>mdi-plus-circle-outline</v-icon>
           {{ $tc('global.button.add') }}
         </v-btn>
       </template>
diff --git a/frontend/src/components/activity/MenuCardlessContentNode.vue b/frontend/src/components/activity/MenuCardlessContentNode.vue
index 308a1bb8c9..825b39c5d7 100644
--- a/frontend/src/components/activity/MenuCardlessContentNode.vue
+++ b/frontend/src/components/activity/MenuCardlessContentNode.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-menu bottom left offset-y>
+  <v-menu location="bottom left" offset-y>
     <template #activator="{ on, attrs }">
-      <v-btn icon class="mr-n1" small v-bind="attrs" v-on="on">
+      <v-btn icon class="mr-n1" size="small" v-bind="attrs" v-on="on">
         <v-icon>mdi-dots-vertical</v-icon>
       </v-btn>
     </template>
diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
index 17f971dd73..1394610ae1 100644
--- a/frontend/src/components/activity/ScheduleEntry.vue
+++ b/frontend/src/components/activity/ScheduleEntry.vue
@@ -32,7 +32,7 @@ Displays a single scheduleEntry
             >
               <template #after>
                 <v-icon
-                  right
+                  end
                   class="ml-0 e-category-chip-save-icon"
                   :class="{ 'mdi-spin': categoryChangeState === 'saving' }"
                 >
@@ -83,20 +83,20 @@ Displays a single scheduleEntry
         v-if="layoutMode"
         color="success"
         class="ml-3"
-        outlined
+        variant="outlined"
         @click="layoutMode = false"
       >
         <template v-if="$vuetify.display.smAndUp">
-          <v-icon left>mdi-file-document-edit-outline</v-icon>
+          <v-icon start>mdi-file-document-edit-outline</v-icon>
           {{ $tc('components.activity.scheduleEntry.backToContents') }}
         </template>
         <template v-else>{{ $tc('global.button.back') }}</template>
       </v-btn>
 
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template #activator="{ on }">
           <v-btn
-            text
+            variant="text"
             icon
             class="d-none d-md-block"
             :aria-label="
diff --git a/frontend/src/components/activity/content/ColumnLayout.vue b/frontend/src/components/activity/content/ColumnLayout.vue
index 6db2e28828..d70aa4628d 100644
--- a/frontend/src/components/activity/content/ColumnLayout.vue
+++ b/frontend/src/components/activity/content/ColumnLayout.vue
@@ -8,7 +8,7 @@
   >
     <template #header>
       <strong>
-        <v-icon color="blue darken-2">$columnLayout</v-icon>
+        <v-icon color="blue-darken-2">$columnLayout</v-icon>
         {{ $tc('contentNode.columnLayout.name') }}
       </strong>
       <MenuCardlessContentNode :content-node="contentNode">
diff --git a/frontend/src/components/activity/content/LAThematicArea.vue b/frontend/src/components/activity/content/LAThematicArea.vue
index 341cb4bf75..30d7bea907 100644
--- a/frontend/src/components/activity/content/LAThematicArea.vue
+++ b/frontend/src/components/activity/content/LAThematicArea.vue
@@ -22,9 +22,9 @@
         <template v-if="index === 0">
           <v-list
             v-if="selectionCount > 0"
-            :two-line="selectionCount > 3"
-            :three-line="selectionCount <= 3"
-            class="flex-grow-1 transparent"
+            :lines="selectionCount > 3 && 'two'"
+            :lines="selectionCount <= 3 && 'three'"
+            class="flex-grow-1 bg-transparent"
           >
             <template v-for="[key] in dataOptions">
               <v-list-item
@@ -52,19 +52,18 @@
         </template>
       </template>
       <template #item="{ item, parent, on, attrs }">
-        <v-list-item three-line class="ec-lta-item" v-bind="attrs" v-on="on">
+        <v-list-item lines="three" class="ec-lta-item" v-bind="attrs" v-on="on">
           <v-list-item-action>
-            <v-simple-checkbox
+            <v-checkbox-btn
               class="pointer-events-none"
               :value="parent.hasItem(item)"
               :color="parent.color"
               :ripple="false"
             />
           </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>{{ item.text }}</v-list-item-title>
-            <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
-          </v-list-item-content>
+
+          <v-list-item-title>{{ item.text }}</v-list-item-title>
+          <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
         </v-list-item>
       </template>
     </e-select>
diff --git a/frontend/src/components/activity/content/ResponsiveLayout.vue b/frontend/src/components/activity/content/ResponsiveLayout.vue
index 3910618dcd..974b38ec99 100644
--- a/frontend/src/components/activity/content/ResponsiveLayout.vue
+++ b/frontend/src/components/activity/content/ResponsiveLayout.vue
@@ -12,7 +12,7 @@
   >
     <template #header>
       <strong>
-        <v-icon color="blue darken-2">$responsiveLayout</v-icon>
+        <v-icon color="blue-darken-2">$responsiveLayout</v-icon>
         {{ $tc('contentNode.responsiveLayout.name') }}
       </strong>
       <menu-cardless-content-node :content-node="contentNode" />
@@ -21,10 +21,7 @@
       <div
         class="d-flex flex-column flex-grow-1 ec-responsivelayout__slot ec-responsivelayout__slot--main"
       >
-        <p
-          v-if="layoutMode"
-          class="mt-2 mb-1 blue--text text--darken-3 font-weight-medium"
-        >
+        <p v-if="layoutMode" class="mt-2 mb-1 text-blue-darken-3 font-weight-medium">
           {{ $tc('contentNode.responsiveLayout.mainContent') }}
         </p>
         <draggable-content-nodes
@@ -40,10 +37,7 @@
         class="d-flex flex-column ec-responsivelayout__slot ec-responsivelayout__slot--aside-top"
         :class="{ 'flex-grow-1': !layoutMode }"
       >
-        <p
-          v-if="layoutMode"
-          class="mt-2 mb-1 blue--text text--darken-3 font-weight-medium"
-        >
+        <p v-if="layoutMode" class="mt-2 mb-1 text-blue-darken-3 font-weight-medium">
           {{ $tc('contentNode.responsiveLayout.printAboveMainContent') }}
         </p>
         <draggable-content-nodes
@@ -64,10 +58,7 @@
         class="d-flex flex-column ec-responsivelayout__slot"
         :class="{ 'flex-grow-1': !layoutMode }"
       >
-        <p
-          v-if="layoutMode"
-          class="mt-2 mb-1 blue--text text--darken-3 font-weight-medium"
-        >
+        <p v-if="layoutMode" class="mt-2 mb-1 text-blue-darken-3 font-weight-medium">
           {{ $tc('contentNode.responsiveLayout.printBelowMainContent') }}
         </p>
         <draggable-content-nodes
diff --git a/frontend/src/components/activity/content/columnLayout/ColumnIndicator.vue b/frontend/src/components/activity/content/columnLayout/ColumnIndicator.vue
index b7c852f3f2..71a8b158e2 100644
--- a/frontend/src/components/activity/content/columnLayout/ColumnIndicator.vue
+++ b/frontend/src/components/activity/content/columnLayout/ColumnIndicator.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="mb-1">
-    <p class="mb-0 blue--text text--darken-3 font-weight-medium flex-shrink-0">
+    <p class="mb-0 text-blue-darken-3 font-weight-medium flex-shrink-0">
       {{ $tc('contentNode.columnLayout.entity.column.name', 2, { name: slotName }) }}
       <span class="d-sr-only">{{ width + '0%' }}</span>
     </p>
     <div v-if="showProgress" class="d-flex mb-1" aria-hidden="true">
       <v-progress-linear
-        color="blue darken-1"
+        color="blue-darken-1"
         buffer-value="100"
         :style="'flex-basis: ' + widthLeft + '0%'"
       />
       <v-progress-linear
-        value="100"
-        color="blue darken-1"
+        model-value="100"
+        color="blue-darken-1"
         :style="'flex-basis: ' + width + '0%'"
       />
       <v-progress-linear
-        color="blue darken-1"
+        color="blue-darken-1"
         buffer-value="100"
         :style="'flex-basis: ' + widthRight + '0%'"
       />
diff --git a/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue b/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
index 0132c1fbf2..6720fc15de 100644
--- a/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
+++ b/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
@@ -3,7 +3,7 @@
     <slot>
       <v-btn
         icon
-        text
+        variant="text"
         color="primary"
         class="resize-btn"
         :class="{ dragging }"
diff --git a/frontend/src/components/activity/content/layout/ContentNodeCard.vue b/frontend/src/components/activity/content/layout/ContentNodeCard.vue
index 889c638188..1d3c0b0b39 100644
--- a/frontend/src/components/activity/content/layout/ContentNodeCard.vue
+++ b/frontend/src/components/activity/content/layout/ContentNodeCard.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
     :elevation="draggable ? 4 : 0"
-    :tile="!layoutMode"
+    :rounded="!layoutMode && '0'"
     class="ec-content-nodecard d-flex flex-column"
     :class="{ 'mx-2 my-2 elevation-4--light': draggable }"
   >
@@ -50,7 +50,7 @@
           <template #activator="{ on }">
             <v-btn
               icon
-              small
+              size="small"
               color="error"
               class="float-right"
               width="36"
diff --git a/frontend/src/components/activity/content/layout/LayoutNodeCard.vue b/frontend/src/components/activity/content/layout/LayoutNodeCard.vue
index d6f32a6886..06b5ec3da3 100644
--- a/frontend/src/components/activity/content/layout/LayoutNodeCard.vue
+++ b/frontend/src/components/activity/content/layout/LayoutNodeCard.vue
@@ -9,7 +9,7 @@
   >
     <div
       v-if="!isRoot && layoutMode"
-      class="text-center d-flex align-center px-2 py-1 justify-space-between gap-1 ec-layout-nodecard-header blue--text text--darken-2"
+      class="text-center d-flex align-center px-2 py-1 justify-space-between gap-1 ec-layout-nodecard-header text-blue-darken-2"
     >
       <slot name="header" />
     </div>
diff --git a/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue b/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue
index 25eb751177..7d944ef22a 100644
--- a/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue
+++ b/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue
@@ -3,7 +3,7 @@
     <td v-if="!layoutMode" class="e-storyboard-row__handle">
       <v-btn
         icon
-        small
+        size="small"
         class="drag-and-drop-handle"
         :disabled="isLastSection"
         :aria-label="$tc('global.button.move')"
@@ -42,7 +42,7 @@
         <template #activator="{ on }">
           <v-btn
             icon
-            small
+            size="small"
             class="e-storyboard-row__delete"
             color="error"
             :disabled="isLastSection"
diff --git a/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue b/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue
index 6a56e7a108..bf60226693 100644
--- a/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue
+++ b/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue
@@ -3,7 +3,7 @@
     <div v-if="!layoutMode" role="cell" class="e-storyboard-row__handle">
       <v-btn
         icon
-        small
+        size="small"
         class="drag-and-drop-handle"
         :disabled="isLastSection"
         :aria-label="$tc('global.button.move')"
@@ -42,7 +42,7 @@
         <template #activator="{ on }">
           <v-btn
             icon
-            small
+            size="small"
             class="e-storyboard-row__delete"
             color="error"
             :disabled="isLastSection"
diff --git a/frontend/src/components/buttons/ButtonAdd.vue b/frontend/src/components/buttons/ButtonAdd.vue
index d62bcf6984..7af1d66c97 100644
--- a/frontend/src/components/buttons/ButtonAdd.vue
+++ b/frontend/src/components/buttons/ButtonAdd.vue
@@ -6,7 +6,7 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <v-icon :left="!hideLabel" size="150%">{{ icon }}</v-icon>
+    <v-icon :start="!hideLabel" size="150%">{{ icon }}</v-icon>
     <span :class="{ 'd-sr-only': hideLabel }">
       <slot>{{ $tc('global.button.add') }}</slot>
     </span>
diff --git a/frontend/src/components/buttons/ButtonBack.vue b/frontend/src/components/buttons/ButtonBack.vue
index f6c12e41fb..ad5fab8e38 100644
--- a/frontend/src/components/buttons/ButtonBack.vue
+++ b/frontend/src/components/buttons/ButtonBack.vue
@@ -5,7 +5,7 @@
     :aria-label="$tc('global.button.back')"
     @click="$router.go(-1)"
   >
-    <v-icon :left="visibleLabel">mdi-arrow-left</v-icon>
+    <v-icon :start="visibleLabel">mdi-arrow-left</v-icon>
     <template v-if="visibleLabel">
       {{ $tc('global.button.back') }}
     </template>
diff --git a/frontend/src/components/buttons/ButtonCancel.vue b/frontend/src/components/buttons/ButtonCancel.vue
index fccb02c8f6..b0498f83be 100644
--- a/frontend/src/components/buttons/ButtonCancel.vue
+++ b/frontend/src/components/buttons/ButtonCancel.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn text color="secondary" v-bind="$attrs" v-on="$listeners">
+  <v-btn variant="text" color="secondary" v-bind="$attrs" v-on="$listeners">
     {{ $tc('global.button.cancel') }}
   </v-btn>
 </template>
diff --git a/frontend/src/components/buttons/ButtonDelete.vue b/frontend/src/components/buttons/ButtonDelete.vue
index 9a017cabf1..7dfba3883b 100644
--- a/frontend/src/components/buttons/ButtonDelete.vue
+++ b/frontend/src/components/buttons/ButtonDelete.vue
@@ -9,8 +9,8 @@
     v-on="$listeners"
   >
     <v-icon v-if="iconOnly">{{ icon }}</v-icon>
-    <v-icon v-else-if="!text" :left="$vuetify.display.smAndUp">{{ icon }}</v-icon>
-    <v-icon v-if="!iconOnly && text" :left="$vuetify.display.smAndUp">{{ icon }}</v-icon>
+    <v-icon v-else-if="!text" :start="$vuetify.display.smAndUp">{{ icon }}</v-icon>
+    <v-icon v-if="!iconOnly && text" :start="$vuetify.display.smAndUp">{{ icon }}</v-icon>
 
     <span v-if="!iconOnly" class="d-none d-sm-block">
       <slot>{{ $tc('global.button.delete') }}</slot>
diff --git a/frontend/src/components/buttons/ButtonRetry.vue b/frontend/src/components/buttons/ButtonRetry.vue
index 6a6a44795b..d710413417 100644
--- a/frontend/src/components/buttons/ButtonRetry.vue
+++ b/frontend/src/components/buttons/ButtonRetry.vue
@@ -1,6 +1,6 @@
 <template>
   <v-btn color="error" v-bind="$attrs" v-on="$listeners">
-    <v-icon left>mdi-refresh</v-icon>
+    <v-icon start>mdi-refresh</v-icon>
     {{ $tc('global.button.tryagain') }}
   </v-btn>
 </template>
diff --git a/frontend/src/components/buttons/IconButton.vue b/frontend/src/components/buttons/IconButton.vue
index b941009aa5..a56cd2fd9e 100644
--- a/frontend/src/components/buttons/IconButton.vue
+++ b/frontend/src/components/buttons/IconButton.vue
@@ -6,13 +6,18 @@
     :color="color"
     v-on="$listeners"
   >
-    <v-icon v-if="!iconLast" :left="!hideLabel" size="150%" :class="{ animate: animate }">
+    <v-icon
+      v-if="!iconLast"
+      :start="!hideLabel"
+      size="150%"
+      :class="{ animate: animate }"
+    >
       {{ icon }}
     </v-icon>
     <span :class="{ 'd-sr-only': hideLabel }">
       <slot />
     </span>
-    <v-icon v-if="iconLast" :right="!hideLabel" size="150%" :class="{ animate: animate }">
+    <v-icon v-if="iconLast" :end="!hideLabel" size="150%" :class="{ animate: animate }">
       {{ icon }}
     </v-icon>
   </v-btn>
diff --git a/frontend/src/components/campAdmin/CampActivityProgressLabels.vue b/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
index e29a77152e..14f16ae17d 100644
--- a/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
+++ b/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
@@ -1,7 +1,7 @@
 <template>
   <content-group>
     <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
+      <div class="ec-content-group__title py-1 text-subtitle-1">
         {{ $tc('components.campAdmin.campActivityProgressLabels.title') }}
         <dialog-activity-progress-label-create v-if="!disabled" :camp="camp()">
           <template #activator="{ on }">
@@ -26,13 +26,12 @@
         class="px-0"
       >
         <v-list-item-avatar>
-          <v-avatar color="grey lighten-2" size="32">{{ idx + 1 }}</v-avatar>
+          <v-avatar color="grey-lighten-2" size="32">{{ idx + 1 }}</v-avatar>
         </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title>
-            {{ progressLabel.title }}
-          </v-list-item-title>
-        </v-list-item-content>
+
+        <v-list-item-title>
+          {{ progressLabel.title }}
+        </v-list-item-title>
 
         <v-list-item-action v-if="!disabled" style="display: inline">
           <v-item-group>
diff --git a/frontend/src/components/campAdmin/CampCategories.vue b/frontend/src/components/campAdmin/CampCategories.vue
index 3817cef375..a6b2262efc 100644
--- a/frontend/src/components/campAdmin/CampCategories.vue
+++ b/frontend/src/components/campAdmin/CampCategories.vue
@@ -1,7 +1,7 @@
 <template>
   <content-group>
     <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
+      <div class="ec-content-group__title py-1 text-subtitle-1">
         {{ $tc('components.campAdmin.campCategories.title') }}
         <dialog-category-create v-if="!disabled" :camp="camp()">
           <template #activator="{ on }">
diff --git a/frontend/src/components/campAdmin/CampConditionalFields.vue b/frontend/src/components/campAdmin/CampConditionalFields.vue
index ea345a8000..afed599033 100644
--- a/frontend/src/components/campAdmin/CampConditionalFields.vue
+++ b/frontend/src/components/campAdmin/CampConditionalFields.vue
@@ -4,12 +4,12 @@ Displays fields which don't apply to all camps, but are required for some
 
 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header>
-      <h2 class="subtitle-1 font-weight-bold">
+    <v-expansion-panel-title>
+      <h2 class="text-subtitle-1 font-weight-bold">
         {{ $tc('components.campAdmin.campConditionalFields.title') }}
       </h2>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <v-row class="pb-6">
         <v-col cols="12" md="6" class="pb-0">
           <content-group
@@ -69,7 +69,7 @@ Displays fields which don't apply to all camps, but are required for some
           </content-group>
         </v-col>
       </v-row>
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
diff --git a/frontend/src/components/campAdmin/CampDangerZone.vue b/frontend/src/components/campAdmin/CampDangerZone.vue
index 8b112120db..def1e76846 100644
--- a/frontend/src/components/campAdmin/CampDangerZone.vue
+++ b/frontend/src/components/campAdmin/CampDangerZone.vue
@@ -4,24 +4,23 @@ Critical operations on camp
 
 <template>
   <v-expansion-panel active-class="red lighten-5 red--text text--darken-4">
-    <v-expansion-panel-header>
-      <h2 class="subtitle-1 font-weight-bold">
+    <v-expansion-panel-title>
+      <h2 class="text-subtitle-1 font-weight-bold">
         {{ $tc('components.campAdmin.campDangerZone.title') }}
       </h2>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
       <div v-else>
         <v-list class="py-0" color="transparent">
           <v-list-item class="px-0">
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $tc('components.campAdmin.campDangerZone.deleteCamp.title') }}
-              </v-list-item-title>
-              <div class="body-2 grey--text text--darken-3">
-                {{ $tc('components.campAdmin.campDangerZone.deleteCamp.description') }}
-              </div>
-            </v-list-item-content>
+            <v-list-item-title>
+              {{ $tc('components.campAdmin.campDangerZone.deleteCamp.title') }}
+            </v-list-item-title>
+            <div class="text-body-2 text-grey-darken-3">
+              {{ $tc('components.campAdmin.campDangerZone.deleteCamp.description') }}
+            </div>
+
             <v-list-item-action>
               <dialog-entity-delete
                 :entity="camp()"
@@ -41,7 +40,7 @@ Critical operations on camp
                     {{ $tc('global.button.delete') }}
                   </button-delete>
                 </template>
-                <p class="body-1">
+                <p class="text-body-1">
                   {{
                     $tc('components.campAdmin.campDangerZone.deleteCamp.explanation', 0, {
                       campName: camp().name,
@@ -61,7 +60,7 @@ Critical operations on camp
           </v-list-item>
         </v-list>
       </div>
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
diff --git a/frontend/src/components/campAdmin/CampMaterialLists.vue b/frontend/src/components/campAdmin/CampMaterialLists.vue
index 6136bcd5c3..e9710b0f92 100644
--- a/frontend/src/components/campAdmin/CampMaterialLists.vue
+++ b/frontend/src/components/campAdmin/CampMaterialLists.vue
@@ -1,7 +1,7 @@
 <template>
   <content-group>
     <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
+      <div class="ec-content-group__title py-1 text-subtitle-1">
         {{ $tc('components.campAdmin.campMaterialLists.title') }}
         <dialog-material-list-create v-if="!disabled" :camp="camp()">
           <template #activator="{ on }">
diff --git a/frontend/src/components/campAdmin/CampPeriods.vue b/frontend/src/components/campAdmin/CampPeriods.vue
index b5b52fcac7..b1f60c776b 100644
--- a/frontend/src/components/campAdmin/CampPeriods.vue
+++ b/frontend/src/components/campAdmin/CampPeriods.vue
@@ -5,7 +5,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
 <template>
   <content-group>
     <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
+      <div class="ec-content-group__title py-1 text-subtitle-1">
         {{
           $tc('components.campAdmin.campPeriods.title', api.get().camps().items.length)
         }}
diff --git a/frontend/src/components/campAdmin/CreateCampPeriods.vue b/frontend/src/components/campAdmin/CreateCampPeriods.vue
index 6895ddc1e9..d5e3fd5f1c 100644
--- a/frontend/src/components/campAdmin/CreateCampPeriods.vue
+++ b/frontend/src/components/campAdmin/CreateCampPeriods.vue
@@ -3,8 +3,8 @@
     <v-card
       v-for="(period, i) in periods"
       :key="period.key"
-      outlined
-      color="grey lighten-3"
+      variant="outlined"
+      color="grey-lighten-3"
       class="period mb-2 rounded-b-0"
     >
       <v-row no-gutters>
@@ -16,7 +16,7 @@
         <v-col cols="auto">
           <v-btn
             class="ml-2 px-2"
-            text
+            variant="text"
             min-width="auto"
             color="error"
             :disabled="!periodDeletable"
@@ -68,7 +68,7 @@
         </v-col>
       </v-row>
     </v-card>
-    <v-btn text block height="auto" class="pa-4" @click="addPeriod">
+    <v-btn variant="text" block height="auto" class="pa-4" @click="addPeriod">
       <v-icon>mdi-plus</v-icon>
       {{ $tc('components.campAdmin.createCampPeriods.add') }}
     </v-btn>
diff --git a/frontend/src/components/campAdmin/DialogPeriodDateEdit.vue b/frontend/src/components/campAdmin/DialogPeriodDateEdit.vue
index 18dd362601..5512ab0b1a 100644
--- a/frontend/src/components/campAdmin/DialogPeriodDateEdit.vue
+++ b/frontend/src/components/campAdmin/DialogPeriodDateEdit.vue
@@ -23,10 +23,10 @@
       />
       <div class="e-form-container">
         <v-text-field
-          :value="endString"
+          :model-value="endString"
           :label="$tc('entity.period.fields.end')"
           hide-details
-          filled
+          variant="filled"
           disabled
         >
           <template #prepend><v-icon>mdi-calendar-end</v-icon></template>
@@ -44,10 +44,10 @@
       />
       <div class="e-form-container">
         <v-text-field
-          :value="endString"
+          :model-value="endString"
           :label="$tc('entity.period.fields.end')"
           hide-details
-          filled
+          variant="filled"
           disabled
         >
           <template #prepend>
@@ -60,10 +60,10 @@
       <p>{{ $tc('components.campAdmin.dialogPeriodDateEdit.periodChangeEnd') }}</p>
       <div class="e-form-container">
         <v-text-field
-          :value="startString"
+          :model-value="startString"
           :label="$tc('entity.period.fields.start')"
           hide-details
-          filled
+          variant="filled"
           disabled
         >
           <template #prepend>
@@ -81,10 +81,10 @@
     </div>
     <div class="e-form-container">
       <v-text-field
-        :value="periodDurationInDays"
+        :model-value="periodDurationInDays"
         :label="$tc('components.campAdmin.dialogPeriodDateEdit.periodDuration')"
         hide-details
-        filled
+        variant="filled"
         disabled
       >
         <template #prepend><v-icon>mdi-calendar-expand-horizontal</v-icon></template>
diff --git a/frontend/src/components/campCreate/CampCreateStep1.vue b/frontend/src/components/campCreate/CampCreateStep1.vue
index a85260d9a8..3b130d5f06 100644
--- a/frontend/src/components/campCreate/CampCreateStep1.vue
+++ b/frontend/src/components/campCreate/CampCreateStep1.vue
@@ -29,7 +29,7 @@
         <v-spacer />
         <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
         <ButtonContinue v-if="valid" @click="$emit('next-step')" />
-        <v-tooltip v-else top>
+        <v-tooltip v-else location="top">
           <template #activator="{ attrs, on }">
             <v-btn
               elevation="0"
diff --git a/frontend/src/components/campCreate/CampCreateStep2.vue b/frontend/src/components/campCreate/CampCreateStep2.vue
index db231c7e80..b0e6fb22b3 100644
--- a/frontend/src/components/campCreate/CampCreateStep2.vue
+++ b/frontend/src/components/campCreate/CampCreateStep2.vue
@@ -18,7 +18,7 @@
           <h3 class="mt-2 h3">
             {{ $tc('components.campCreate.campCreateStep2.preview') }}
           </h3>
-          <v-list class="w-100" dense color="transparent">
+          <v-list class="w-100" density="compact" color="transparent">
             <v-subheader class="px-0" style="height: auto">
               {{ $tc('components.campCreate.campCreateStep2.category') }}
             </v-subheader>
@@ -30,7 +30,7 @@
               <v-list-item-title class="d-flex gap-2 align-baseline">
                 <CategoryChip :category="category" class="mx-0 flex-shrink-0" dense />
                 <span class="font-weight-medium">{{ category.name }}</span>
-                <small class="blue-grey--text">{{
+                <small class="text-blue-grey">{{
                   category
                     .preferredContentTypes()
                     .items.map((item) =>
@@ -41,7 +41,7 @@
               </v-list-item-title>
             </v-list-item>
           </v-list>
-          <v-list class="w-100" dense color="transparent">
+          <v-list class="w-100" density="compact" color="transparent">
             <v-subheader class="px-0" style="height: auto">
               {{ $tc('components.campCreate.campCreateStep2.progressStates') }}
             </v-subheader>
@@ -74,12 +74,12 @@
       <v-divider />
       <ContentActions>
         <v-btn
-          text
+          variant="text"
           color="secondary"
           :disabled="isSaving"
           @click="$emit('previous-step')"
         >
-          <v-icon left>mdi-arrow-left</v-icon>
+          <v-icon start>mdi-arrow-left</v-icon>
           {{ $tc('global.button.back') }}
         </v-btn>
         <div class="ml-auto">
@@ -87,7 +87,7 @@
           <ButtonAdd v-if="valid" type="submit" :loading="isSaving">
             {{ $tc('components.campCreate.campCreateStep2.create') }}
           </ButtonAdd>
-          <v-tooltip v-else top>
+          <v-tooltip v-else location="top">
             <template #activator="{ attrs, on }">
               <ButtonAdd
                 color="secondary"
diff --git a/frontend/src/components/collaborator/CollaboratorEdit.vue b/frontend/src/components/collaborator/CollaboratorEdit.vue
index 89a43273df..15d466b8fd 100644
--- a/frontend/src/components/collaborator/CollaboratorEdit.vue
+++ b/frontend/src/components/collaborator/CollaboratorEdit.vue
@@ -31,7 +31,7 @@
         v-if="collaborator.status === 'invited'"
         text
         class="v-btn--has-bg"
-        color="blue-grey darken-2"
+        color="blue-grey-darken-2"
         :icon="
           resendingEmail
             ? 'mdi-refresh'
@@ -71,7 +71,7 @@
         <v-tooltip
           v-if="collaborator.status !== 'inactive'"
           :disabled="disabled || !isLastManager"
-          top
+          location="top"
           eager
         >
           <template #activator="{ on, attrs }">
diff --git a/frontend/src/components/collaborator/CollaboratorForm.vue b/frontend/src/components/collaborator/CollaboratorForm.vue
index 70bb7f90b9..69b3c5eec2 100644
--- a/frontend/src/components/collaborator/CollaboratorForm.vue
+++ b/frontend/src/components/collaborator/CollaboratorForm.vue
@@ -11,7 +11,7 @@
         <slot name="statusChange" />
       </template>
     </e-text-field>
-    <v-tooltip v-if="readonlyRole" eager bottom>
+    <v-tooltip v-if="readonlyRole" eager location="bottom">
       <span id="readonly">
         {{ $tc('components.collaborator.collaboratorForm.roleHint') }}
       </span>
@@ -34,8 +34,8 @@
             <template #selection="{ item }">
               <span
                 >{{ item.role }} &middot;
-                <span class="grey--text"
-                  ><v-icon v-for="icon in item.icons" :key="icon" x-small>{{
+                <span class="text-grey"
+                  ><v-icon v-for="icon in item.icons" :key="icon" size="x-small">{{
                     icon
                   }}</v-icon
                   >&thinsp; ></span
@@ -59,14 +59,15 @@
       vee-rules="required"
     >
       <template #item="{ item, on, attrs }">
-        <v-list-item v-bind="attrs" two-line v-on="on">
-          <v-list-item-content>
-            <v-list-item-title>{{ item.role }}</v-list-item-title>
-            <span class="caption">{{ item.abilities }}</span>
-          </v-list-item-content>
+        <v-list-item v-bind="attrs" lines="two" v-on="on">
+          <v-list-item-title>{{ item.role }}</v-list-item-title>
+          <span class="text-caption">{{ item.abilities }}</span>
+
           <v-list-item-action-text class="text-right">
             <span
-              ><v-icon v-for="icon in item.icons" :key="icon" small>{{ icon }}</v-icon
+              ><v-icon v-for="icon in item.icons" :key="icon" size="small">{{
+                icon
+              }}</v-icon
               >&thinsp;</span
             >
           </v-list-item-action-text>
@@ -75,8 +76,10 @@
       <template #selection="{ item }">
         <span
           >{{ item.role }} &middot;
-          <span class="grey--text"
-            ><v-icon v-for="icon in item.icons" :key="icon" x-small>{{ icon }}</v-icon
+          <span class="text-grey"
+            ><v-icon v-for="icon in item.icons" :key="icon" size="x-small">{{
+              icon
+            }}</v-icon
             >&thinsp;</span
           >
         </span>
diff --git a/frontend/src/components/collaborator/CollaboratorListItem.vue b/frontend/src/components/collaborator/CollaboratorListItem.vue
index caf948e019..8a9e3a518e 100644
--- a/frontend/src/components/collaborator/CollaboratorListItem.vue
+++ b/frontend/src/components/collaborator/CollaboratorListItem.vue
@@ -1,32 +1,32 @@
 <template>
-  <v-list-item class="px-2 rounded e-collaborator-item" two-line v-on="$listeners">
+  <v-list-item class="px-2 rounded e-collaborator-item" lines="two" v-on="$listeners">
     <v-list-item-action>
       <user-avatar size="40" :camp-collaboration="collaborator" omit-sr />
     </v-list-item-action>
-    <v-list-item-content>
-      <v-list-item-title>
-        {{ name }}
-      </v-list-item-title>
-      <v-list-item-subtitle>
-        <v-tooltip right>
-          <template #activator="{ on }">
-            <button v-on="on">
-              {{ $tc(roles[collaborator.role].roleTranslation)
-              }}<span>
-                &middot;<v-icon
-                  v-for="icon in roles[collaborator.role].icons"
-                  :key="icon"
-                  x-small
-                  class="vertical-baseline"
-                  >{{ icon }}</v-icon
-                >&thinsp;</span
-              >
-            </button>
-          </template>
-          {{ $tc(roles[collaborator.role].abilitiesTranslation) }}
-        </v-tooltip>
-      </v-list-item-subtitle>
-    </v-list-item-content>
+
+    <v-list-item-title>
+      {{ name }}
+    </v-list-item-title>
+    <v-list-item-subtitle>
+      <v-tooltip location="right">
+        <template #activator="{ on }">
+          <button v-on="on">
+            {{ $tc(roles[collaborator.role].roleTranslation)
+            }}<span>
+              &middot;<v-icon
+                v-for="icon in roles[collaborator.role].icons"
+                :key="icon"
+                size="x-small"
+                class="vertical-baseline"
+                >{{ icon }}</v-icon
+              >&thinsp;</span
+            >
+          </button>
+        </template>
+        {{ $tc(roles[collaborator.role].abilitiesTranslation) }}
+      </v-tooltip>
+    </v-list-item-subtitle>
+
     <v-list-item-action class="e-collaborator-item__actions ml-2">
       <button-edit
         v-if="editable"
diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 0a4696a1a4..6aa99cc4fe 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -49,7 +49,7 @@
     <td v-if="!scheduleEntry._meta.loading" class="w-100 contentrow">
       <router-link
         :to="routerLink"
-        class="text-decoration-none text-decoration-hover-underline black--text font-weight-medium"
+        class="text-decoration-none text-decoration-hover-underline text-black font-weight-medium"
       >
         {{ title }}
       </router-link>
diff --git a/frontend/src/components/dashboard/BooleanFilter.vue b/frontend/src/components/dashboard/BooleanFilter.vue
index e21abe0592..cb00a3c46a 100644
--- a/frontend/src/components/dashboard/BooleanFilter.vue
+++ b/frontend/src/components/dashboard/BooleanFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <v-chip
     label
-    outlined
+    variant="outlined"
     :color="value ? 'primary' : null"
     @click="$emit('input', !value)"
     >{{ label }}</v-chip
diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 433257b984..3a43cbda2a 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -1,27 +1,33 @@
 <template>
   <v-menu offset-y :close-on-content-click="!multiple">
     <template #activator="{ on, attrs }">
-      <v-chip label outlined :color="active ? 'primary' : null" v-bind="attrs" v-on="on">
+      <v-chip
+        label
+        variant="outlined"
+        :color="active ? 'primary' : null"
+        v-bind="attrs"
+        v-on="on"
+      >
         <span class="d-none d-sm-inline">{{
           labelValue ? `${label}: ${labelValue}` : label
         }}</span>
         <span class="d-sm-none">{{ labelValue || label }}</span>
-        <v-icon right>mdi-chevron-down</v-icon>
+        <v-icon end>mdi-chevron-down</v-icon>
       </v-chip>
     </template>
-    <v-list dense>
-      <v-list-item dense color="primary" @click.prevent="clear()">
-        <v-list-item-title class="d-flex align-center grey--text text--darken-1">
+    <v-list density="compact">
+      <v-list-item density="compact" color="primary" @click.prevent="clear()">
+        <v-list-item-title class="d-flex align-center text-grey-darken-1">
           <span class="flex-grow-1">{{
             $tc('components.dashboard.selectFilter.clear')
           }}</span>
-          <v-icon right class="d-flex grey--text">mdi-close</v-icon>
+          <v-icon end class="d-flex text-grey">mdi-close</v-icon>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
         v-for="(item, self) in processedItems"
         :key="self"
-        dense
+        density="compact"
         :input-value="item.selected"
         color="primary"
         @click.prevent="toggle(item.value, item.exclusiveNone)"
diff --git a/frontend/src/components/dialog/DialogBottomSheet.vue b/frontend/src/components/dialog/DialogBottomSheet.vue
index 1ff176d4fe..47af54dbcf 100644
--- a/frontend/src/components/dialog/DialogBottomSheet.vue
+++ b/frontend/src/components/dialog/DialogBottomSheet.vue
@@ -15,7 +15,7 @@
     <v-form @submit.prevent="handleSubmit(doSubmit)">
       <v-card rounded="b-0">
         <v-toolbar dense elevation="0" class="ec-dialog-toolbar">
-          <v-icon left>
+          <v-icon start>
             {{ icon }}
           </v-icon>
           <v-toolbar-title>
@@ -39,7 +39,13 @@
 
         <v-card-text class="py-0 error-area">
           <!-- error message via slot -->
-          <v-alert v-if="$slots.error" text outlined color="warning" icon="mdi-alert">
+          <v-alert
+            v-if="$slots.error"
+            text
+            variant="outlined"
+            color="warning"
+            icon="mdi-alert"
+          >
             <slot name="error" />
           </v-alert>
 
@@ -59,7 +65,7 @@
             <v-btn
               v-if="cancelVisible && cancelAction != null"
               :color="cancelColor"
-              text
+              variant="text"
               :disabled="!cancelEnabled"
               @click="doCancel"
             >
@@ -72,7 +78,7 @@
               :loading="currentlySaving"
               :disabled="!submitEnabled"
             >
-              <v-icon v-if="!!submitIcon" left>
+              <v-icon v-if="!!submitIcon" start>
                 {{ submitIcon }}
               </v-icon>
               {{ submitLabel }}
diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
index c07efe90da..484e95396c 100644
--- a/frontend/src/components/dialog/DialogForm.vue
+++ b/frontend/src/components/dialog/DialogForm.vue
@@ -4,10 +4,10 @@
     content-class="ec-dialog-form"
     :fullscreen="$vuetify.display.xsOnly"
     eager
-    :value="value"
+    :model-value="value"
     :max-width="maxWidth"
     v-on="$listeners"
-    @input="onInput"
+    @update:model-value="onInput"
   >
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
@@ -17,7 +17,7 @@
     <v-form @submit.prevent="handleSubmit(doSubmit)">
       <v-card>
         <v-toolbar dense elevation="0" class="ec-dialog-toolbar">
-          <v-icon left>
+          <v-icon start>
             {{ icon }}
           </v-icon>
           <v-toolbar-title>
@@ -41,7 +41,13 @@
 
         <v-card-text>
           <!-- error message via slot -->
-          <v-alert v-if="$slots.error" text outlined color="warning" icon="mdi-alert">
+          <v-alert
+            v-if="$slots.error"
+            text
+            variant="outlined"
+            color="warning"
+            icon="mdi-alert"
+          >
             <slot name="error" />
           </v-alert>
 
@@ -55,7 +61,7 @@
           <v-btn
             v-if="cancelVisible && cancelAction != null"
             :color="cancelColor"
-            text
+            variant="text"
             :disabled="!cancelEnabled"
             @click="doCancel"
           >
@@ -68,7 +74,7 @@
             :loading="currentlySaving"
             :disabled="!submitEnabled"
           >
-            <v-icon v-if="!!submitIcon" left>
+            <v-icon v-if="!!submitIcon" start>
               {{ submitIcon }}
             </v-icon>
             {{ submitLabel }}
diff --git a/frontend/src/components/form/ServerError.vue b/frontend/src/components/form/ServerError.vue
index d827c0ab63..66b02f1a44 100644
--- a/frontend/src/components/form/ServerError.vue
+++ b/frontend/src/components/form/ServerError.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-alert v-if="serverError" text outlined color="red darken-2" icon="mdi-alert-circle">
+  <v-alert
+    v-if="serverError"
+    text
+    variant="outlined"
+    color="red-darken-2"
+    icon="mdi-alert-circle"
+  >
     <server-error-content :server-error="serverError" />
   </v-alert>
 </template>
diff --git a/frontend/src/components/form/api/ApiWrapperAppend.vue b/frontend/src/components/form/api/ApiWrapperAppend.vue
index 17ee97cc07..c67e70eb6f 100644
--- a/frontend/src/components/form/api/ApiWrapperAppend.vue
+++ b/frontend/src/components/form/api/ApiWrapperAppend.vue
@@ -9,13 +9,13 @@
 
     <!-- Retry/Cancel button if saving failed -->
     <template v-if="wrapper.hasServerError">
-      <v-tooltip bottom class="ml-auto">
+      <v-tooltip location="bottom" class="ml-auto">
         <template #activator="{ on }">
           <v-btn
             fab
             dark
-            depressed
-            x-small
+            variant="flat"
+            size="x-small"
             color="error"
             type="submit"
             class="mr-1"
@@ -28,13 +28,13 @@
         </template>
         <span>{{ $tc('global.button.tryagain') }}</span>
       </v-tooltip>
-      <v-tooltip bottom class="ml-auto">
+      <v-tooltip location="bottom" class="ml-auto">
         <template #activator="{ on }">
           <v-btn
             fab
             dark
-            depressed
-            x-small
+            variant="flat"
+            size="x-small"
             color="grey"
             :aria-label="$tc('global.button.cancel')"
             v-on="on"
@@ -48,13 +48,13 @@
     </template>
 
     <template v-else-if="!wrapper.autoSave">
-      <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+      <v-tooltip v-if="wrapper.dirty" location="bottom" class="ml-auto">
         <template #activator="{ on }">
           <v-btn
             fab
             dark
-            depressed
-            x-small
+            variant="flat"
+            size="x-small"
             color="success"
             type="submit"
             class="mr-1"
@@ -66,13 +66,13 @@
         </template>
         <span>{{ $tc('global.button.save') }}</span>
       </v-tooltip>
-      <v-tooltip bottom class="ml-auto">
+      <v-tooltip location="bottom" class="ml-auto">
         <template #activator="{ on }">
           <v-btn
             fab
             dark
-            depressed
-            x-small
+            variant="flat"
+            size="x-small"
             color="grey"
             :aria-label="$tc('global.button.cancel')"
             v-on="on"
diff --git a/frontend/src/components/form/base/ECheckbox.vue b/frontend/src/components/form/base/ECheckbox.vue
index 8422964701..9ae5bcffb7 100644
--- a/frontend/src/components/form/base/ECheckbox.vue
+++ b/frontend/src/components/form/base/ECheckbox.vue
@@ -13,8 +13,8 @@
     :error-messages="veeErrors.concat(errorMessages)"
     :label="label || name"
     :class="[inputClass]"
-    :input-value="value"
-    @change="$emit('input', $event)"
+    :model-value="value"
+    @update:model-value="$emit('input', $event)"
     v-on="$listeners"
   >
     <!-- passing through all slots -->
diff --git a/frontend/src/components/form/base/EColorPicker.vue b/frontend/src/components/form/base/EColorPicker.vue
index 96bfd8e9cf..4277a887fa 100644
--- a/frontend/src/components/form/base/EColorPicker.vue
+++ b/frontend/src/components/form/base/EColorPicker.vue
@@ -18,9 +18,9 @@ Displays a field as a color picker (can be used with v-model)
     <template #default="picker">
       <v-card :style="{ '--picker-contrast-color': contrast }" data-testid="colorpicker">
         <v-color-picker
-          :value="removeAlpha(picker.value || '')"
+          :model-value="removeAlpha(picker.value || '')"
           flat
-          @input="picker.onInput"
+          @update:model-value="picker.onInput"
         />
         <v-divider />
         <div class="d-flex gap-2 pa-4 flex-wrap">
diff --git a/frontend/src/components/form/base/EDatePicker.vue b/frontend/src/components/form/base/EDatePicker.vue
index 18269013cf..047f255eb5 100644
--- a/frontend/src/components/form/base/EDatePicker.vue
+++ b/frontend/src/components/form/base/EDatePicker.vue
@@ -33,7 +33,7 @@ Displays a field as a date picker (can be used with v-model)
         @input="picker.onInput"
       >
         <v-spacer />
-        <v-btn text color="primary" @click="picker.close">
+        <v-btn variant="text" color="primary" @click="picker.close">
           {{ $tc('global.button.close') }}
         </v-btn>
       </v-date-picker>
diff --git a/frontend/src/components/form/base/ESwitch.vue b/frontend/src/components/form/base/ESwitch.vue
index b6e31370bd..07157d4a50 100644
--- a/frontend/src/components/form/base/ESwitch.vue
+++ b/frontend/src/components/form/base/ESwitch.vue
@@ -13,8 +13,8 @@
     :error-messages="veeErrors.concat(errorMessages)"
     :label="label || name"
     :class="[inputClass]"
-    :input-value="value"
-    @change="$emit('input', $event)"
+    :model-value="value"
+    @update:model-value="$emit('input', $event)"
     v-on="$listeners"
   >
     <!-- passing through all slots -->
diff --git a/frontend/src/components/form/base/ETimePicker.vue b/frontend/src/components/form/base/ETimePicker.vue
index b2e30d2ad0..d5449588e7 100644
--- a/frontend/src/components/form/base/ETimePicker.vue
+++ b/frontend/src/components/form/base/ETimePicker.vue
@@ -28,7 +28,7 @@ Allows 15min steps only
         @input="picker.onInput"
       >
         <v-spacer />
-        <v-btn text color="primary" @click="picker.close">
+        <v-btn variant="text" color="primary" @click="picker.close">
           {{ $tc('global.button.close') }}
         </v-btn>
       </v-time-picker>
diff --git a/frontend/src/components/form/tiptap/TiptapEditor.vue b/frontend/src/components/form/tiptap/TiptapEditor.vue
index 9ea1bb06dc..802e5daf25 100644
--- a/frontend/src/components/form/tiptap/TiptapEditor.vue
+++ b/frontend/src/components/form/tiptap/TiptapEditor.vue
@@ -5,7 +5,7 @@
       :editor="editor"
       :tippy-options="{ maxWidth: 'none' }"
     >
-      <div class="elevation-4 ec-tiptap-toolbar white">
+      <div class="elevation-4 ec-tiptap-toolbar bg-white">
         <v-toolbar class="elevation-0 ec-tiptap-toolbar--first" dense color="transparent">
           <TiptapToolbarButton
             icon="mdi-format-bold"
diff --git a/frontend/src/components/generic/IconWithTooltip.vue b/frontend/src/components/generic/IconWithTooltip.vue
index ac487913ea..21d47dc5d6 100644
--- a/frontend/src/components/generic/IconWithTooltip.vue
+++ b/frontend/src/components/generic/IconWithTooltip.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-tooltip v-if="showIcon" v-model="showTooltip" max-width="300px" color="#333" bottom>
+  <v-tooltip
+    v-if="showIcon"
+    v-model="showTooltip"
+    max-width="300px"
+    color="#333"
+    location="bottom"
+  >
     <!-- eslint-disable-next-line vue/no-unused-vars -->
     <template #activator="_">
       <v-btn
diff --git a/frontend/src/components/generic/LockButton.vue b/frontend/src/components/generic/LockButton.vue
index 6781835859..a2654d6ad7 100644
--- a/frontend/src/components/generic/LockButton.vue
+++ b/frontend/src/components/generic/LockButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip :disabled="tooltip == ''" bottom>
+  <v-tooltip :disabled="tooltip == ''" location="bottom">
     <template #activator="{ on }">
       <button
         :aria-label="tooltip"
@@ -9,8 +9,8 @@
         @click="onClick"
         v-on="on"
       >
-        <v-icon v-if="value" small>mdi-lock-open-variant</v-icon>
-        <v-icon v-else small>mdi-lock</v-icon>
+        <v-icon v-if="value" size="small">mdi-lock-open-variant</v-icon>
+        <v-icon v-else size="small">mdi-lock</v-icon>
       </button>
     </template>
     <span>{{ tooltip }}</span>
diff --git a/frontend/src/components/layout/AuthContainer.vue b/frontend/src/components/layout/AuthContainer.vue
index 4a793fa6e4..93f8117775 100644
--- a/frontend/src/components/layout/AuthContainer.vue
+++ b/frontend/src/components/layout/AuthContainer.vue
@@ -10,7 +10,7 @@
     >
       <v-card
         class="pa-8 sso--card"
-        :tile="$vuetify.display.xsOnly"
+        :rounded="$vuetify.display.xsOnly && '0'"
         :class="{ 'fill-min-height': $vuetify.display.xsOnly }"
       >
         <slot />
diff --git a/frontend/src/components/layout/ContentCard.vue b/frontend/src/components/layout/ContentCard.vue
index 224704aa83..013f7573b1 100644
--- a/frontend/src/components/layout/ContentCard.vue
+++ b/frontend/src/components/layout/ContentCard.vue
@@ -6,7 +6,7 @@ Displays the content wrapped inside a card.
   <v-card
     :max-width="maxWidth"
     width="100%"
-    :tile="$vuetify.display.xsOnly"
+    :rounded="$vuetify.display.xsOnly && '0'"
     class="mx-auto"
   >
     <v-toolbar
diff --git a/frontend/src/components/layout/ContentGroup.vue b/frontend/src/components/layout/ContentGroup.vue
index 6e7a31707c..c64be90c9c 100644
--- a/frontend/src/components/layout/ContentGroup.vue
+++ b/frontend/src/components/layout/ContentGroup.vue
@@ -8,9 +8,9 @@ Displays the content wrapped inside a card.
       <component
         :is="titleTag"
         v-if="title"
-        class="ec-content-group__title py-1 subtitle-1"
+        class="ec-content-group__title py-1 text-subtitle-1"
       >
-        <v-icon v-if="icon" left>{{ icon }}</v-icon>
+        <v-icon v-if="icon" start>{{ icon }}</v-icon>
         {{ title }}
         <slot name="title-actions" />
       </component>
diff --git a/frontend/src/components/layout/LanguageSwitcher.vue b/frontend/src/components/layout/LanguageSwitcher.vue
index c219b7fa34..100d3ec503 100644
--- a/frontend/src/components/layout/LanguageSwitcher.vue
+++ b/frontend/src/components/layout/LanguageSwitcher.vue
@@ -3,18 +3,18 @@
     <template #activator="{ on, attrs }">
       <v-btn
         id="languageSwitcher"
-        text
+        variant="text"
         class="my-n2"
-        small
+        size="small"
         :aria-label="$tc('global.changeLanguage')"
         v-bind="attrs"
         v-on="on"
       >
-        <v-icon left small>mdi-translate</v-icon>
+        <v-icon start size="small">mdi-translate</v-icon>
         {{ $tc('global.language') }}
       </v-btn>
     </template>
-    <v-list dense tag="ul" aria-labelledby="languageSwitcher">
+    <v-list density="compact" tag="ul" aria-labelledby="languageSwitcher">
       <v-list-item
         v-for="item in $root.$i18n.availableLocales"
         :key="item"
diff --git a/frontend/src/components/layout/SidebarListItem.vue b/frontend/src/components/layout/SidebarListItem.vue
index a46f33aecf..4e485194f0 100644
--- a/frontend/src/components/layout/SidebarListItem.vue
+++ b/frontend/src/components/layout/SidebarListItem.vue
@@ -5,10 +5,10 @@
         <v-icon v-if="icon">{{ icon }}</v-icon>
       </v-list-item-icon>
     </slot>
-    <v-list-item-content>
-      <v-list-item-title>{{ title }}</v-list-item-title>
-      <v-list-item-subtitle v-if="subtitle">{{ subtitle }}</v-list-item-subtitle>
-    </v-list-item-content>
+
+    <v-list-item-title>{{ title }}</v-list-item-title>
+    <v-list-item-subtitle v-if="subtitle">{{ subtitle }}</v-list-item-subtitle>
+
     <v-list-item-icon v-if="!hideChevron">
       <v-icon style="opacity: 0.6">mdi-chevron-right</v-icon>
     </v-list-item-icon>
diff --git a/frontend/src/components/material/MaterialCreateItem.vue b/frontend/src/components/material/MaterialCreateItem.vue
index 99cc5477cc..ac2d7455b7 100644
--- a/frontend/src/components/material/MaterialCreateItem.vue
+++ b/frontend/src/components/material/MaterialCreateItem.vue
@@ -58,7 +58,7 @@
           {{ $tc('components.material.materialCreateItem.noMaterialListAvailable') }}
         </p>
         <v-btn :to="campRoute(camp, 'admin')">
-          <v-icon :left="$vuetify.display.mdAndUp">mdi-cogs</v-icon>
+          <v-icon :start="$vuetify.display.mdAndUp">mdi-cogs</v-icon>
           {{ $tc('components.material.materialCreateItem.campSettingsButton') }}
         </v-btn>
       </div>
diff --git a/frontend/src/components/material/MaterialLists.vue b/frontend/src/components/material/MaterialLists.vue
index e9fb7b64d8..1b1f8b8321 100644
--- a/frontend/src/components/material/MaterialLists.vue
+++ b/frontend/src/components/material/MaterialLists.vue
@@ -1,11 +1,10 @@
 <template>
   <v-list>
     <v-list-item :to="materialListRoute(camp(), '/all', { isDetail: true })" exact-path>
-      <v-list-item-content>
-        {{ $tc('components.material.materialLists.overview') }}
-      </v-list-item-content>
+      {{ $tc('components.material.materialLists.overview') }}
+
       <v-list-item-icon>
-        <v-icon color="blue-grey lighten-3">mdi-chevron-right</v-icon>
+        <v-icon color="blue-grey-lighten-3">mdi-chevron-right</v-icon>
       </v-list-item-icon>
     </v-list-item>
     <v-skeleton-loader v-if="materialLists._meta.loading" type="list-item@3" />
@@ -15,22 +14,21 @@
       :to="materialListRoute(camp(), materialList, { isDetail: true })"
       exact-path
     >
-      <v-list-item-content>
-        <v-list-item-title>{{ materialList.name }}</v-list-item-title>
-        <v-list-item-subtitle
-          >{{
-            $tc(
-              'components.material.materialLists.materialsCount',
-              materialList.itemCount,
-              {
-                count: materialList.itemCount,
-              }
-            )
-          }}
-        </v-list-item-subtitle>
-      </v-list-item-content>
+      <v-list-item-title>{{ materialList.name }}</v-list-item-title>
+      <v-list-item-subtitle
+        >{{
+          $tc(
+            'components.material.materialLists.materialsCount',
+            materialList.itemCount,
+            {
+              count: materialList.itemCount,
+            }
+          )
+        }}
+      </v-list-item-subtitle>
+
       <v-list-item-icon>
-        <v-icon color="blue-grey lighten-3">mdi-chevron-right</v-icon>
+        <v-icon color="blue-grey-lighten-3">mdi-chevron-right</v-icon>
       </v-list-item-icon>
     </v-list-item>
   </v-list>
diff --git a/frontend/src/components/material/MaterialListsEdit.vue b/frontend/src/components/material/MaterialListsEdit.vue
index ef3f4dae9c..d0ec40bde9 100644
--- a/frontend/src/components/material/MaterialListsEdit.vue
+++ b/frontend/src/components/material/MaterialListsEdit.vue
@@ -8,9 +8,8 @@
     >
       <template #activator="{ on }">
         <v-list-item exact-path v-on="on">
-          <v-list-item-content>
-            <v-list-item-title>{{ materialList.name }}</v-list-item-title>
-          </v-list-item-content>
+          <v-list-item-title>{{ materialList.name }}</v-list-item-title>
+
           <v-list-item-action class="e-collaborator-item__actions ml-2">
             <ButtonEdit color="primary--text" text class="my-n1 v-btn--has-bg" />
           </v-list-item-action>
diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
index 33fd03616e..b34b9335a9 100644
--- a/frontend/src/components/material/MaterialTable.vue
+++ b/frontend/src/components/material/MaterialTable.vue
@@ -8,7 +8,7 @@
     :disable-sort="layoutMode"
     mobile-breakpoint="0"
     item-class="rowClass"
-    class="transparent"
+    class="bg-transparent"
     :class="{
       'ec-material-table--dense': !isDefaultVariant,
       'ec-material-table--default': isDefaultVariant,
@@ -123,9 +123,9 @@
         />
 
         <div v-if="item.serverError" class="d-flex gap-2 align-center">
-          <v-tooltip top color="red darken-2">
+          <v-tooltip location="top" color="red-darken-2">
             <template #activator="{ on, attrs }">
-              <span v-bind="attrs" class="red--text text--darken-2" v-on="on">{{
+              <span v-bind="attrs" class="text-red-darken-2" v-on="on">{{
                 $tc('global.serverError.short')
               }}</span>
             </template>
@@ -157,7 +157,7 @@
               : $tc('components.material.materialTable.reference')
           }}
         </span>
-        <v-icon aria-hidden="true" small :color="periodOnly ? 'primary' : null">
+        <v-icon aria-hidden="true" size="small" :color="periodOnly ? 'primary' : null">
           {{ periodOnly ? 'mdi-filter' : 'mdi-filter-outline' }}
         </v-icon>
       </button>
diff --git a/frontend/src/components/material/PeriodMaterialLists.vue b/frontend/src/components/material/PeriodMaterialLists.vue
index 8bbcad20a5..fea2a29a43 100644
--- a/frontend/src/components/material/PeriodMaterialLists.vue
+++ b/frontend/src/components/material/PeriodMaterialLists.vue
@@ -1,11 +1,11 @@
 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header>
-      <h3 class="grey--text text--darken-1">
+    <v-expansion-panel-title>
+      <h3 class="text-grey-darken-1">
         {{ period.description }}
       </h3>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <material-table
         :camp="camp"
         :material-item-collection="materialItemCollection"
@@ -13,7 +13,7 @@
         :period="period"
         :disabled="disabled"
       />
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
diff --git a/frontend/src/components/navigation/Logo.vue b/frontend/src/components/navigation/Logo.vue
index d45d1078df..dd7dfc6708 100644
--- a/frontend/src/components/navigation/Logo.vue
+++ b/frontend/src/components/navigation/Logo.vue
@@ -1,6 +1,13 @@
 <template>
   <v-toolbar-items>
-    <v-btn text class="px-2 e-logo" min-width="0" rounded exact :to="{ name: 'home' }">
+    <v-btn
+      variant="text"
+      class="px-2 e-logo"
+      min-width="0"
+      rounded
+      exact
+      :to="{ name: 'home' }"
+    >
       <v-toolbar-title>
         <v-icon>$ecamp</v-icon><span v-show="text" class="mx-2 e-logo-text">eCamp</span>
       </v-toolbar-title>
diff --git a/frontend/src/components/navigation/SideBar.vue b/frontend/src/components/navigation/SideBar.vue
index b1ce2b3c6e..82e95c96a9 100644
--- a/frontend/src/components/navigation/SideBar.vue
+++ b/frontend/src/components/navigation/SideBar.vue
@@ -7,7 +7,7 @@
     clipped
     permanent
     :temporary="!mini && !$vuetify.display.mdAndUp"
-    mini-variant-width="40"
+    rail-width="40"
     :width="$vuetify.display.xl || (!mini && !$vuetify.display.mdAndUp) ? 350 : 256"
     :color="!title || mini ? 'blue-grey lighten-4' : null"
   >
@@ -16,7 +16,7 @@
         <v-icon>{{ icon }}</v-icon>
       </v-list-item>
       <v-list-item v-else class="py-1 pr-2">
-        <v-list-item-title class="subtitle-1 font-weight-bold">
+        <v-list-item-title class="text-subtitle-1 font-weight-bold">
           {{ title }}
         </v-list-item-title>
         <v-btn icon @click.stop="overrideExpanded = false">
diff --git a/frontend/src/components/navigation/UserMeta.vue b/frontend/src/components/navigation/UserMeta.vue
index 92764bb7b9..6341b7cdd2 100644
--- a/frontend/src/components/navigation/UserMeta.vue
+++ b/frontend/src/components/navigation/UserMeta.vue
@@ -4,7 +4,7 @@
     v-model="open"
     offset-y
     dark
-    right
+    location="right"
     :content-class="
       ['ec-usermenu', $vuetify.display.xsOnly && 'rounded-lg mt-2'].join(' ')
     "
@@ -15,8 +15,8 @@
     <template #activator="{ on, value, attrs }">
       <v-toolbar-items v-if="!avatarOnly">
         <v-btn
-          right
-          text
+          location="right"
+          variant="text"
           v-bind="attrs"
           :class="[btnClasses, { 'v-btn--open': value }]"
           v-on="on"
@@ -30,7 +30,7 @@
       <v-btn
         v-else
         fab
-        text
+        variant="text"
         v-bind="attrs"
         :class="[btnClasses, { 'v-btn--open': value }]"
         v-on="on"
@@ -41,18 +41,18 @@
         </span>
       </v-btn>
     </template>
-    <v-list dense class="user-nav" tag="ul" light color="blue-grey lighten-5">
+    <v-list density="compact" class="user-nav" tag="ul" light color="blue-grey-lighten-5">
       <v-list-item
         tag="li"
         block
         :to="{ name: 'profile', query: { isDetail: true } }"
         @click="open = false"
       >
-        <v-icon left>mdi-account</v-icon>
+        <v-icon start>mdi-account</v-icon>
         <span>{{ $tc('components.navigation.userMeta.profile') }}</span>
       </v-list-item>
       <v-list-item block tag="li" exact :to="{ name: 'camps' }" @click="open = false">
-        <v-icon left>mdi-format-list-bulleted-triangle</v-icon>
+        <v-icon start>mdi-format-list-bulleted-triangle</v-icon>
         <span>{{ $tc('components.navigation.userMeta.myCamps') }}</span>
       </v-list-item>
       <v-list-item block tag="li" @click="logout">
@@ -62,7 +62,7 @@
           size="18"
           class="mr-2"
         />
-        <v-icon v-else left>mdi-logout</v-icon>
+        <v-icon v-else start>mdi-logout</v-icon>
 
         <span>{{ $tc('components.navigation.userMeta.logOut') }}</span>
       </v-list-item>
diff --git a/frontend/src/components/print/PrintConfigurator.vue b/frontend/src/components/print/PrintConfigurator.vue
index a8740c6850..b5ccef9141 100644
--- a/frontend/src/components/print/PrintConfigurator.vue
+++ b/frontend/src/components/print/PrintConfigurator.vue
@@ -51,13 +51,13 @@
 
       <template #drawer>
         <v-expansion-panels v-if="isDev" flat class="e-print-configurator__cnf">
-          <v-expansion-panel class="transparent rounded-0">
-            <v-expansion-panel-header class="subtitle py-2"
+          <v-expansion-panel class="bg-transparent rounded-0">
+            <v-expansion-panel-title class="subtitle py-2"
               >View Print-Config
-            </v-expansion-panel-header>
-            <v-expansion-panel-content>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
               <pre style="font-size: 12px">{{ cnf }}</pre>
-            </v-expansion-panel-content>
+            </v-expansion-panel-text>
           </v-expansion-panel>
         </v-expansion-panels>
       </template>
diff --git a/frontend/src/components/print/configurator/PagesConfig.vue b/frontend/src/components/print/configurator/PagesConfig.vue
index bb5331af6f..f0a20bd912 100644
--- a/frontend/src/components/print/configurator/PagesConfig.vue
+++ b/frontend/src/components/print/configurator/PagesConfig.vue
@@ -16,9 +16,9 @@
       />
       <div class="e-pages-config__inner" v-bind="$attrs" v-on="$listeners">
         <div class="e-pages-config__scroller">
-          <v-icon v-if="template" x-large class="ma-auto">mdi-plus</v-icon>
+          <v-icon v-if="template" size="x-large" class="ma-auto">mdi-plus</v-icon>
           <h3
-            class="e-pages-config__title title py-4 white sticky"
+            class="e-pages-config__text-h6 text-h6 py-4 bg-white sticky"
             :class="{ handle: !template }"
           >
             <TextAlignBaseline v-if="!template"
diff --git a/frontend/src/components/print/print-client/DownloadClientPdfButton.vue b/frontend/src/components/print/print-client/DownloadClientPdfButton.vue
index f72b67c835..bd682d6d62 100644
--- a/frontend/src/components/print/print-client/DownloadClientPdfButton.vue
+++ b/frontend/src/components/print/print-client/DownloadClientPdfButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-btn color="primary" :loading="loading" outlined @click="generatePdf">
+    <v-btn color="primary" :loading="loading" variant="outlined" @click="generatePdf">
       <v-icon>mdi-printer</v-icon>
       <div class="mx-1">
         {{ $tc('components.print.printClient.downloadClientPdfButton.label') }}
diff --git a/frontend/src/components/print/print-client/PrintPreviewClient.vue b/frontend/src/components/print/print-client/PrintPreviewClient.vue
index 6233217d9f..072ff7e323 100644
--- a/frontend/src/components/print/print-client/PrintPreviewClient.vue
+++ b/frontend/src/components/print/print-client/PrintPreviewClient.vue
@@ -7,7 +7,7 @@
       v-bind="$attrs"
       height="800px"
     />
-    <v-overlay absolute :value="loading || error" z-index="2">
+    <v-overlay absolute :model-value="loading || error" z-index="2">
       <div v-if="error">
         {{ $tc('components.print.printClient.printPreviewClient.previewError') }}
       </div>
diff --git a/frontend/src/components/print/print-nuxt/DownloadNuxtPdfButton.vue b/frontend/src/components/print/print-nuxt/DownloadNuxtPdfButton.vue
index a5f464022d..14012344dd 100644
--- a/frontend/src/components/print/print-nuxt/DownloadNuxtPdfButton.vue
+++ b/frontend/src/components/print/print-nuxt/DownloadNuxtPdfButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-btn color="primary" :loading="loading" outlined @click="generatePdf">
+    <v-btn color="primary" :loading="loading" variant="outlined" @click="generatePdf">
       <v-icon>mdi-printer</v-icon>
       <div class="mx-1">
         {{ $tc('components.print.printNuxt.downloadNuxtPdfButton.label') }}
diff --git a/frontend/src/components/print/print-nuxt/PrintPreviewNuxt.vue b/frontend/src/components/print/print-nuxt/PrintPreviewNuxt.vue
index a955781f23..0c6badabda 100644
--- a/frontend/src/components/print/print-nuxt/PrintPreviewNuxt.vue
+++ b/frontend/src/components/print/print-nuxt/PrintPreviewNuxt.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="position: relative">
-    <v-btn class="float-right" text :href="url" target="_blank">
-      <v-icon left>mdi-open-in-new</v-icon>
+    <v-btn class="float-right" variant="text" :href="url" target="_blank">
+      <v-icon start>mdi-open-in-new</v-icon>
       {{ $tc('components.print.printNuxt.printPreviewNuxt.openPreview') }}
     </v-btn>
 
@@ -18,7 +18,7 @@
       v-bind="$attrs"
     />
 
-    <v-overlay absolute :value="loading || error" z-index="2">
+    <v-overlay absolute :model-value="loading || error" z-index="2">
       <div v-if="error">
         {{ $tc('components.print.printNuxt.printPreviewNuxt.previewError') }}
       </div>
diff --git a/frontend/src/components/program/DialogActivityCreate.vue b/frontend/src/components/program/DialogActivityCreate.vue
index 4eb8ea8a49..3a78f6e89d 100644
--- a/frontend/src/components/program/DialogActivityCreate.vue
+++ b/frontend/src/components/program/DialogActivityCreate.vue
@@ -20,7 +20,7 @@
       <CopyActivityInfoDialog @closed="refreshCopyActivitySource">
         <template #activator="{ on }">
           <v-btn v-show="clipboardPermission === 'prompt'" v-on="on">
-            <v-icon left>mdi-information-outline</v-icon>
+            <v-icon start>mdi-information-outline</v-icon>
             {{ $tc('components.program.dialogActivityCreate.copyPastActivity') }}
           </v-btn>
         </template>
@@ -44,24 +44,20 @@
           </div>
         </div>
         <v-list-item
-          class="ec-copy-source rounded-xl blue-grey lighten-5 blue-grey--text text--darken-4 mt-1"
+          class="ec-copy-source rounded-xl bg-blue-grey-lighten-5 text-blue-grey-darken-4 mt-1"
         >
           <v-list-item-avatar>
             <v-icon color="blue-grey">mdi-clipboard-check-outline</v-icon>
           </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>
-              <CategoryChip
-                :category="copyActivitySource.category()"
-                class="mx-1"
-                dense
-              />
-              {{ copyActivitySource.title }}
-            </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ copyActivitySource.camp().title }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+
+          <v-list-item-title>
+            <CategoryChip :category="copyActivitySource.category()" class="mx-1" dense />
+            {{ copyActivitySource.title }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ copyActivitySource.camp().title }}
+          </v-list-item-subtitle>
+
           <v-list-item-action>
             <e-checkbox
               v-model="copyContent"
@@ -81,7 +77,7 @@
           <template #activator="scope">
             <v-btn
               :title="$tc('components.program.dialogActivityCreate.pasteActivity')"
-              text
+              variant="text"
               class="v-btn--has-bg"
               height="56"
               v-on="scope.on"
diff --git a/frontend/src/components/program/FormScheduleEntryList.vue b/frontend/src/components/program/FormScheduleEntryList.vue
index 747aabad26..27bb2f8e0d 100644
--- a/frontend/src/components/program/FormScheduleEntryList.vue
+++ b/frontend/src/components/program/FormScheduleEntryList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="e-form-container">
-    <v-card outlined color="grey lighten-3" class="period mb-2 rounded-b-0">
+    <v-card variant="outlined" color="grey-lighten-3" class="period mb-2 rounded-b-0">
       <v-row no-gutters>
         <v-col class="header mb-3">
           <legend class="pa-2 float-left">
diff --git a/frontend/src/components/program/PeriodSwitcher.vue b/frontend/src/components/program/PeriodSwitcher.vue
index 8642492430..ea4fc64c3a 100644
--- a/frontend/src/components/program/PeriodSwitcher.vue
+++ b/frontend/src/components/program/PeriodSwitcher.vue
@@ -3,8 +3,8 @@
     <v-menu offset-y>
       <template #activator="{ on, attrs, value }">
         <v-btn
-          text
-          large
+          variant="text"
+          size="large"
           class="justify-start px-2"
           height="auto"
           block
@@ -14,8 +14,8 @@
           <h1 class="text-subtitle-1">
             {{ period().description }}
           </h1>
-          <v-icon v-if="value" right>mdi-menu-up</v-icon>
-          <v-icon v-else right>mdi-menu-down</v-icon>
+          <v-icon v-if="value" end>mdi-menu-up</v-icon>
+          <v-icon v-else end>mdi-menu-down</v-icon>
         </v-btn>
       </template>
       <v-list>
@@ -24,20 +24,18 @@
           v-for="item in period().camp().periods().items"
           :key="item._meta.self"
           :to="periodRoute(item, routeName)"
-          two-line
+          lines="two"
         >
-          <v-list-item-content>
-            <v-list-item-title>{{ item.description }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ dateRange(item.start, item.end) }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <v-list-item-title>{{ item.description }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ dateRange(item.start, item.end) }}
+          </v-list-item-subtitle>
         </v-list-item>
       </v-list>
     </v-menu>
   </v-toolbar-items>
   <v-toolbar-title v-else>
-    <h1 class="subtitle-1">
+    <h1 class="text-subtitle-1">
       {{ period().description }}
     </h1>
   </v-toolbar-title>
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
index fc9a96f242..9d1c7ada9a 100644
--- a/frontend/src/components/program/ScheduleEntries.vue
+++ b/frontend/src/components/program/ScheduleEntries.vue
@@ -15,8 +15,7 @@
       dark
       fab
       style="z-index: 3"
-      bottom
-      right
+      location="bottom right"
       class="fab--bottom_nav float-right"
       color="red"
       @click.stop="createNewActivity()"
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index f1091ee1b4..4607eeca65 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -15,14 +15,14 @@
     <!-- Copy -->
     <v-btn
       v-if="!scheduleEntry.tmpEvent"
-      x-small
-      text
+      size="x-small"
+      variant="text"
       class="e-picasso-entry__copy-url rounded-sm pr-0"
       @click.prevent="copyUrlToClipboard"
       @mousedown.stop=""
       @mouseup.stop=""
     >
-      <v-icon x-small color="white">mdi-content-copy</v-icon>
+      <v-icon size="x-small" color="white">mdi-content-copy</v-icon>
     </v-btn>
 
     <CopyActivityInfoDialog ref="copyInfoDialog" />
@@ -37,14 +37,14 @@
     >
       <template #activator="{ on }">
         <v-btn
-          x-small
-          text
+          size="x-small"
+          variant="text"
           class="e-picasso-entry__quickedit rounded-sm pr-0"
           @click.prevent="on.click"
           @mousedown.stop=""
           @mouseup.stop=""
         >
-          <v-icon x-small color="white">mdi-pencil</v-icon>
+          <v-icon size="x-small" color="white">mdi-pencil</v-icon>
         </v-btn>
       </template>
     </DialogActivityEdit>
diff --git a/frontend/src/components/prompt/PopoverPrompt.vue b/frontend/src/components/prompt/PopoverPrompt.vue
index 8989ead37d..4018e4d655 100644
--- a/frontend/src/components/prompt/PopoverPrompt.vue
+++ b/frontend/src/components/prompt/PopoverPrompt.vue
@@ -4,10 +4,10 @@
     :content-class="contentClass"
     offset-y
     :close-on-content-click="false"
-    :close-on-click="true"
+    :persistent="!true"
     allow-overflow
     v-bind="{ ...$attrs, ...positions }"
-    @input="onInput"
+    @update:model-value="onInput"
   >
     <template #activator="{ attrs, on }">
       <slot name="activator" v-bind="{ attrs, on }" />
@@ -28,14 +28,20 @@
       }"
     >
       <slot />
-      <v-alert v-if="$slots.error" text outlined :color="color" icon="mdi-alert">
+      <v-alert
+        v-if="$slots.error"
+        text
+        variant="outlined"
+        :color="color"
+        icon="mdi-alert"
+      >
         <slot name="error" />
       </v-alert>
       <div class="ec-prompt-buttons mt-2">
         <v-btn
           v-if="cancelVisible && cancelAction != null"
           :color="cancelColor"
-          text
+          variant="text"
           :disabled="!cancelEnabled"
           class="v-btn--has-bg"
           @click="doCancel"
@@ -49,7 +55,7 @@
           :loading="isSaving"
           @click="doSubmit"
         >
-          <v-icon v-if="!!submitIcon" left>
+          <v-icon v-if="!!submitIcon" start>
             {{ submitIcon }}
           </v-icon>
           {{ submitLabel }}
diff --git a/frontend/src/components/story/StoryDay.vue b/frontend/src/components/story/StoryDay.vue
index 9cd7cebc28..3e449eb923 100644
--- a/frontend/src/components/story/StoryDay.vue
+++ b/frontend/src/components/story/StoryDay.vue
@@ -1,9 +1,9 @@
 <template>
   <v-expansion-panel ref="panel">
-    <v-expansion-panel-header>
+    <v-expansion-panel-title>
       <h3>{{ dateLong(day.start) }}</h3>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <template v-if="entriesWithStory.length">
         <template v-for="{ scheduleEntry, storyChapters } in entriesWithStory">
           <div v-for="chapter in storyChapters" :key="chapter._meta.self">
@@ -48,7 +48,7 @@
       <p v-else>
         {{ $tc('components.story.storyDay.noStory') }}
       </p>
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 <script>
diff --git a/frontend/src/components/story/StoryPeriod.vue b/frontend/src/components/story/StoryPeriod.vue
index 4bc6bb0789..21170a88c9 100644
--- a/frontend/src/components/story/StoryPeriod.vue
+++ b/frontend/src/components/story/StoryPeriod.vue
@@ -1,6 +1,6 @@
 <template>
   <v-skeleton-loader v-if="loading" class="mt-2 mt-sm-3" type="list-item-three-line" />
-  <v-expansion-panels v-else v-model="expandedDays" accordion flat multiple>
+  <v-expansion-panels v-else v-model="expandedDays" variant="accordion" flat multiple>
     <story-day
       v-for="day in sortedDays"
       :key="day._meta.self"
diff --git a/frontend/src/views/Camps.vue b/frontend/src/views/Camps.vue
index 3384846cd1..3e4d8f8fbe 100644
--- a/frontend/src/views/Camps.vue
+++ b/frontend/src/views/Camps.vue
@@ -13,18 +13,15 @@
           v-for="camp in upcomingCamps"
           v-else
           :key="camp._meta.self"
-          two-line
+          lines="two"
           :to="campRoute(camp)"
         >
-          <v-list-item-content>
-            <v-list-item-title>{{ camp.title }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ camp.name }} - {{ camp.motto }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <v-list-item-title>{{ camp.title }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ camp.name }} - {{ camp.motto }}
+          </v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
-          <v-list-item-content />
           <v-list-item-action>
             <button-add icon="mdi-plus" :to="{ name: 'camps/create' }">
               {{ $tc('views.camps.create') }}
@@ -38,55 +35,51 @@
         "
         multiple
         flat
-        accordion
+        variant="accordion"
       >
         <v-expansion-panel v-if="isAdmin() && prototypeCamps.length > 0">
-          <v-expansion-panel-header>
+          <v-expansion-panel-title>
             <h3>
               {{ $tc('views.camps.prototypeCamps') }}
             </h3>
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
             <v-list class="py-0">
               <v-list-item
                 v-for="camp in prototypeCamps"
                 :key="camp._meta.self"
-                two-line
+                lines="two"
                 :to="campRoute(camp)"
               >
-                <v-list-item-content>
-                  <v-list-item-title>{{ camp.title }}</v-list-item-title>
-                  <v-list-item-subtitle>
-                    {{ camp.name }} - {{ camp.motto }}
-                  </v-list-item-subtitle>
-                </v-list-item-content>
+                <v-list-item-title>{{ camp.title }}</v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ camp.name }} - {{ camp.motto }}
+                </v-list-item-subtitle>
               </v-list-item>
             </v-list>
-          </v-expansion-panel-content>
+          </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel v-if="!loading && pastCamps.length > 0">
-          <v-expansion-panel-header>
+          <v-expansion-panel-title>
             <h3>
               {{ $tc('views.camps.pastCamps') }}
             </h3>
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
             <v-list class="py-0">
               <v-list-item
                 v-for="camp in pastCamps"
                 :key="camp._meta.self"
-                two-line
+                lines="two"
                 :to="campRoute(camp)"
               >
-                <v-list-item-content>
-                  <v-list-item-title>{{ camp.title }}</v-list-item-title>
-                  <v-list-item-subtitle>
-                    {{ camp.name }} - {{ camp.motto }}
-                  </v-list-item-subtitle>
-                </v-list-item-content>
+                <v-list-item-title>{{ camp.title }}</v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ camp.name }} - {{ camp.motto }}
+                </v-list-item-subtitle>
               </v-list-item>
             </v-list>
-          </v-expansion-panel-content>
+          </v-expansion-panel-text>
         </v-expansion-panel>
       </v-expansion-panels>
     </content-card>
diff --git a/frontend/src/views/NavigationDefault.vue b/frontend/src/views/NavigationDefault.vue
index fe84e6cc76..8389f0403c 100644
--- a/frontend/src/views/NavigationDefault.vue
+++ b/frontend/src/views/NavigationDefault.vue
@@ -3,7 +3,7 @@
     v-if="$vuetify.display.mdAndUp"
     app
     clipped-left
-    color="blue-grey darken-4"
+    color="blue-grey-darken-4"
     dark
   >
     <logo text />
diff --git a/frontend/src/views/PageNotFound.vue b/frontend/src/views/PageNotFound.vue
index 0758cf7705..ff279eda0e 100644
--- a/frontend/src/views/PageNotFound.vue
+++ b/frontend/src/views/PageNotFound.vue
@@ -13,13 +13,13 @@
       <ShootingStar class="shootingstar" />
       <TentNight class="tent" />
       <div class="relative">
-        <p class="white--text text-center px-3 d-flex justify-center mb-n8 relative">
+        <p class="text-white text-center px-3 d-flex justify-center mb-n8 relative">
           <i18n path="views.pageNotFound.detail">
             <template #br><br /></template>
           </i18n>
           <br />
-          <v-btn text dark :to="{ name: 'home' }" class="absolute bottom-n100">
-            <v-icon left>mdi-tent</v-icon>
+          <v-btn variant="text" dark :to="{ name: 'home' }" class="absolute bottom-n100">
+            <v-icon start>mdi-tent</v-icon>
             {{ $tc('views.pageNotFound.backToHome') }}
           </v-btn>
         </p>
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 0fae86cce4..b1f6b7efd6 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -54,7 +54,7 @@
             fieldname="language"
             :items="availableLocales"
           />
-          <p class="text-caption blue-grey--text mb-0">
+          <p class="text-caption text-blue-grey mb-0">
             {{ $tc('global.lokaliseMessage') }}
           </p>
           <v-btn
@@ -62,7 +62,7 @@
             class="mt-2"
             color="red"
             block
-            large
+            size="large"
             dark
             @click="$auth.logout()"
           >
diff --git a/frontend/src/views/activity/Category.vue b/frontend/src/views/activity/Category.vue
index 65f3749fc0..8df25084ea 100644
--- a/frontend/src/views/activity/Category.vue
+++ b/frontend/src/views/activity/Category.vue
@@ -12,16 +12,21 @@
       </template>
 
       <template #title-actions>
-        <v-btn v-if="!layoutMode" color="primary" outlined @click="layoutMode = true">
+        <v-btn
+          v-if="!layoutMode"
+          color="primary"
+          variant="outlined"
+          @click="layoutMode = true"
+        >
           <template v-if="$vuetify.display.smAndUp">
-            <v-icon left>mdi-puzzle-edit-outline</v-icon>
+            <v-icon start>mdi-puzzle-edit-outline</v-icon>
             {{ $tc('views.activity.category.changeLayout') }}
           </template>
           <template v-else>{{ $tc('views.activity.category.layout') }}</template>
         </v-btn>
-        <v-btn v-else color="success" outlined @click="layoutMode = false">
+        <v-btn v-else color="success" variant="outlined" @click="layoutMode = false">
           <template v-if="$vuetify.display.smAndUp">
-            <v-icon left>mdi-file-document-arrow-right-outline</v-icon>
+            <v-icon start>mdi-file-document-arrow-right-outline</v-icon>
             {{ $tc('views.activity.category.editContents') }}
           </template>
           <template v-else>{{ $tc('views.activity.category.contents') }}</template>
@@ -32,7 +37,7 @@
 
         <div
           v-if="!loading && category().rootContentNode().children().items.length === 0"
-          class="text-center blue lighten-4 blue--text py-4 px-2 text--darken-4 create-layout-help"
+          class="text-center bg-blue-lighten-4 text-blue-darken-4 py-4 px-2 create-layout-help"
         >
           <i18n path="views.activity.category.createLayoutHelp">
             <template #categoryShort>{{ category().short }}</template>
diff --git a/frontend/src/views/admin/Info.vue b/frontend/src/views/admin/Info.vue
index 9d59b5bb7d..635ef9d945 100644
--- a/frontend/src/views/admin/Info.vue
+++ b/frontend/src/views/admin/Info.vue
@@ -15,7 +15,7 @@
         </v-col>
       </v-row>
     </v-container>
-    <v-expansion-panels v-model="openPanels" flat accordion multiple>
+    <v-expansion-panels v-model="openPanels" flat variant="accordion" multiple>
       <CampConditionalFields :camp="camp" :disabled="!isManager" />
       <CampDangerZone v-if="isManager" :camp="camp" />
     </v-expansion-panels>
diff --git a/frontend/src/views/auth/Activate.vue b/frontend/src/views/auth/Activate.vue
index 90a6964f12..602244decf 100644
--- a/frontend/src/views/auth/Activate.vue
+++ b/frontend/src/views/auth/Activate.vue
@@ -1,6 +1,6 @@
 <template>
   <auth-container>
-    <h1 class="display-1">{{ $tc('views.auth.activate.title') }}</h1>
+    <h1 class="text-h4">{{ $tc('views.auth.activate.title') }}</h1>
 
     <div v-if="loading" class="text-center">
       <v-progress-circular :size="100" indeterminate color="green" />
@@ -15,7 +15,7 @@
         v-if="!loading"
         color="primary"
         :to="{ name: 'login' }"
-        x-large
+        size="x-large"
         class="my-4"
         block
       >
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index 4accd721d4..4ebbf7195a 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -4,7 +4,7 @@
       <v-icon size="64"> $ecamp </v-icon>
     </div>
 
-    <h1 class="display-1 text-center" :class="{ 'my-4': isProdSuffix }">
+    <h1 class="text-h4 text-center" :class="{ 'my-4': isProdSuffix }">
       {{ $tc('global.button.login') }}
     </h1>
 
@@ -12,8 +12,8 @@
       v-if="!isProdSuffix"
       class="mt-2 text-justify"
       text
-      dense
-      border="left"
+      density="compact"
+      border="start"
       style="hypens: auto"
       color="warning"
     >
@@ -23,7 +23,7 @@
         </i18n>
       </div>
     </v-alert>
-    <v-alert v-if="error" outlined text border="left" type="error">
+    <v-alert v-if="error" variant="outlined" text border="start" type="error">
       {{ error }}
     </v-alert>
     <v-form @submit.prevent="login">
@@ -66,8 +66,8 @@
         :color="email && password ? 'blue darken-2' : 'blue lighten-4'"
         block
         :disabled="!(email && password) || authenticationInProgress"
-        outlined
-        :x-large="$vuetify.display.smAndUp"
+        variant="outlined"
+        :size="$vuetify.display.smAndUp && 'x-large'"
         class="my-4"
       >
         <v-progress-circular v-if="authenticationInProgress" indeterminate size="24" />
@@ -83,48 +83,48 @@
       <v-btn
         dark
         color="#91697f"
-        :x-large="$vuetify.display.smAndUp"
-        text
+        :size="$vuetify.display.smAndUp && 'x-large'"
+        variant="text"
         @click="loginPbsMiData"
       >
         <v-icon class="my-1" color="#521d3a">$pbs</v-icon>
-        <span class="text--secondary body-2 font-weight-medium">{{
+        <span class="text--secondary text-body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.midata')
         }}</span>
       </v-btn>
       <v-btn
         dark
         color="green"
-        :x-large="$vuetify.display.smAndUp"
-        text
+        :size="$vuetify.display.smAndUp && 'x-large'"
+        variant="text"
         @click="loginCeviDB"
       >
         <v-icon class="my-1">$cevi</v-icon>
-        <span class="text--secondary body-2 font-weight-medium">{{
+        <span class="text--secondary text-body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.cevidb')
         }}</span>
       </v-btn>
       <v-btn
         dark
         color="blue"
-        :x-large="$vuetify.display.smAndUp"
-        text
+        :size="$vuetify.display.smAndUp && 'x-large'"
+        variant="text"
         @click="loginJublaDB"
       >
         <v-icon size="32">$jubla</v-icon>
-        <span class="text--secondary body-2 font-weight-medium">{{
+        <span class="text--secondary text-body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.jubladb')
         }}</span>
       </v-btn>
       <v-btn
         dark
-        color="blue-grey lighten-3"
-        :x-large="$vuetify.display.smAndUp"
-        text
+        color="blue-grey-lighten-3"
+        :size="$vuetify.display.smAndUp && 'x-large'"
+        variant="text"
         @click="loginGoogle"
       >
         <v-icon class="my-1">$google</v-icon>
-        <span class="text--secondary body-2 font-weight-medium">{{
+        <span class="text--secondary text-body-2 font-weight-medium">{{
           $tc('views.auth.login.provider.google')
         }}</span>
       </v-btn>
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index 78ee20a9db..9f30ca210d 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -1,6 +1,6 @@
 <template>
   <auth-container>
-    <h1 class="display-1 text-center">{{ $tc('views.auth.register.title') }}</h1>
+    <h1 class="text-h4 text-center">{{ $tc('views.auth.register.title') }}</h1>
     <!--    <validation-observer v-slot="{ handleSubmit }">-->
     <v-form @submit.prevent="handleSubmit(register)">
       <e-text-field
@@ -51,7 +51,7 @@
       >
         <template #progress>
           <v-progress-linear
-            :value="passwordStrength"
+            :model-value="passwordStrength"
             :color="passwordStrengthColor"
             absolute
             height="5"
@@ -94,7 +94,7 @@
         </template>
         <template #append>
           <v-btn
-            text
+            variant="text"
             dense
             min-width="0"
             :title="$tc('global.button.open')"
@@ -103,7 +103,7 @@
             :href="termsOfServiceLink"
             tabindex="-1"
           >
-            <v-icon small>mdi-open-in-new</v-icon>
+            <v-icon size="small">mdi-open-in-new</v-icon>
           </v-btn>
         </template>
       </e-checkbox>
@@ -115,7 +115,7 @@
         </small>
       </p>
 
-      <v-btn type="submit" color="primary" block x-large>
+      <v-btn type="submit" color="primary" block size="x-large">
         <v-progress-circular v-if="registering" indeterminate size="24" />
         <v-spacer />
         <span>{{ $tc('views.auth.register.register') }}</span>
diff --git a/frontend/src/views/auth/RegisterDone.vue b/frontend/src/views/auth/RegisterDone.vue
index bfdfcf822e..e63020cdd7 100644
--- a/frontend/src/views/auth/RegisterDone.vue
+++ b/frontend/src/views/auth/RegisterDone.vue
@@ -1,6 +1,6 @@
 <template>
   <auth-container>
-    <h1 class="display-1">{{ $tc('views.auth.registerDone.title') }}</h1>
+    <h1 class="text-h4">{{ $tc('views.auth.registerDone.title') }}</h1>
     <v-alert prominent type="success" class="my-4 text--green text--darken-2">
       <div class="text-h6">
         {{ $tc('views.auth.registerDone.success') }}
@@ -10,7 +10,7 @@
       </div>
     </v-alert>
     <v-spacer />
-    <v-btn color="primary" :to="{ name: 'login' }" x-large class="my-4" block>
+    <v-btn color="primary" :to="{ name: 'login' }" size="x-large" class="my-4" block>
       {{ $tc('global.button.login') }}
     </v-btn>
   </auth-container>
diff --git a/frontend/src/views/auth/ResetPassword.vue b/frontend/src/views/auth/ResetPassword.vue
index 96fdb1401f..88bd221dd2 100644
--- a/frontend/src/views/auth/ResetPassword.vue
+++ b/frontend/src/views/auth/ResetPassword.vue
@@ -1,6 +1,6 @@
 <template>
   <auth-container>
-    <h1 class="display-1 text-center mb-4">
+    <h1 class="text-h4 text-center mb-4">
       {{ $tc('views.auth.resetPassword.title') }}
     </h1>
 
@@ -55,7 +55,7 @@
       >
         <template #progress>
           <v-progress-linear
-            :value="passwordStrength"
+            :model-value="passwordStrength"
             :color="passwordStrengthColor"
             absolute
             height="5"
@@ -82,8 +82,8 @@
         block
         :color="email ? 'blue darken-2' : 'blue lightne-4'"
         :disabled="!email"
-        outlined
-        :x-large="$vuetify.display.smAndUp"
+        variant="outlined"
+        :size="$vuetify.display.smAndUp && 'x-large'"
         class="my-4"
       >
         <v-progress-circular v-if="status == 'reseting'" indeterminate size="24" />
diff --git a/frontend/src/views/auth/ResetPasswordRequest.vue b/frontend/src/views/auth/ResetPasswordRequest.vue
index 89917fadd5..263613ff3e 100644
--- a/frontend/src/views/auth/ResetPasswordRequest.vue
+++ b/frontend/src/views/auth/ResetPasswordRequest.vue
@@ -1,6 +1,6 @@
 <template>
   <auth-container>
-    <h1 class="display-1 text-center mb-4">
+    <h1 class="text-h4 text-center mb-4">
       {{ $tc('views.auth.resetPasswordRequest.title') }}
     </h1>
 
@@ -32,8 +32,8 @@
         block
         :color="email ? 'blue darken-2' : 'blue lightne-4'"
         :disabled="!email"
-        outlined
-        :x-large="$vuetify.display.smAndUp"
+        variant="outlined"
+        :size="$vuetify.display.smAndUp && 'x-large'"
         class="my-4"
       >
         <v-progress-circular v-if="status == 'sending'" indeterminate size="24" />
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 4e391e4287..a542182f4f 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -77,7 +77,7 @@
               (filter.progressLabel && filter.progressLabel.length > 0)
             "
             label
-            outlined
+            variant="outlined"
             @click="
               filter = {
                 period: null,
@@ -87,7 +87,7 @@
               }
             "
           >
-            <v-icon left>mdi-close</v-icon>
+            <v-icon start>mdi-close</v-icon>
             {{ $tc('views.camp.dashboard.clearFilters') }}
           </v-chip>
         </template>
diff --git a/frontend/src/views/camp/Invitation.vue b/frontend/src/views/camp/Invitation.vue
index 2594164e5a..e525e45820 100644
--- a/frontend/src/views/camp/Invitation.vue
+++ b/frontend/src/views/camp/Invitation.vue
@@ -17,7 +17,7 @@
           height="48"
         />
         <template v-else-if="variant === 'default' && invitationFound !== false">
-          <span class="subtitle-2 font-weight-bold">{{
+          <span class="text-subtitle-2 font-weight-bold">{{
             $tc('views.camp.invitation.title')
           }}</span>
           <span v-if="!invite?._meta.loading">{{ invite?.campTitle }}</span>
@@ -37,7 +37,7 @@
         <div v-if="authUser">
           <v-alert
             v-if="invite?.userAlreadyInCamp"
-            border="left"
+            border="start"
             colored-border
             color="primary"
             class="mb-1"
@@ -46,13 +46,13 @@
           >
             {{ $tc('views.camp.invitation.userAlreadyInCamp') }}
             <div class="mt-2 d-flex flex-wrap gap-2">
-              <v-btn small color="primary" :to="campLink" elevation="0">
+              <v-btn size="small" color="primary" :to="campLink" elevation="0">
                 {{ $tc('views.camp.invitation.openCamp') }}
               </v-btn>
               <v-btn
                 color="primary"
-                text
-                small
+                variant="text"
+                size="small"
                 class="v-btn--has-bg"
                 @click="useAnotherAccount"
               >
@@ -61,29 +61,34 @@
             </div>
           </v-alert>
           <div v-else class="d-grid gap-2 grid-cols-fill">
-            <v-btn color="primary" x-large @click="acceptInvitation">
+            <v-btn color="primary" size="x-large" @click="acceptInvitation">
               {{ $tc('views.camp.invitation.acceptCurrentAuth') }}<br />
             </v-btn>
-            <v-btn dark text class="mt-2" @click="useAnotherAccount">
+            <v-btn dark variant="text" class="mt-2" @click="useAnotherAccount">
               {{ $tc('views.camp.invitation.useOtherAuth') }}
             </v-btn>
           </div>
         </div>
         <div v-else class="d-grid gap-2 grid-cols-2">
-          <v-btn color="primary" x-large :to="loginLink">
+          <v-btn color="primary" size="x-large" :to="loginLink">
             {{ $tc('global.button.login') }}
           </v-btn>
-          <v-btn color="secondary" x-large :to="{ name: 'register' }">
+          <v-btn color="secondary" size="x-large" :to="{ name: 'register' }">
             {{ $tc('views.camp.invitation.register') }}
           </v-btn>
         </div>
-        <v-btn dark text :small="invite?.userAlreadyInCamp" @click="rejectInvitation">
+        <v-btn
+          dark
+          variant="text"
+          :size="invite?.userAlreadyInCamp && 'small'"
+          @click="rejectInvitation"
+        >
           {{ $tc('views.camp.invitation.reject') }}
         </v-btn>
       </div>
       <div class="justify-center d-flex col gap-2">
-        <v-btn v-if="authUser" text dark :to="{ name: 'home' }">
-          <v-icon left>mdi-tent</v-icon>
+        <v-btn v-if="authUser" variant="text" dark :to="{ name: 'home' }">
+          <v-icon start>mdi-tent</v-icon>
           {{ $tc('views.camp.invitation.backToHome') }}
         </v-btn>
       </div>
diff --git a/frontend/src/views/camp/Story.vue b/frontend/src/views/camp/Story.vue
index 5bd63384a6..4a7ddc72c3 100644
--- a/frontend/src/views/camp/Story.vue
+++ b/frontend/src/views/camp/Story.vue
@@ -10,7 +10,7 @@
       />
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
-          <v-btn class="ml-auto" text icon v-bind="attrs" v-on="on">
+          <v-btn class="ml-auto" variant="text" icon v-bind="attrs" v-on="on">
             <v-icon>mdi-dots-vertical</v-icon>
           </v-btn>
         </template>
diff --git a/frontend/src/views/camp/navigation/desktop/NavTopbar.vue b/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
index ea13eab6fa..a768607a80 100644
--- a/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
+++ b/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
@@ -1,32 +1,32 @@
 <template>
-  <v-app-bar app clipped-left color="blue-grey darken-4" dark>
+  <v-app-bar app clipped-left color="blue-grey-darken-4" dark>
     <logo text />
 
     <v-toolbar-items>
-      <v-btn :to="campRoute(camp())" text>
-        <v-icon :left="$vuetify.display.mdAndUp">mdi-tent</v-icon>
+      <v-btn :to="campRoute(camp())" variant="text">
+        <v-icon :start="$vuetify.display.mdAndUp">mdi-tent</v-icon>
         <span class="sr-only-sm-and-down">{{ camp().title }}</span>
       </v-btn>
-      <v-btn :to="campRoute(camp(), 'program')" text>
-        <v-icon :left="$vuetify.display.mdAndUp">mdi-view-dashboard</v-icon>
+      <v-btn :to="campRoute(camp(), 'program')" variant="text">
+        <v-icon :start="$vuetify.display.mdAndUp">mdi-view-dashboard</v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('views.camp.navigation.desktop.navTopbar.program')
         }}</span>
       </v-btn>
-      <v-btn :to="campRoute(camp(), 'story')" text>
-        <v-icon :left="$vuetify.display.mdAndUp"> mdi-book-open-variant </v-icon>
+      <v-btn :to="campRoute(camp(), 'story')" variant="text">
+        <v-icon :start="$vuetify.display.mdAndUp"> mdi-book-open-variant </v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('views.camp.navigation.desktop.navTopbar.story')
         }}</span>
       </v-btn>
-      <v-btn :to="materialListRoute(camp())" text>
-        <v-icon :left="$vuetify.display.mdAndUp"> mdi-package-variant </v-icon>
+      <v-btn :to="materialListRoute(camp())" variant="text">
+        <v-icon :start="$vuetify.display.mdAndUp"> mdi-package-variant </v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('views.camp.navigation.desktop.navTopbar.material')
         }}</span>
       </v-btn>
-      <v-btn :to="campRoute(camp(), 'admin')" text>
-        <v-icon :left="$vuetify.display.mdAndUp"> mdi-cogs </v-icon>
+      <v-btn :to="campRoute(camp(), 'admin')" variant="text">
+        <v-icon :start="$vuetify.display.mdAndUp"> mdi-cogs </v-icon>
         <span class="sr-only-sm-and-down">{{
           $tc('global.navigation.admin.title')
         }}</span>
diff --git a/frontend/src/views/camp/navigation/mobile/NavBottombar.vue b/frontend/src/views/camp/navigation/mobile/NavBottombar.vue
index 1f95ff3161..8549faca68 100644
--- a/frontend/src/views/camp/navigation/mobile/NavBottombar.vue
+++ b/frontend/src/views/camp/navigation/mobile/NavBottombar.vue
@@ -10,7 +10,7 @@
     </v-btn>
     <v-btn :to="campRoute(camp(), 'dashboard')">
       <span>{{ camp().name }}</span>
-      <v-icon large>mdi-tent</v-icon>
+      <v-icon size="large">mdi-tent</v-icon>
     </v-btn>
     <v-btn :to="materialListRoute(camp(), '/lists')">
       <span>{{ $tc('views.camp.navigation.mobile.navBottombar.material') }}</span>
diff --git a/frontend/src/views/camp/navigation/mobile/NavSidebar.vue b/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
index a08da4e465..0c57d26b80 100644
--- a/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
+++ b/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
@@ -1,17 +1,17 @@
 <template>
   <v-navigation-drawer
-    :value="value"
+    :model-value="value"
     app
-    right
+    location="right"
     width="300"
-    @input="$emit('input', $event)"
+    @update:model-value="$emit('input', $event)"
   >
     <div class="d-flex flex-column fill-height">
-      <div class="d-flex flex-column align-center blue-grey darken-4 white--text py-6">
-        <v-icon x-large>$ecamp</v-icon>
-        <h2 class="title text-center">eCamp</h2>
+      <div class="d-flex flex-column align-center bg-blue-grey-darken-4 text-white py-6">
+        <v-icon size="x-large">$ecamp</v-icon>
+        <h2 class="text-h6 text-center">eCamp</h2>
       </div>
-      <v-divider class="blue-grey darken-2" />
+      <v-divider class="bg-blue-grey-darken-2" />
       <v-list>
         <SidebarListItem
           v-if="user && !user._meta.loading"
@@ -79,16 +79,16 @@
       </v-list>
       <div class="mt-auto">
         <v-btn
-          x-large
+          size="x-large"
           height="56"
-          text
+          variant="text"
           tile
           block
           class="ec-close-drawer pb-safe"
           @click="$emit('input', false)"
         >
           {{ $tc('views.camp.navigation.mobile.navSidebar.itemClose') }}
-          <v-icon right>mdi-close</v-icon>
+          <v-icon end>mdi-close</v-icon>
         </v-btn>
       </div>
     </div>
diff --git a/frontend/src/views/material/MaterialDetail.vue b/frontend/src/views/material/MaterialDetail.vue
index ec6c27fe05..892ec8ee12 100644
--- a/frontend/src/views/material/MaterialDetail.vue
+++ b/frontend/src/views/material/MaterialDetail.vue
@@ -15,9 +15,7 @@
                   <v-list-item-icon>
                     <v-icon>mdi-pencil</v-icon>
                   </v-list-item-icon>
-                  <v-list-item-content>{{
-                    $tc('global.button.edit')
-                  }}</v-list-item-content>
+                  {{ $tc('global.button.edit') }}
                 </v-list-item>
               </template>
             </DialogMaterialListEdit>
@@ -25,9 +23,7 @@
               <v-list-item-icon>
                 <v-icon>mdi-microsoft-excel</v-icon>
               </v-list-item-icon>
-              <v-list-item-content>{{
-                $tc('global.button.download')
-              }}</v-list-item-content>
+              {{ $tc('global.button.download') }}
             </v-list-item>
           </v-list>
         </v-menu>
@@ -37,7 +33,7 @@
         v-model="openPeriods"
         multiple
         flat
-        accordion
+        variant="accordion"
       >
         <PeriodMaterialLists
           v-for="{ period, materialItems } in collection"
diff --git a/frontend/src/views/material/MaterialOverview.vue b/frontend/src/views/material/MaterialOverview.vue
index e8b4402768..852c2c7c3d 100644
--- a/frontend/src/views/material/MaterialOverview.vue
+++ b/frontend/src/views/material/MaterialOverview.vue
@@ -15,9 +15,7 @@
                   <v-list-item-icon>
                     <v-icon>mdi-plus</v-icon>
                   </v-list-item-icon>
-                  <v-list-item-content
-                    >{{ $tc('views.material.materialOverview.createNewList') }}
-                  </v-list-item-content>
+                  {{ $tc('views.material.materialOverview.createNewList') }}
                 </v-list-item>
               </template>
             </DialogMaterialListCreate>
@@ -25,9 +23,7 @@
               <v-list-item-icon>
                 <v-icon>mdi-microsoft-excel</v-icon>
               </v-list-item-icon>
-              <v-list-item-content
-                >{{ $tc('views.material.materialOverview.download') }}
-              </v-list-item-content>
+              {{ $tc('views.material.materialOverview.download') }}
             </v-list-item>
           </v-list>
         </v-menu>
@@ -37,7 +33,7 @@
         v-model="openPeriods"
         multiple
         flat
-        accordion
+        variant="accordion"
       >
         <PeriodMaterialLists
           v-for="{ period, materialItems } in collection"

From 2af219d64b4e7852765c5abd8619be4cfde893ee Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Tue, 16 Jan 2024 14:06:18 +0100
Subject: [PATCH 13/21] use eslint vue3-recommended instead of base

---
 frontend/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 48a3308eab..5eaa562eb5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,7 @@
     "lint:eslint": "eslint . --ext .vue,.js --fix --ignore-path .gitignore",
     "lint:prettier": "prettier --write --ignore-path .prettierignore **/*.{css,scss,json,md}",
     "lint:check": "npm run lint:check:eslint && npm run lint:check:prettier",
-    "lint:check:eslint": "vue-cli-service lint --no-fix",
+    "lint:check:eslint": "eslint . --ext .vue,.js --no-fix --ignore-path .gitignore",
     "lint:check:prettier": "prettier --check --ignore-path .prettierignore **/*.{css,scss,json,md}",
     "start": "vite --host 0.0.0.0",
     "dev": "vite --host 0.0.0.0",
@@ -134,7 +134,7 @@
       "jest": true
     },
     "extends": [
-      "plugin:vue/base",
+      "plugin:vue/vue3-recommended",
       "plugin:vuetify/base",
       "eslint:recommended",
       "plugin:prettier/recommended",

From 2e9e32e8aec4ddf7780043c41050ddd59ea079d9 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Tue, 16 Jan 2024 15:45:05 +0100
Subject: [PATCH 14/21] fix vuex store & hal-json-vuex setup; /camps renders

---
 frontend/package-lock.json                    | 14 -----
 frontend/src/App.vue                          |  8 +--
 .../components/layout/LanguageSwitcher.vue    |  2 +-
 frontend/src/main.js                          |  2 -
 frontend/src/plugins/auth.js                  | 56 +++++++++----------
 frontend/src/plugins/hal-json-vuex.js         | 35 ------------
 frontend/src/plugins/index.js                 |  1 -
 frontend/src/plugins/store/index.js           | 52 ++++++++++++-----
 frontend/src/plugins/store/lang.js            |  7 +--
 frontend/src/views/Profile.vue                |  2 +-
 frontend/src/views/auth/Login.vue             |  2 +-
 frontend/src/views/auth/Register.vue          |  2 +-
 12 files changed, 75 insertions(+), 108 deletions(-)
 delete mode 100644 frontend/src/plugins/hal-json-vuex.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 260a56d5d0..1df8e94bad 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,7 +34,6 @@
         "@tiptap/vue-3": "2.1.13",
         "@vee-validate/i18n": "4.12.4",
         "@vee-validate/rules": "4.12.4",
-        "@vue/compat": "3.3.13",
         "@zxcvbn-ts/core": "3.0.4",
         "@zxcvbn-ts/language-common": "3.0.4",
         "@zxcvbn-ts/language-de": "3.0.2",
@@ -5130,19 +5129,6 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
-    "node_modules/@vue/compat": {
-      "version": "3.3.13",
-      "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.3.13.tgz",
-      "integrity": "sha512-JJ878anmzuqpBQtgxVhgmTGINWfHdRxslqDWhCp1Ogs7jcbS+nFNFjZkuFJYCvqpLE8nU9YbffCNsUcBDoiyYg==",
-      "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
-      },
-      "peerDependencies": {
-        "vue": "3.3.13"
-      }
-    },
     "node_modules/@vue/compiler-core": {
       "version": "3.3.13",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 71566486d4..a8d8f4c60f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -54,16 +54,16 @@ export default {
     },
   },
   created() {
-    // this.$store.commit('setLanguage', this.$store.state.lang.language)
+    this.$store.commit('setLanguage', this.$store.state.lang.language)
   },
   async mounted() {
     if (this.$auth.isLoggedIn()) {
       const user = await this.$auth.loadUser()
       const profile = await user.profile()._meta.load
 
-      if (VueI18n.availableLocales.includes(profile.language)) {
-        // this.$store.commit('setLanguage', profile.language)
-      }
+      // if (VueI18n.availableLocales.includes(profile.language)) {
+      //   this.$store.commit('setLanguage', profile.language)
+      // }
     }
   },
 }
diff --git a/frontend/src/components/layout/LanguageSwitcher.vue b/frontend/src/components/layout/LanguageSwitcher.vue
index 100d3ec503..e8518a0062 100644
--- a/frontend/src/components/layout/LanguageSwitcher.vue
+++ b/frontend/src/components/layout/LanguageSwitcher.vue
@@ -33,7 +33,7 @@ export default {
   name: 'LanguageSwitcher',
   methods: {
     changeLang(lang) {
-      // this.$store.commit('setLanguage', lang)
+      this.$store.commit('setLanguage', lang)
     },
   },
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 30ec57f433..2ac5fc1ec3 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,7 +5,6 @@ import {
   vuetifyLoader,
   auth,
   storeLoader,
-  halJsonVuex,
   formBaseComponents,
   i18n,
   dayjs,
@@ -45,7 +44,6 @@ app.use(veeValidate)
 app.use(Toast, {
   maxToasts: 2,
 })
-app.use(halJsonVuex)
 app.use(router)
 app.use(i18n)
 
diff --git a/frontend/src/plugins/auth.js b/frontend/src/plugins/auth.js
index e1089ae153..6f57069f93 100644
--- a/frontend/src/plugins/auth.js
+++ b/frontend/src/plugins/auth.js
@@ -38,15 +38,14 @@ function getJWTExpirationTimestamp() {
 }
 
 export function isLoggedIn() {
-  return false
-
-  // const isLoggedIn = Date.now() < getJWTExpirationTimestamp()
+  const isLoggedIn = Date.now() < getJWTExpirationTimestamp()
 
+  // TODO: commented code creates an infinite-loop
   // if (isLoggedIn) {
   //   loadUser()
   // }
 
-  // return isLoggedIn
+  return isLoggedIn
 }
 
 export function isAdmin() {
@@ -75,32 +74,29 @@ async function resetPassword(id, password, recaptchaToken) {
 }
 
 async function loadUser() {
-  // TODO: remove
-  return null
-
-  // if (!getJWTPayloadFromCookie()) {
-  //   // store.commit('logout')
-  //   return null
-  // }
+  if (!getJWTPayloadFromCookie()) {
+    store.commit('logout')
+    return null
+  }
 
-  // try {
-  //   const user = await apiStore.get(parseJWTPayload(getJWTPayloadFromCookie()).user)._meta
-  //     .load
-  //   // store.commit('login', user)
-  //   return user
-  // } catch (e) {
-  //   if (e.response && [401, 403, 404].includes(e.response.status)) {
-  //     // 401 means no complete token was submitted, so we may be missing the JWT signature cookie
-  //     // 403 means we can theoretically interact in some way with the user, but apparently not read it
-  //     // 404 means the user doesn't exist or we don't have access to it
-  //     // Either way, we aren't allowed to access the user from the token, so it's best to ask the user
-  //     // to log in again.
-  //     auth.logout()
-  //     return null
-  //   }
-
-  //   throw e
-  // }
+  try {
+    const user = await apiStore.get(parseJWTPayload(getJWTPayloadFromCookie()).user)._meta
+      .load
+    store.commit('login', user)
+    return user
+  } catch (e) {
+    if (e.response && [401, 403, 404].includes(e.response.status)) {
+      // 401 means no complete token was submitted, so we may be missing the JWT signature cookie
+      // 403 means we can theoretically interact in some way with the user, but apparently not read it
+      // 404 means the user doesn't exist or we don't have access to it
+      // Either way, we aren't allowed to access the user from the token, so it's best to ask the user
+      // to log in again.
+      auth.logout()
+      return null
+    }
+
+    throw e
+  }
 }
 
 async function register(data) {
@@ -141,7 +137,7 @@ async function loginJublaDB() {
 
 export async function logout() {
   Cookies.remove(headerAndPayloadCookieName())
-  // store.commit('logout')
+  store.commit('logout')
   return router
     .push({ name: 'login' })
     .catch(() => {}) // prevents throwing NavigationDuplicated is already on /login
diff --git a/frontend/src/plugins/hal-json-vuex.js b/frontend/src/plugins/hal-json-vuex.js
deleted file mode 100644
index 75f6d88a2f..0000000000
--- a/frontend/src/plugins/hal-json-vuex.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import HalJsonVuex from 'hal-json-vuex'
-import axios from 'axios'
-import { createStore } from 'vuex'
-import { getEnv } from '@/environment.js'
-
-export default {
-  install: (app, options) => {
-    // create store
-    const store = createStore({
-      state() {
-        return {}
-      },
-    })
-    app.use(store)
-
-    const axiosInstance = axios.create({
-      withCredentials: true,
-      baseURL: getEnv().API_ROOT_URL,
-      headers: { common: { Accept: 'application/hal+json' } },
-    })
-    axiosInstance.interceptors.request.use(function (config) {
-      if (config.method === 'patch') {
-        config.headers['Content-Type'] = 'application/merge-patch+json'
-      }
-      return config
-    })
-
-    // create and inject API
-    const api = new HalJsonVuex(store, axiosInstance, {
-      forceRequestedSelfLink: true,
-    })
-
-    app.use(api)
-  },
-}
diff --git a/frontend/src/plugins/index.js b/frontend/src/plugins/index.js
index 48dc97aebd..d0fdc2ea1a 100644
--- a/frontend/src/plugins/index.js
+++ b/frontend/src/plugins/index.js
@@ -6,4 +6,3 @@ export { default as ignoreNativeBindingWarnMessages } from './ignoreNativeBindin
 export { default as i18n } from './i18n'
 export { default as veeValidate } from './veeValidate'
 export { default as dayjs } from './dayjs'
-export { default as halJsonVuex } from './hal-json-vuex'
diff --git a/frontend/src/plugins/store/index.js b/frontend/src/plugins/store/index.js
index c155c8710d..59b088c7ac 100644
--- a/frontend/src/plugins/store/index.js
+++ b/frontend/src/plugins/store/index.js
@@ -1,21 +1,45 @@
-import Vuex from 'vuex'
+import { createStore, createLogger } from 'vuex'
+import axios from 'axios'
+import HalJsonVuex from 'hal-json-vuex'
 import lang from './lang'
 import auth from './auth'
+import { getEnv } from '@/environment.js'
 
-class StorePlugin {
-  install(Vue) {
-    // Vue.use(Vuex)
-    // store = new Vuex.Store({
-    //   modules: {
-    //     lang,
-    //     auth,
-    //   },
-    //   strict: process.env.NODE_ENV !== 'production',
-    // })
-  }
+const debug = process.env.NODE_ENV !== 'production'
+
+export default {
+  install: (app, options) => {
+    store = createStore({
+      modules: {
+        lang,
+        auth,
+      },
+      strict: debug,
+      plugins: debug ? [createLogger()] : [],
+    })
+
+    app.use(store)
+
+    const axiosInstance = axios.create({
+      withCredentials: true,
+      baseURL: getEnv().API_ROOT_URL,
+      headers: { common: { Accept: 'application/hal+json' } },
+    })
+    axiosInstance.interceptors.request.use(function (config) {
+      if (config.method === 'patch') {
+        config.headers['Content-Type'] = 'application/merge-patch+json'
+      }
+      return config
+    })
+
+    // create and inject API
+    apiStore = new HalJsonVuex(store, axiosInstance, {
+      forceRequestedSelfLink: true,
+    })
+
+    app.use(apiStore)
+  },
 }
 
 export let apiStore
 export let store
-
-export default new StorePlugin()
diff --git a/frontend/src/plugins/store/lang.js b/frontend/src/plugins/store/lang.js
index 405c7065a9..252632af0e 100644
--- a/frontend/src/plugins/store/lang.js
+++ b/frontend/src/plugins/store/lang.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import VueI18n from '@/plugins/i18n'
 import { dayjsLocaleMap } from '@/common/helpers/dayjs.js'
+import dayjs from '@/common/helpers/dayjs.js'
 
 const LANG_KEY = 'language'
 
@@ -21,10 +22,8 @@ export const mutations = {
 
     state.language = lang
     VueI18n.locale = lang
-    Vue.dayjs.locale(
-      Object.keys(dayjsLocaleMap).includes(lang) ? dayjsLocaleMap[lang] : lang
-    )
-    this.$validator.localize(lang)
+    dayjs.locale(Object.keys(dayjsLocaleMap).includes(lang) ? dayjsLocaleMap[lang] : lang)
+    // this.$validator.localize(lang)
     axios.defaults.headers.common['Accept-Language'] = lang
     document.querySelector('html').setAttribute('lang', lang)
     window.localStorage.setItem(LANG_KEY, lang)
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index b1f6b7efd6..6f3295f19a 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -116,7 +116,7 @@ export default {
   watch: {
     profile() {
       if (VueI18n.availableLocales.includes(this.profile?.language)) {
-        // this.$store.commit('setLanguage', this.profile?.language)
+        this.$store.commit('setLanguage', this.profile?.language)
       }
     },
   },
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index 4ebbf7195a..a1e2c69134 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -206,7 +206,7 @@ export default {
     },
   },
   mounted() {
-    // this.$store.commit('setLanguage', this.$i18n.browserPreferredLocale)
+    this.$store.commit('setLanguage', this.$i18n.browserPreferredLocale)
   },
   methods: {
     async login() {
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index 9f30ca210d..07d739efdf 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -191,7 +191,7 @@ export default {
   watch: {
     language() {
       if (VueI18n.availableLocales.includes(this.language)) {
-        // this.$store.commit('setLanguage', this.language)
+        this.$store.commit('setLanguage', this.language)
       }
     },
   },

From 0316ca98b672b1e257d8610ab3ea977e6f9f787d Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Tue, 16 Jan 2024 18:45:19 +0100
Subject: [PATCH 15/21] load vuetify styles; disable overriden vuetify
 variables (for the moment)

---
 frontend/src/App.vue                           |  8 ++++----
 .../src/components/navigation/UserMeta.vue     | 11 ++++-------
 frontend/src/main.js                           |  1 -
 frontend/src/plugins/vuetify.js                |  3 +++
 .../{variables.scss => variables.scss.tmp}     |  0
 frontend/vite.config.js                        | 18 +++++-------------
 6 files changed, 16 insertions(+), 25 deletions(-)
 rename frontend/src/scss/{variables.scss => variables.scss.tmp} (100%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a8d8f4c60f..483dc4f09d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <v-app>
-    <!-- <router-view name="navigation" />
+    <router-view name="navigation" />
 
-    <router-view name="aside" /> -->
+    <router-view name="aside" />
 
     <!-- main content -->
     <v-main>
@@ -10,7 +10,7 @@
     </v-main>
 
     <!-- footer -->
-    <!-- <v-footer v-if="$vuetify.display.mdAndUp" app color="grey lighten-5">
+    <v-footer v-if="$vuetify.display.mdAndUp" app color="grey-lighten-5">
       <small
         >eCamp
         <a v-if="version" :href="versionLink" target="_blank">
@@ -20,7 +20,7 @@
       >
       <v-spacer />
       <language-switcher v-if="isDev" />
-    </v-footer> -->
+    </v-footer>
   </v-app>
 </template>
 
diff --git a/frontend/src/components/navigation/UserMeta.vue b/frontend/src/components/navigation/UserMeta.vue
index 6341b7cdd2..f02286651b 100644
--- a/frontend/src/components/navigation/UserMeta.vue
+++ b/frontend/src/components/navigation/UserMeta.vue
@@ -2,9 +2,8 @@
   <v-menu
     v-if="authUser"
     v-model="open"
-    offset-y
     dark
-    location="right"
+    location="bottom right"
     :content-class="
       ['ec-usermenu', $vuetify.display.xsOnly && 'rounded-lg mt-2'].join(' ')
     "
@@ -12,14 +11,13 @@
     :close-on-content-click="false"
     z-index="5"
   >
-    <template #activator="{ on, value, attrs }">
+    <template #activator="{ props }">
       <v-toolbar-items v-if="!avatarOnly">
         <v-btn
           location="right"
           variant="text"
-          v-bind="attrs"
+          v-bind="props"
           :class="[btnClasses, { 'v-btn--open': value }]"
-          v-on="on"
         >
           <user-avatar v-if="authUser" :user="authUser" :size="40" />
           <span class="sr-only-sm-and-down mx-3">
@@ -31,9 +29,8 @@
         v-else
         fab
         variant="text"
-        v-bind="attrs"
+        v-bind="props"
         :class="[btnClasses, { 'v-btn--open': value }]"
-        v-on="on"
       >
         <user-avatar v-if="authUser" :user="authUser" :size="40" />
         <span class="sr-only-sm-and-down mx-3">
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2ac5fc1ec3..617a0d4f58 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -11,7 +11,6 @@ import {
   veeValidate,
 } from './plugins'
 import { store } from './plugins/store'
-import { vuetify } from './plugins/vuetify'
 import { getEnv } from '@/environment.js'
 import * as Sentry from '@sentry/vue'
 import Toast from 'vue-toastification'
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index bb161900c2..4c5cb48b0f 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -16,6 +16,9 @@ import i18n from '@/plugins/i18n'
 import * as colors from 'vuetify/util/colors'
 import { apiPropsMixin } from '@/mixins/apiPropsMixin'
 
+// Styles
+import 'vuetify/styles'
+
 class VuetifyLoaderPlugin {
   install(app) {
     const opts = {
diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss.tmp
similarity index 100%
rename from frontend/src/scss/variables.scss
rename to frontend/src/scss/variables.scss.tmp
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index fd3bb51d12..1cdbf0a901 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -7,19 +7,11 @@ import * as path from 'path'
 import Components from 'unplugin-vue-components/vite'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { configDefaults } from 'vitest/config'
-import vuetify from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 const plugins = [
   comlink(), // must be first
-  vue({
-    template: {
-      compilerOptions: {
-        compatConfig: {
-          MODE: 2,
-        },
-      },
-    },
-  }),
+  vue({}),
   Components({
     resolvers: [
       // // Vuetify
@@ -165,9 +157,9 @@ export default defineConfig(({ mode }) => ({
         @import "./node_modules/vuetify/dist/_component-variables-labs.sass";
         `,
       },
-      sass: {
-        additionalData: '@import "./src/scss/variables.scss"\n', // vuetify variable overrides
-      },
+      // sass: {
+      //   additionalData: '@import "./src/scss/variables.scss"\n', // vuetify variable overrides
+      // },
     },
   },
   test: {

From 3cd7c23d2c8c64c94fa6ec3975c889ace24d7863 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Wed, 17 Jan 2024 08:32:30 +0100
Subject: [PATCH 16/21] fix loading of SASS variables

---
 frontend/src/App.vue                          |  10 +-
 frontend/src/components/dialog/DialogForm.vue |   4 +-
 .../components/form/tiptap/TiptapEditor.vue   |   4 +-
 frontend/src/components/generic/AvatarRow.vue |   6 +-
 .../src/components/layout/ContentCard.vue     |   4 +-
 .../src/components/layout/ContentGroup.vue    |   4 +-
 .../src/components/layout/HorizontalRule.vue  |   6 +-
 .../print/configurator/PagesOverview.vue      |   4 +-
 .../program/FormScheduleEntryList.vue         |   3 +-
 .../components/program/ScheduleEntries.vue    |   4 +-
 .../components/program/picasso/Picasso.vue    |  14 +-
 .../program/picasso/PicassoEntry.vue          |  10 +-
 frontend/src/main.js                          |   2 +
 frontend/src/plugins/vuetify.js               |   1 +
 frontend/src/scss/global.scss                 |  10 +-
 frontend/src/scss/main.scss                   |   3 +
 frontend/src/scss/variables.scss              | 130 ++++++++++++++++++
 frontend/src/scss/variables.scss.tmp          | 103 --------------
 .../src/views/activity/SideBarProgram.vue     |   3 +-
 frontend/src/views/camp/Dashboard.vue         |   5 +-
 frontend/src/views/camp/Invitation.vue        |  18 +--
 .../views/camp/navigation/NavigationCamp.vue  |   6 +-
 .../camp/navigation/mobile/NavBottombar.vue   |   5 +-
 .../camp/navigation/mobile/NavSidebar.vue     |   5 +-
 frontend/vite.config.js                       |  19 +--
 25 files changed, 224 insertions(+), 159 deletions(-)
 create mode 100644 frontend/src/scss/main.scss
 create mode 100644 frontend/src/scss/variables.scss
 delete mode 100644 frontend/src/scss/variables.scss.tmp

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 483dc4f09d..743b388931 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -69,10 +69,12 @@ export default {
 }
 </script>
 <style lang="scss">
-@import 'src/scss/global';
+// @import 'src/scss/vuetify';
+// @import 'src/scss/global';
+@use 'src/scss/variables';
 @import '~@mdi/font/css/materialdesignicons.css';
 
-@media #{map-get($display-breakpoints, 'xs')} {
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   html,
   body,
   .v-application {
@@ -122,7 +124,7 @@ export default {
   border-top-right-radius: 0 !important;
 }
 
-@media #{map-get($display-breakpoints, 'xs')} {
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   .v-main > .v-main__wrap > .container {
     min-height: 100%;
     display: flex;
@@ -140,7 +142,7 @@ export default {
   font-feature-settings: 'tnum';
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-down')} {
+@media #{map-get(variables.$display-breakpoints, 'sm-and-down')} {
   // TODO: this changes look & feel of all v-containers. Do we really want this?
   .container.container--fluid {
     padding: 0;
diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
index 484e95396c..649cf6529b 100644
--- a/frontend/src/components/dialog/DialogForm.vue
+++ b/frontend/src/components/dialog/DialogForm.vue
@@ -143,7 +143,9 @@ export default {
 </script>
 
 <style lang="scss">
-@media #{map-get($display-breakpoints, 'xs')} {
+@use 'src/scss/variables';
+
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   .ec-dialog-form {
     .v-form,
     .v-form > .v-sheet {
diff --git a/frontend/src/components/form/tiptap/TiptapEditor.vue b/frontend/src/components/form/tiptap/TiptapEditor.vue
index 802e5daf25..d7e469b978 100644
--- a/frontend/src/components/form/tiptap/TiptapEditor.vue
+++ b/frontend/src/components/form/tiptap/TiptapEditor.vue
@@ -227,6 +227,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
+
 div.editor:deep(p.is-editor-empty:first-child::before) {
   content: attr(data-placeholder);
   float: left;
@@ -252,7 +254,7 @@ div.editor:deep(.ec-tiptap-toolbar) {
 .ec-tiptap-toolbar--second,
 .ec-tiptap-toolbar__mobile-divider {
   display: block;
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
     display: none;
   }
 }
diff --git a/frontend/src/components/generic/AvatarRow.vue b/frontend/src/components/generic/AvatarRow.vue
index 087e70b676..f19481a962 100644
--- a/frontend/src/components/generic/AvatarRow.vue
+++ b/frontend/src/components/generic/AvatarRow.vue
@@ -51,11 +51,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
+
 .e-avatarrow {
   display: flex;
   flex-direction: row-reverse;
   gap: 0.8em;
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     gap: 1.1em;
   }
 
@@ -65,7 +67,7 @@ export default {
 }
 
 .e-avatarrow--narrow {
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     gap: 0.8em;
   }
 }
diff --git a/frontend/src/components/layout/ContentCard.vue b/frontend/src/components/layout/ContentCard.vue
index 013f7573b1..0683562f69 100644
--- a/frontend/src/components/layout/ContentCard.vue
+++ b/frontend/src/components/layout/ContentCard.vue
@@ -60,8 +60,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
+
 .ec-content-card__toolbar {
-  @media #{map-get($display-breakpoints, 'xs')} {
+  @media #{map-get(variables.$display-breakpoints, 'xs')} {
     position: sticky;
     top: 0;
     z-index: 5;
diff --git a/frontend/src/components/layout/ContentGroup.vue b/frontend/src/components/layout/ContentGroup.vue
index c64be90c9c..0607f8fd66 100644
--- a/frontend/src/components/layout/ContentGroup.vue
+++ b/frontend/src/components/layout/ContentGroup.vue
@@ -34,8 +34,10 @@ export default {
 </script>
 
 <style lang="scss">
+@use 'src/scss/variables';
+
 .ec-content-group__title {
-  border-bottom: 1px solid map-get($blue-grey, 'lighten-4');
+  border-bottom: 1px solid map-get(variables.$blue-grey, 'lighten-4');
   display: flex;
   align-items: baseline;
   justify-content: space-between;
diff --git a/frontend/src/components/layout/HorizontalRule.vue b/frontend/src/components/layout/HorizontalRule.vue
index 5979df154d..4569ca040e 100644
--- a/frontend/src/components/layout/HorizontalRule.vue
+++ b/frontend/src/components/layout/HorizontalRule.vue
@@ -12,10 +12,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/scss/variables';
+
 hr {
   border: none;
-  border-top: 1px solid map-get($blue-grey, 'lighten-3');
-  color: map-get($blue-grey, 'base');
+  border-top: 1px solid map-get(variables.$blue-grey, 'lighten-3');
+  color: map-get(variables.$blue-grey, 'base');
   overflow: visible;
   text-align: center;
   margin: 30px 0;
diff --git a/frontend/src/components/print/configurator/PagesOverview.vue b/frontend/src/components/print/configurator/PagesOverview.vue
index ded9c4240f..9b698c533b 100644
--- a/frontend/src/components/print/configurator/PagesOverview.vue
+++ b/frontend/src/components/print/configurator/PagesOverview.vue
@@ -23,7 +23,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@media #{map-get($display-breakpoints, 'md-and-up')} {
+@use 'src/scss/variables';
+
+@media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
   .e-pages-overview {
     background: #eee;
     position: relative;
diff --git a/frontend/src/components/program/FormScheduleEntryList.vue b/frontend/src/components/program/FormScheduleEntryList.vue
index 27bb2f8e0d..4abdd958c2 100644
--- a/frontend/src/components/program/FormScheduleEntryList.vue
+++ b/frontend/src/components/program/FormScheduleEntryList.vue
@@ -86,6 +86,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+@use 'src/scss/variables';
 .period.period {
   border-bottom-width: 1px !important;
   border-bottom-style: solid !important;
@@ -93,7 +94,7 @@ export default {
 }
 
 .header {
-  border-bottom: 1px solid map-get($blue-grey, 'lighten-4');
+  border-bottom: 1px solid map-get(variables.$blue-grey, 'lighten-4');
 }
 .transition-list-item {
   transition: all 0.5s;
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
index 9d1c7ada9a..d238f6aadf 100644
--- a/frontend/src/components/program/ScheduleEntries.vue
+++ b/frontend/src/components/program/ScheduleEntries.vue
@@ -99,10 +99,12 @@ export default {
 </script>
 
 <style lang="scss">
+@use 'src/scss/variables';
+
 .fab--bottom_nav {
   position: fixed;
   bottom: calc(16px + 56px + env(safe-area-inset-bottom)) !important;
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     bottom: calc(16px + 36px + env(safe-area-inset-bottom)) !important;
   }
 }
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index c2a58b0a68..ef02852bb8 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -347,11 +347,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
+
 .e-picasso {
   border: none;
   overflow: auto;
 
-  @media #{map-get($display-breakpoints, 'xs')} {
+  @media #{map-get(variables.$display-breakpoints, 'xs')} {
     position: fixed;
     height: inherit;
     top: 48px;
@@ -360,21 +362,21 @@ export default {
     right: 0;
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
     height: calc(100vh - 106px);
   }
 
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     height: calc(100vh - 168px);
   }
 
   :deep {
     .v-event-timed-container {
       margin-right: 3px;
-      @media #{map-get($display-breakpoints, 'sm-and-up')} {
+      @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
         margin-right: 5px;
       }
-      @media #{map-get($display-breakpoints, 'md-and-up')} {
+      @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
         margin-right: 6px;
       }
     }
@@ -481,7 +483,7 @@ export default {
   .v-select__selections {
     gap: 4px;
     padding: 2px;
-    @media #{map-get($display-breakpoints, 'md-and-up')} {
+    @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
       padding: 4px 2px;
     }
     width: 100%;
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 4607eeca65..037bc6831b 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -294,15 +294,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
+
 .e-picasso-entry {
   user-select: none;
   display: block;
   height: 100%;
   padding: 1px;
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
     padding: 1px 2px;
   }
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     padding: 2px 3px;
     line-height: normal;
   }
@@ -320,7 +322,7 @@ export default {
   }
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-up')} {
+@media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
   .e-picasso-entry {
     font-size: 12px;
   }
@@ -479,7 +481,7 @@ export default {
   font-size: 11px;
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-up')} {
+@media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
   .e-picasso-entry:hover .e-picasso-entry__drag-bottom::after {
     display: block; // resize handle not visible on mobile
   }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 617a0d4f58..836b258bf8 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -19,6 +19,8 @@ import 'vue-toastification/dist/index.css'
 import { Resize } from 'vuetify/directives'
 import ResizeObserver from 'v-resize-observer'
 
+import '@/scss/main.scss'
+
 // const env = getEnv()
 // if (env && env.SENTRY_FRONTEND_DSN) {
 //   const sentryEnvironment = env.SENTRY_ENVIRONMENT ?? 'local'
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 4c5cb48b0f..643c2686c3 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -17,6 +17,7 @@ import * as colors from 'vuetify/util/colors'
 import { apiPropsMixin } from '@/mixins/apiPropsMixin'
 
 // Styles
+import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
 class VuetifyLoaderPlugin {
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 9f5a07c805..46199ea370 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -155,11 +155,11 @@ body {
     display: contents !important;
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
-    .d-sm-contents {
-      display: contents !important;
-    }
-  }
+  // @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
+  //   .d-sm-contents {
+  //     display: contents !important;
+  //   }
+  // }
 }
 
 .d-grid {
diff --git a/frontend/src/scss/main.scss b/frontend/src/scss/main.scss
new file mode 100644
index 0000000000..cc8cc35bf9
--- /dev/null
+++ b/frontend/src/scss/main.scss
@@ -0,0 +1,3 @@
+@import "./variables";
+@import "./global";
+@import 'vuetify/styles';
\ No newline at end of file
diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss
new file mode 100644
index 0000000000..0b793bcdd1
--- /dev/null
+++ b/frontend/src/scss/variables.scss
@@ -0,0 +1,130 @@
+// @use 'sass:math';
+// @use 'sass:map';
+// @use 'sass:meta';
+// @use 'vuetify/lib/styles/tools/functions' as *;
+// @use "vuetify/elevations";
+
+// Custom Variables (not used, only for demo)
+$white: #fff !default;
+$font-family: "Quicksand";
+
+// Vuetify Variables
+@forward 'vuetify/settings' with (
+
+    // the next line is just a test (overriding 1rem with 1rem)
+    $font-size-root: 1rem,
+
+    // TODO: cleanup original variable overrides 
+
+    // $body-font-family: 'Inter', sans-serif, emoji;
+    // $heading-font-family: $body-font-family;
+    // $body-font-weight: 400;
+    // $font-weights: (
+    // 'light': 200,
+    // 'regular': 400,
+    // 'bold': 600,
+    // );
+    // $typography: (
+    //     'h1': (
+    //         'size': 6rem,
+    //         'weight': 200,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.022em,
+    //         'font-family': $heading-font-family,
+    //     ),
+    //     'h2': (
+    //         'size': 3.75rem,
+    //         'weight': 200,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.022em,
+    //         'font-family': $heading-font-family,
+    //     ),
+    //     'h3': (
+    //         'size': 3rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.0215em,
+    //         'font-family': $heading-font-family,
+    //     ),
+    //     'h4': (
+    //         'size': 2.125rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.021em,
+    //         'font-family': $heading-font-family,
+    //     ),
+    //     'h5': (
+    //         'size': 1.5rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.019em,
+    //         'font-family': $heading-font-family,
+    //     ),
+    //     'h6': (
+    //         'size': 1.25rem,
+    //         'weight': 600,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.0125em,
+    //         'font-family': $heading-font-family,
+    //     ),
+    //     'subtitle-1': (
+    //         'size': 1.125rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.017em,
+    //         'font-family': $body-font-family,
+    //     ),
+    //     'subtitle-2': (
+    //         'size': 0.875rem,
+    //         'weight': 600,
+    //         'line-height': 1.375rem,
+    //         'letter-spacing': -0.006em,
+    //         'font-family': $body-font-family,
+    //     ),
+    //     'body-2': (
+    //         'size': 0.875rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.006em,
+    //         'font-family': $body-font-family,
+    //     ),
+    //     'body-1': (
+    //         'size': 1rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': -0.011em,
+    //         'font-family': $body-font-family,
+    //     ),
+    //     'button': (
+    //     'size': .875rem,
+    //     'weight': 500,
+    //     'line-height': 2.25rem,
+    //     'letter-spacing': .0892857143em,
+    //     'font-family': $body-font-family,
+    //     'text-transform': uppercase
+    //     ),
+    //     'caption': (
+    //         'size': 0.75rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': 0em,
+    //         'font-family': $body-font-family,
+    //     ),
+    //     'overline': (
+    //         'size': 0.625rem,
+    //         'weight': 400,
+    //         'line-height': 1.428571429,
+    //         'letter-spacing': 0.01em,
+    //         'font-family': $body-font-family,
+    //     ),
+    // ),
+    // $btn-letter-spacing: 0.25px;
+    // $btn-text-transform: inherit;
+    // $bottom-nav-btn-min-width: 60px;
+    // $list-item-action-icon-margin: 20px;
+    // $menu-content-border-radius: 0 0 4px 4px;
+    // $primary-transition: 0.1s ease-in-out !default;
+    // $card-actions-padding: 16px;
+    // $expansion-panel-header-padding: 16px;
+    // $expansion-panel-content-padding: 0 16px 16px;
+);
\ No newline at end of file
diff --git a/frontend/src/scss/variables.scss.tmp b/frontend/src/scss/variables.scss.tmp
deleted file mode 100644
index 65fec7cdc3..0000000000
--- a/frontend/src/scss/variables.scss.tmp
+++ /dev/null
@@ -1,103 +0,0 @@
-$body-font-family: 'Inter', sans-serif, emoji;
-$heading-font-family: $body-font-family;
-$body-font-weight: 400;
-$font-weights: (
-  'light': 200,
-  'regular': 400,
-  'bold': 600,
-);
-$headings: (
-  'h1': (
-    'size': 6rem,
-    'weight': 200,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.022em,
-    'font-family': $heading-font-family,
-  ),
-  'h2': (
-    'size': 3.75rem,
-    'weight': 200,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.022em,
-    'font-family': $heading-font-family,
-  ),
-  'h3': (
-    'size': 3rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.0215em,
-    'font-family': $heading-font-family,
-  ),
-  'h4': (
-    'size': 2.125rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.021em,
-    'font-family': $heading-font-family,
-  ),
-  'h5': (
-    'size': 1.5rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.019em,
-    'font-family': $heading-font-family,
-  ),
-  'h6': (
-    'size': 1.25rem,
-    'weight': 600,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.0125em,
-    'font-family': $heading-font-family,
-  ),
-  'subtitle-1': (
-    'size': 1.125rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.017em,
-    'font-family': $body-font-family,
-  ),
-  'subtitle-2': (
-    'size': 0.875rem,
-    'weight': 600,
-    'line-height': 1.375rem,
-    'letter-spacing': -0.006em,
-    'font-family': $body-font-family,
-  ),
-  'body-2': (
-    'size': 0.875rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.006em,
-    'font-family': $body-font-family,
-  ),
-  'body-1': (
-    'size': 1rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': -0.011em,
-    'font-family': $body-font-family,
-  ),
-  'caption': (
-    'size': 0.75rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': 0em,
-    'font-family': $body-font-family,
-  ),
-  'overline': (
-    'size': 0.625rem,
-    'weight': 400,
-    'line-height': 1.428571429,
-    'letter-spacing': 0.01em,
-    'font-family': $body-font-family,
-  ),
-);
-$btn-letter-spacing: 0.25px;
-$btn-text-transform: inherit;
-$bottom-nav-btn-min-width: 60px;
-$list-item-action-icon-margin: 20px;
-$menu-content-border-radius: 0 0 4px 4px;
-$primary-transition: 0.1s ease-in-out !default;
-$card-actions-padding: 16px;
-$expansion-panel-header-padding: 16px;
-$expansion-panel-content-padding: 0 16px 16px;
diff --git a/frontend/src/views/activity/SideBarProgram.vue b/frontend/src/views/activity/SideBarProgram.vue
index 5ed3e62db9..61470138d6 100644
--- a/frontend/src/views/activity/SideBarProgram.vue
+++ b/frontend/src/views/activity/SideBarProgram.vue
@@ -65,8 +65,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
 .ec-sidebar-program__picasso :deep(.e-picasso) {
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     height: calc(100vh - 202px);
   }
 }
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index a542182f4f..5a012c1392 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -434,14 +434,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
 .day-header {
   z-index: 1;
   position: sticky;
   top: calc(48px - 1px - 0.75rem);
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
     top: calc(0px - 1px - 0.75rem);
   }
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     top: calc(64px - 1px - 0.75rem);
   }
   padding-bottom: 0.25rem;
diff --git a/frontend/src/views/camp/Invitation.vue b/frontend/src/views/camp/Invitation.vue
index e525e45820..7a312ad010 100644
--- a/frontend/src/views/camp/Invitation.vue
+++ b/frontend/src/views/camp/Invitation.vue
@@ -206,6 +206,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use 'src/scss/variables';
+
 .bg {
   height: 100%;
   background-image: radial-gradient(
@@ -243,7 +245,7 @@ export default {
     bottom 58% right -5%;
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-up')} {
+@media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
   .hill {
     background-image: radial-gradient(
         150vmax 75% at bottom,
@@ -262,7 +264,7 @@ export default {
   }
 }
 
-@media #{map-get($display-breakpoints, 'md-and-up')} {
+@media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
   .hill {
     transition: background-position 0.5s ease-in-out;
     background-position:
@@ -272,7 +274,7 @@ export default {
   }
 }
 
-@media #{map-get($display-breakpoints, 'lg-and-up')} {
+@media #{map-get(variables.$display-breakpoints, 'lg-and-up')} {
   .hill {
     background-position:
       bottom center,
@@ -333,7 +335,7 @@ export default {
   order: -1;
 }
 
-@media #{map-get($display-breakpoints, 'xs')} {
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   .wood {
     font-size: 22px;
   }
@@ -400,7 +402,7 @@ export default {
   right: min(5%, 42px);
 }
 
-@media #{map-get($display-breakpoints, 'xs')} {
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   .rope,
   .rope::before,
   .rope::after {
@@ -432,17 +434,17 @@ export default {
   background-size:
     auto 40%,
     auto 65%;
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'sm-and-up')} {
     background-size:
       auto 44%,
       auto 65%;
   }
-  @media #{map-get($display-breakpoints, 'md-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'md-and-up')} {
     background-size:
       auto 49%,
       auto 75%;
   }
-  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+  @media #{map-get(variables.$display-breakpoints, 'lg-and-up')} {
     background-size:
       auto 100%,
       auto 90%;
diff --git a/frontend/src/views/camp/navigation/NavigationCamp.vue b/frontend/src/views/camp/navigation/NavigationCamp.vue
index 21249ace01..2c5e78d955 100644
--- a/frontend/src/views/camp/navigation/NavigationCamp.vue
+++ b/frontend/src/views/camp/navigation/NavigationCamp.vue
@@ -30,6 +30,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/scss/variables';
+
 .camp--name:deep(.v-btn__content) {
   width: 100%;
 }
@@ -41,7 +43,7 @@ export default {
 }
 
 .v-application .ec-close-drawer {
-  background-color: #{map-get($blue-grey, 'lighten-5')};
-  border-top: 1px solid #{map-get($blue-grey, 'lighten-4')};
+  background-color: #{map-get(variables.$blue-grey, 'lighten-5')};
+  border-top: 1px solid #{map-get(variables.$blue-grey, 'lighten-4')};
 }
 </style>
diff --git a/frontend/src/views/camp/navigation/mobile/NavBottombar.vue b/frontend/src/views/camp/navigation/mobile/NavBottombar.vue
index 8549faca68..7495d00c3e 100644
--- a/frontend/src/views/camp/navigation/mobile/NavBottombar.vue
+++ b/frontend/src/views/camp/navigation/mobile/NavBottombar.vue
@@ -50,6 +50,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/scss/variables';
 .v-bottom-navigation--fixed {
   height: auto !important;
   min-height: 56px;
@@ -57,7 +58,7 @@ export default {
 }
 
 .v-application .ec-close-drawer {
-  background-color: #{map-get($blue-grey, 'lighten-5')};
-  border-top: 1px solid #{map-get($blue-grey, 'lighten-4')};
+  background-color: #{map-get(variables.$blue-grey, 'lighten-5')};
+  border-top: 1px solid #{map-get(variables.$blue-grey, 'lighten-4')};
 }
 </style>
diff --git a/frontend/src/views/camp/navigation/mobile/NavSidebar.vue b/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
index 0c57d26b80..402d235612 100644
--- a/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
+++ b/frontend/src/views/camp/navigation/mobile/NavSidebar.vue
@@ -124,6 +124,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/scss/variables';
 .v-bottom-navigation--fixed {
   height: auto !important;
   min-height: 56px;
@@ -131,7 +132,7 @@ export default {
 }
 
 .v-application .ec-close-drawer {
-  background-color: #{map-get($blue-grey, 'lighten-5')};
-  border-top: 1px solid #{map-get($blue-grey, 'lighten-4')};
+  background-color: #{map-get(variables.$blue-grey, 'lighten-5')};
+  border-top: 1px solid #{map-get(variables.$blue-grey, 'lighten-4')};
 }
 </style>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 1cdbf0a901..94192a7db0 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -22,6 +22,7 @@ const plugins = [
     autoImport: {
       labs: true,
     },
+    styles: { configFile: 'src/scss/variables.scss' },
   }),
   // svg4VuePlugin(),
 ]
@@ -148,15 +149,15 @@ export default defineConfig(({ mode }) => ({
   },
   css: {
     preprocessorOptions: {
-      scss: {
-        additionalData: `
-        // original default variables from vuetify
-        @import "./node_modules/vuetify/lib/styles/settings/_variables.scss";
-        @import "./node_modules/vuetify/lib/styles/settings/_colors.scss";
-        @import "./node_modules/vuetify/dist/_component-variables.sass";
-        @import "./node_modules/vuetify/dist/_component-variables-labs.sass";
-        `,
-      },
+      // scss: {
+      //   additionalData: `
+      //   // original default variables from vuetify
+      //   @import "./node_modules/vuetify/lib/styles/settings/_variables.scss";
+      //   @import "./node_modules/vuetify/lib/styles/settings/_colors.scss";
+      //   @import "./node_modules/vuetify/dist/_component-variables.sass";
+      //   @import "./node_modules/vuetify/dist/_component-variables-labs.sass";
+      //   `,
+      // },
       // sass: {
       //   additionalData: '@import "./src/scss/variables.scss"\n', // vuetify variable overrides
       // },

From 49aa80992fb8c319827318b5479273be4fde41cc Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sat, 20 Jan 2024 08:14:58 +0100
Subject: [PATCH 17/21] fix LanguageSwitcher and i18n on login view

---
 frontend/src/App.vue                                |  6 +++---
 frontend/src/components/generic/IconWithTooltip.vue |  4 ++--
 frontend/src/components/layout/LanguageSwitcher.vue |  7 +++----
 frontend/src/locales/de.json                        |  2 +-
 frontend/src/locales/en.json                        |  2 +-
 frontend/src/locales/fr.json                        |  2 +-
 frontend/src/locales/it.json                        |  2 +-
 frontend/src/locales/rm.json                        |  4 ++--
 frontend/src/plugins/store/lang.js                  |  5 ++++-
 frontend/src/test/renderWithVuetify.js              |  2 +-
 frontend/src/views/PageNotFound.vue                 |  4 ++--
 frontend/src/views/activity/Category.vue            |  4 ++--
 frontend/src/views/auth/Login.vue                   | 10 +++++-----
 13 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 743b388931..6fe1cc4c64 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -61,9 +61,9 @@ export default {
       const user = await this.$auth.loadUser()
       const profile = await user.profile()._meta.load
 
-      // if (VueI18n.availableLocales.includes(profile.language)) {
-      //   this.$store.commit('setLanguage', profile.language)
-      // }
+      if (VueI18n.availableLocales.includes(profile.language)) {
+        this.$store.commit('setLanguage', profile.language)
+      }
     }
   },
 }
diff --git a/frontend/src/components/generic/IconWithTooltip.vue b/frontend/src/components/generic/IconWithTooltip.vue
index 21d47dc5d6..a329b9a4b0 100644
--- a/frontend/src/components/generic/IconWithTooltip.vue
+++ b/frontend/src/components/generic/IconWithTooltip.vue
@@ -21,9 +21,9 @@
     </template>
     <slot>
       {{ text }}
-      <i18n v-if="tooltipI18nKey" :path="tooltipI18nKey">
+      <i18n-t v-if="tooltipI18nKey" :keypath="tooltipI18nKey">
         <template #br><br class="linebreak" /></template>
-      </i18n>
+      </i18n-t>
     </slot>
   </v-tooltip>
 </template>
diff --git a/frontend/src/components/layout/LanguageSwitcher.vue b/frontend/src/components/layout/LanguageSwitcher.vue
index e8518a0062..d9ce4605a7 100644
--- a/frontend/src/components/layout/LanguageSwitcher.vue
+++ b/frontend/src/components/layout/LanguageSwitcher.vue
@@ -1,14 +1,13 @@
 <template>
-  <v-menu offset-y>
-    <template #activator="{ on, attrs }">
+  <v-menu location="top right">
+    <template #activator="{ props }">
       <v-btn
         id="languageSwitcher"
         variant="text"
         class="my-n2"
         size="small"
         :aria-label="$tc('global.changeLanguage')"
-        v-bind="attrs"
-        v-on="on"
+        v-bind="props"
       >
         <v-icon start size="small">mdi-translate</v-icon>
         {{ $tc('global.language') }}
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index a4d387a5fd..a900a1148d 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -520,7 +520,7 @@
         "accountless": "Hast du noch keinen Account?",
         "email": "E-Mail",
         "infoText": {
-          "dev": "Dies ist die Entwickler-Version von eCamp v3.{br}WICHTIG: Nur für Entwickler-Gebrauch geeignet. Alle Daten sind öffentlich und werden periodisch gelöscht!{br}Login: test@example.com / test"
+          "dev": "Dies ist die Entwickler-Version von eCamp v3.{br}WICHTIG: Nur für Entwickler-Gebrauch geeignet. Alle Daten sind öffentlich und werden periodisch gelöscht!{br}Login: test{'@'}example.com / test"
         },
         "loginCallback": {
           "loginInProgress": "Du wirst eingeloggt"
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 2396d17a67..763a6ad528 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -520,7 +520,7 @@
         "accountless": "Don't have an account yet?",
         "email": "Email",
         "infoText": {
-          "dev": "This is the development version of eCamp v3.{br}IMPORTANT: This is meant for development usage only. All data is public and will be deleted periodically!{br}Login: test@example.com / test"
+          "dev": "This is the development version of eCamp v3.{br}IMPORTANT: This is meant for development usage only. All data is public and will be deleted periodically!{br}Login: test{'@'}example.com / test"
         },
         "loginCallback": {
           "loginInProgress": "You will be logged in"
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index d39e42858f..89947ee1e0 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -500,7 +500,7 @@
         "accountless": "Vous n'avez pas encore de compte?",
         "email": "E-mail",
         "infoText": {
-          "dev": "Ceci est la version de développement d'eCamp v3.{br}IMPORTANT : Ceci est destiné à un usage de développement uniquement. Toutes les données sont publiques et seront supprimées périodiquement !{br}Login : test@example.com / test"
+          "dev": "Ceci est la version de développement d'eCamp v3.{br}IMPORTANT : Ceci est destiné à un usage de développement uniquement. Toutes les données sont publiques et seront supprimées périodiquement !{br}Login : test{'@'}example.com / test"
         },
         "loginCallback": {
           "loginInProgress": "Vous allez être connecté"
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index f52c7b2703..dac96ba1c4 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -500,7 +500,7 @@
         "accountless": "Non hanno ancora un conto?",
         "email": "Indirizzo e-mail",
         "infoText": {
-          "dev": "Questa è la versione di sviluppo di eCamp v3.{br}IMPORTANTE: è destinata esclusivamente all'uso per lo sviluppo. Tutti i dati sono pubblici e verranno cancellati periodicamente!{br}Login: test@example.com / test"
+          "dev": "Questa è la versione di sviluppo di eCamp v3.{br}IMPORTANTE: è destinata esclusivamente all'uso per lo sviluppo. Tutti i dati sono pubblici e verranno cancellati periodicamente!{br}Login: test{'@'}example.com / test"
         },
         "loginCallback": {
           "loginInProgress": "Sarai loggato"
diff --git a/frontend/src/locales/rm.json b/frontend/src/locales/rm.json
index cc7c7cdcb8..1c4eb26227 100644
--- a/frontend/src/locales/rm.json
+++ b/frontend/src/locales/rm.json
@@ -466,7 +466,7 @@
         "email": "E-mail",
         "infoText": {
           "beta": "Quai è la versiun beta dad eCamp v3. Questa versiun po servir per planisaziuns da champs reals che na fan dentant betg prescha. Il dumber limità da persunas ch'utiliseschan la versiun beta sto quintar cun interrupziuns pervia da lavurs da mantegniment.",
-          "dev": "Quai è la versiun per sviluppaders dad eCamp v3.{br}IMPURTANT: Mo adattà per il diever da sviluppaders. Tut las datas èn publicas e vegnan stizzadas regularmain!{br}Annunzia: test@example.com / test"
+          "dev": "Quai è la versiun per sviluppaders dad eCamp v3.{br}IMPURTANT: Mo adattà per il diever da sviluppaders. Tut las datas èn publicas e vegnan stizzadas regularmain!{br}Annunzia: test{'@'}example.com / test"
         },
         "loginCallback": {
           "loginInProgress": "Ti vegns annunzià"
@@ -621,4 +621,4 @@
       "profile": "Profil"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/plugins/store/lang.js b/frontend/src/plugins/store/lang.js
index 252632af0e..23106b18c9 100644
--- a/frontend/src/plugins/store/lang.js
+++ b/frontend/src/plugins/store/lang.js
@@ -21,9 +21,12 @@ export const mutations = {
     }
 
     state.language = lang
-    VueI18n.locale = lang
+    VueI18n.global.locale = lang
     dayjs.locale(Object.keys(dayjsLocaleMap).includes(lang) ? dayjsLocaleMap[lang] : lang)
+
+    // TODO: commented line throws error
     // this.$validator.localize(lang)
+
     axios.defaults.headers.common['Accept-Language'] = lang
     document.querySelector('html').setAttribute('lang', lang)
     window.localStorage.setItem(LANG_KEY, lang)
diff --git a/frontend/src/test/renderWithVuetify.js b/frontend/src/test/renderWithVuetify.js
index f72d330685..b9d776a3d3 100644
--- a/frontend/src/test/renderWithVuetify.js
+++ b/frontend/src/test/renderWithVuetify.js
@@ -45,7 +45,7 @@ export const createVuexStore = (storeOptions) => {
  */
 export const setTestLocale = (locale) => {
   const language = locale.substring(0, 2)
-  VueI18n.locale = locale
+  VueI18n.global.locale = locale
   Vue.dayjs.locale(locale)
   localize(language)
 }
diff --git a/frontend/src/views/PageNotFound.vue b/frontend/src/views/PageNotFound.vue
index ff279eda0e..b1481a28ee 100644
--- a/frontend/src/views/PageNotFound.vue
+++ b/frontend/src/views/PageNotFound.vue
@@ -14,9 +14,9 @@
       <TentNight class="tent" />
       <div class="relative">
         <p class="text-white text-center px-3 d-flex justify-center mb-n8 relative">
-          <i18n path="views.pageNotFound.detail">
+          <i18n-t keypath="views.pageNotFound.detail">
             <template #br><br /></template>
-          </i18n>
+          </i18n-t>
           <br />
           <v-btn variant="text" dark :to="{ name: 'home' }" class="absolute bottom-n100">
             <v-icon start>mdi-tent</v-icon>
diff --git a/frontend/src/views/activity/Category.vue b/frontend/src/views/activity/Category.vue
index 8df25084ea..60d1409fc4 100644
--- a/frontend/src/views/activity/Category.vue
+++ b/frontend/src/views/activity/Category.vue
@@ -39,10 +39,10 @@
           v-if="!loading && category().rootContentNode().children().items.length === 0"
           class="text-center bg-blue-lighten-4 text-blue-darken-4 py-4 px-2 create-layout-help"
         >
-          <i18n path="views.activity.category.createLayoutHelp">
+          <i18n-t keypath="views.activity.category.createLayoutHelp">
             <template #categoryShort>{{ category().short }}</template>
             <template #br><br /></template>
-          </i18n>
+          </i18n-t>
         </div>
         <root-node
           v-if="!loading"
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index a1e2c69134..6d875f1d80 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -18,9 +18,9 @@
       color="warning"
     >
       <div>
-        <i18n :path="infoTextKey">
+        <i18n-t :keypath="infoTextKey">
           <template #br><br /></template>
-        </i18n>
+        </i18n-t>
       </div>
     </v-alert>
     <v-alert v-if="error" variant="outlined" text border="start" type="error">
@@ -129,8 +129,8 @@
         }}</span>
       </v-btn>
       <small class="w-100">
-        <i18n
-          path="views.auth.login.acceptTermsOfServiceOnOAuthLogin"
+        <i18n-t
+          keypath="views.auth.login.acceptTermsOfServiceOnOAuthLogin"
           tag="p"
           class="text--secondary text-center w-100 mt-2"
           style="hyphens: auto"
@@ -140,7 +140,7 @@
               $tc('views.auth.login.termsOfServiceLink')
             }}</a>
           </template>
-        </i18n>
+        </i18n-t>
       </small>
     </div>
     <p class="mt-8 mb-0 text--secondary text-center">

From 95fa310e193c5c676c4c5c99fd05c86b45f4b057 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sat, 20 Jan 2024 12:32:24 +0100
Subject: [PATCH 18/21] setup vee-validate and test with ETextField on login
 view

---
 .../src/components/form/base/ETextField.vue   | 185 ++++++++++++++----
 frontend/src/plugins/i18n/index.js            |  30 +--
 frontend/src/plugins/store/lang.js            |   6 +-
 frontend/src/plugins/veeValidate.js           |  35 ++--
 4 files changed, 170 insertions(+), 86 deletions(-)

diff --git a/frontend/src/components/form/base/ETextField.vue b/frontend/src/components/form/base/ETextField.vue
index 7b76481cf5..6bcd59fa8e 100644
--- a/frontend/src/components/form/base/ETextField.vue
+++ b/frontend/src/components/form/base/ETextField.vue
@@ -1,53 +1,148 @@
 <template>
-  <!--  <ValidationProvider-->
-  <!--    v-slot="{ errors: veeErrors }"-->
-  <!--    ref="validationProvider"-->
-  <!--    tag="div"-->
-  <!--    :name="name"-->
-  <!--    :vid="veeId"-->
-  <!--    :rules="veeRules"-->
-  <!--    :required="required"-->
-  <!--    class="e-form-container"-->
-  <!--  >-->
-  <v-text-field
-    ref="textField"
-    v-bind="$attrs"
-    :filled="filled"
-    :required="required"
-    :hide-details="hideDetails"
-    :error-messages="errorMessages"
-    :label="label || name"
-    :class="[inputClass]"
-    :type="type"
-    v-on="inputListeners"
-  >
-    <!-- passing through all slots -->
-    <template v-for="(_, name) in $slots" #[name]>
-      <slot :name="name" />
-    </template>
-    <template v-for="(_, name) in $slots" #[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
-    </template>
-  </v-text-field>
-  <!--  </ValidationProvider>-->
+  <div class="e-form-container">
+    <v-text-field
+      v-bind="$attrs"
+      :id="name"
+      ref="textField"
+      :name="name"
+      :type="type"
+      :model-value="inputValue"
+      :error-messages="errorMessage"
+      :label="label || name"
+      :class="[inputClass]"
+      :filled="filled"
+      :required="required"
+      :hide-details="hideDetails"
+      @update:model-value="handleChange"
+      @blur="handleBlur"
+    >
+      <!-- passing through all slots -->
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </v-text-field>
+  </div>
 </template>
 
-<script>
-// import { ValidationProvider } from 'vee-validate'
+<script setup>
+import { toRef } from 'vue'
+import { useField } from 'vee-validate'
+
+// TODO: test & implement the following props: "veeId", "required"
+
+const props = defineProps({
+  /**
+   * from vee-validate example at https://vee-validate.logaretm.com/v4/examples/custom-inputs/
+   */
+
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  successMessage: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * props from formComponentPropsMixin
+   */
+  id: {
+    type: String,
+    required: false,
+    default: null,
+  },
+
+  // vuetify property hideDetails
+  filled: {
+    type: Boolean,
+    default: true,
+  },
+
+  // vuetify property hideDetails
+  hideDetails: {
+    type: String,
+    default: 'auto',
+  },
+
+  // set classes on input
+  inputClass: {
+    type: String,
+    default: '',
+    required: false,
+  },
+
+  // used as field name for validation and as label (if no override label is provided)
+  name: {
+    type: String,
+    required: false,
+    default: null,
+  },
+
+  // override the label which is displayed to the user; name is used instead if no label is provided
+  label: {
+    type: String,
+    required: false,
+    default: null,
+  },
+
+  // error messages from outside which should be displayed on the component
+  errorMessages: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+
+  /**
+   * props from formComponentMixin.js
+   */
+
+  // ID for vee-validation
+  veeId: {
+    type: String,
+    required: false,
+    default: null,
+  },
+
+  // rules for vee-validation
+  veeRules: {
+    type: [String, Object],
+    required: false,
+    default: '',
+  },
+
+  /**
+   * additional props for ETextField
+   */
+  type: {
+    type: String,
+    default: 'text',
+  },
+})
+
+const name = toRef(props, 'name')
+const rules = toRef(props, 'veeRules')
+const {
+  value: inputValue,
+  errorMessage,
+  errors,
+  handleBlur,
+  handleChange,
+  meta,
+} = useField(name, rules, {
+  initialValue: props.modelValue,
+})
+</script>
+
+<!-- <script>
+import { Field } from 'vee-validate'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 
 export default {
   name: 'ETextField',
   components: {
-    // ValidationProvider
-  },
-  mixins: [formComponentPropsMixin, formComponentMixin],
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-    },
+    Field,
   },
   data() {
     return {
@@ -88,9 +183,15 @@ export default {
     focus() {
       this.$refs.textField.focus()
     },
+    isRequired(value) {
+      if (value && value.trim()) {
+        return true
+      }
+      return 'This is required'
+    },
   },
 }
-</script>
+</script> -->
 
 <style scoped>
 [required]:deep(label::after) {
diff --git a/frontend/src/plugins/i18n/index.js b/frontend/src/plugins/i18n/index.js
index 7123c1abca..0b2d894e30 100644
--- a/frontend/src/plugins/i18n/index.js
+++ b/frontend/src/plugins/i18n/index.js
@@ -23,11 +23,6 @@ import deCHScout from '@/locales/de-CH-scout.json'
 import rm from '@/locales/rm.json'
 import rmCHScout from '@/locales/rm-CH-scout.json'
 
-import validationIt from '@vee-validate/i18n/dist/locale/it.json'
-import validationFr from '@vee-validate/i18n/dist/locale/fr.json'
-import validationEn from '@vee-validate/i18n/dist/locale/en.json'
-import validationDe from '@vee-validate/i18n/dist/locale/de.json'
-
 import vuetifyEn from 'vuetify/lib/locale/en'
 import vuetifyDe from 'vuetify/lib/locale/de'
 import vuetifyFr from 'vuetify/lib/locale/fr'
@@ -42,30 +37,6 @@ const i18n = createI18n({
   locale: 'de',
   fallbackLocale: fallbackLocales,
   messages: deepmerge.all([
-    // vee-validate locales
-    {
-      it: {
-        global: {
-          validation: validationIt.messages,
-        },
-      },
-      fr: {
-        global: {
-          validation: validationFr.messages,
-        },
-      },
-      en: {
-        global: {
-          validation: validationEn.messages,
-        },
-      },
-      de: {
-        global: {
-          validation: validationDe.messages,
-        },
-      },
-    },
-
     // vuetify locales
     {
       en: { $vuetify: vuetifyEn },
@@ -103,6 +74,7 @@ const i18n = createI18n({
     },
   ]),
   silentTranslationWarn: true,
+  silentFallbackWarn: true,
 })
 
 Object.defineProperty(i18n, 'browserPreferredLocale', {
diff --git a/frontend/src/plugins/store/lang.js b/frontend/src/plugins/store/lang.js
index 23106b18c9..ff4b3dbecc 100644
--- a/frontend/src/plugins/store/lang.js
+++ b/frontend/src/plugins/store/lang.js
@@ -2,6 +2,7 @@ import axios from 'axios'
 import VueI18n from '@/plugins/i18n'
 import { dayjsLocaleMap } from '@/common/helpers/dayjs.js'
 import dayjs from '@/common/helpers/dayjs.js'
+import { setLocale as veeValidateSetLocale } from '@vee-validate/i18n'
 
 const LANG_KEY = 'language'
 
@@ -23,10 +24,7 @@ export const mutations = {
     state.language = lang
     VueI18n.global.locale = lang
     dayjs.locale(Object.keys(dayjsLocaleMap).includes(lang) ? dayjsLocaleMap[lang] : lang)
-
-    // TODO: commented line throws error
-    // this.$validator.localize(lang)
-
+    veeValidateSetLocale(lang)
     axios.defaults.headers.common['Accept-Language'] = lang
     document.querySelector('html').setAttribute('lang', lang)
     window.localStorage.setItem(LANG_KEY, lang)
diff --git a/frontend/src/plugins/veeValidate.js b/frontend/src/plugins/veeValidate.js
index e7f45936be..bbb5b8324a 100644
--- a/frontend/src/plugins/veeValidate.js
+++ b/frontend/src/plugins/veeValidate.js
@@ -1,28 +1,41 @@
-import { configure } from 'vee-validate'
+import { configure, defineRule } from 'vee-validate'
+import { localize, setLocale } from '@vee-validate/i18n'
 import * as rules from '@vee-validate/rules'
-import i18n from '@/plugins/i18n'
+
 // import greaterThan_time from './veeValidate/greaterThan_time.js'
 // import greaterThanOrEqual_date from './veeValidate/greaterThanOrEqual_date.js'
 // import lessThanOrEqual_date from './veeValidate/lessThanOrEqual_date.js'
 
+import validationIt from '@vee-validate/i18n/dist/locale/it.json'
+import validationFr from '@vee-validate/i18n/dist/locale/fr.json'
+import validationEn from '@vee-validate/i18n/dist/locale/en.json'
+import validationDe from '@vee-validate/i18n/dist/locale/de.json'
+
 class VeeValidatePlugin {
-  install(Vue) {
+  install() {
     // Eager = Lazy at the beginning, Agressive once the field is invalid (https://vee-validate.logaretm.com/v3/guide/interaction-and-ux.html#interaction-modes)
     // setInteractionMode('eager')
 
-    // translate default error messages
+    const dictionary = {
+      en: validationEn,
+      de: validationDe,
+      fr: validationFr,
+      it: validationIt,
+    }
+
     configure({
-      // this will be used to generate messages.
-      defaultMessage: (field, values) => {
-        return i18n.tc(`global.validation.${values._rule_}`, 0, values)
-      },
+      // TODO: this is using localize from vee-validate instead of vue-i18n.
+      // vee-validate messages are not directly compatible with vue-i18n, so some message format change would be needed,
+      // if we want to use vue-i18n here (see alo https://github.com/logaretm/vee-validate/issues/3684).
+      // Not using vue-18n will break translation for our own custom validators below, so we still need to fix this.
+      generateMessage: localize(dictionary),
     })
 
+    setLocale('en')
+
     // install all default rules
     Object.keys(rules).forEach((rule) => {
-      // extend(rule, {
-      //   ...rules[rule], // copies rule configuration
-      // })
+      defineRule(rule, rules[rule])
     })
 
     /**

From 65dff54bfea3f76f6b36a418f2c50c82307ca8c9 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sat, 20 Jan 2024 15:19:11 +0100
Subject: [PATCH 19/21] fix login functionality

---
 frontend/src/App.vue                 |  2 +-
 frontend/src/plugins/store/index.js  |  2 +-
 frontend/src/plugins/store/lang.js   |  2 +-
 frontend/src/plugins/veeValidate.js  | 17 +++++------------
 frontend/src/views/Profile.vue       |  4 ++--
 frontend/src/views/auth/Login.vue    |  5 +++--
 frontend/src/views/auth/Register.vue |  4 ++--
 frontend/src/views/dev/Controls.vue  |  2 +-
 8 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6fe1cc4c64..bdfd5b7238 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -61,7 +61,7 @@ export default {
       const user = await this.$auth.loadUser()
       const profile = await user.profile()._meta.load
 
-      if (VueI18n.availableLocales.includes(profile.language)) {
+      if (VueI18n.global.availableLocales.includes(profile.language)) {
         this.$store.commit('setLanguage', profile.language)
       }
     }
diff --git a/frontend/src/plugins/store/index.js b/frontend/src/plugins/store/index.js
index 59b088c7ac..3161997e1d 100644
--- a/frontend/src/plugins/store/index.js
+++ b/frontend/src/plugins/store/index.js
@@ -15,7 +15,7 @@ export default {
         auth,
       },
       strict: debug,
-      plugins: debug ? [createLogger()] : [],
+      // plugins: debug ? [createLogger()] : [],
     })
 
     app.use(store)
diff --git a/frontend/src/plugins/store/lang.js b/frontend/src/plugins/store/lang.js
index ff4b3dbecc..5ad474d691 100644
--- a/frontend/src/plugins/store/lang.js
+++ b/frontend/src/plugins/store/lang.js
@@ -24,7 +24,7 @@ export const mutations = {
     state.language = lang
     VueI18n.global.locale = lang
     dayjs.locale(Object.keys(dayjsLocaleMap).includes(lang) ? dayjsLocaleMap[lang] : lang)
-    veeValidateSetLocale(lang)
+    veeValidateSetLocale(lang.substring(0, 2))
     axios.defaults.headers.common['Accept-Language'] = lang
     document.querySelector('html').setAttribute('lang', lang)
     window.localStorage.setItem(LANG_KEY, lang)
diff --git a/frontend/src/plugins/veeValidate.js b/frontend/src/plugins/veeValidate.js
index bbb5b8324a..943d586d9c 100644
--- a/frontend/src/plugins/veeValidate.js
+++ b/frontend/src/plugins/veeValidate.js
@@ -6,29 +6,22 @@ import * as rules from '@vee-validate/rules'
 // import greaterThanOrEqual_date from './veeValidate/greaterThanOrEqual_date.js'
 // import lessThanOrEqual_date from './veeValidate/lessThanOrEqual_date.js'
 
-import validationIt from '@vee-validate/i18n/dist/locale/it.json'
-import validationFr from '@vee-validate/i18n/dist/locale/fr.json'
-import validationEn from '@vee-validate/i18n/dist/locale/en.json'
-import validationDe from '@vee-validate/i18n/dist/locale/de.json'
+import it from '@vee-validate/i18n/dist/locale/it.json'
+import fr from '@vee-validate/i18n/dist/locale/fr.json'
+import en from '@vee-validate/i18n/dist/locale/en.json'
+import de from '@vee-validate/i18n/dist/locale/de.json'
 
 class VeeValidatePlugin {
   install() {
     // Eager = Lazy at the beginning, Agressive once the field is invalid (https://vee-validate.logaretm.com/v3/guide/interaction-and-ux.html#interaction-modes)
     // setInteractionMode('eager')
 
-    const dictionary = {
-      en: validationEn,
-      de: validationDe,
-      fr: validationFr,
-      it: validationIt,
-    }
-
     configure({
       // TODO: this is using localize from vee-validate instead of vue-i18n.
       // vee-validate messages are not directly compatible with vue-i18n, so some message format change would be needed,
       // if we want to use vue-i18n here (see alo https://github.com/logaretm/vee-validate/issues/3684).
       // Not using vue-18n will break translation for our own custom validators below, so we still need to fix this.
-      generateMessage: localize(dictionary),
+      generateMessage: localize({ en, de, fr, it }),
     })
 
     setLocale('en')
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 6f3295f19a..976f797b05 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -107,7 +107,7 @@ export default {
       return this.user?.profile()
     },
     availableLocales() {
-      return VueI18n.availableLocales.map((l) => ({
+      return VueI18n.global.availableLocales.map((l) => ({
         value: l,
         text: this.$tc('global.language', 1, l),
       }))
@@ -115,7 +115,7 @@ export default {
   },
   watch: {
     profile() {
-      if (VueI18n.availableLocales.includes(this.profile?.language)) {
+      if (VueI18n.global.availableLocales.includes(this.profile?.language)) {
         this.$store.commit('setLanguage', this.profile?.language)
       }
     },
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index 6d875f1d80..07b2c87425 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -217,12 +217,13 @@ export default {
         .then(async () => {
           const user = await this.$auth.loadUser()
           const profile = await user.profile()._meta.load
-          if (VueI18n.availableLocales.includes(profile.language)) {
-            // await this.$store.commit('setLanguage', profile.language)
+          if (VueI18n.global.availableLocales.includes(profile.language)) {
+            await this.$store.commit('setLanguage', profile.language)
           }
           this.$router.replace(this.$route.query.redirect || '/')
         })
         .catch((e) => {
+          console.log(e)
           this.authenticationInProgress = false
           this.error = serverErrorToString(e)
         })
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index 07d739efdf..816dee4f1d 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -175,7 +175,7 @@ export default {
       }
     },
     availableLocales() {
-      return VueI18n.availableLocales.map((l) => ({
+      return VueI18n.global.availableLocales.map((l) => ({
         value: l,
         text: this.$tc('global.language', 1, l),
       }))
@@ -190,7 +190,7 @@ export default {
   },
   watch: {
     language() {
-      if (VueI18n.availableLocales.includes(this.language)) {
+      if (VueI18n.global.availableLocales.includes(this.language)) {
         this.$store.commit('setLanguage', this.language)
       }
     },
diff --git a/frontend/src/views/dev/Controls.vue b/frontend/src/views/dev/Controls.vue
index 8c6ae35e34..bcc9009179 100644
--- a/frontend/src/views/dev/Controls.vue
+++ b/frontend/src/views/dev/Controls.vue
@@ -271,7 +271,7 @@ export default {
       return '/api/schedule_entries/b6668dffbb2b' // Harry Potter - LA Lagerbau
     },
     availableLocales() {
-      return VueI18n.availableLocales.map((l) => ({
+      return VueI18n.global.availableLocales.map((l) => ({
         value: l,
         text: this.$tc('global.language', 1, l),
       }))

From 6ed058b4959b02eed5295c31d00a68564dae5d1e Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sat, 20 Jan 2024 15:50:43 +0100
Subject: [PATCH 20/21] fix api access in router

---
 frontend/src/components/dialog/DialogUiBase.vue |  4 ++--
 frontend/src/router.js                          | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/dialog/DialogUiBase.vue b/frontend/src/components/dialog/DialogUiBase.vue
index fa4aafa436..c3d56098d1 100644
--- a/frontend/src/components/dialog/DialogUiBase.vue
+++ b/frontend/src/components/dialog/DialogUiBase.vue
@@ -9,7 +9,7 @@ export default {
     submitLabel: {
       type: String,
       default: function () {
-        return this.$tc('global.button.submit')
+        // return this.$tc('global.button.submit')
       },
       required: false,
     },
@@ -21,7 +21,7 @@ export default {
     cancelLabel: {
       type: String,
       default: function () {
-        return this.$tc('global.button.cancel')
+        // return this.$tc('global.button.cancel')
       },
       required: false,
     },
diff --git a/frontend/src/router.js b/frontend/src/router.js
index b3de0fff48..a9770365b0 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -462,38 +462,38 @@ async function requireMaterialList(to, from, next) {
 
 export function campFromRoute(route) {
   return function () {
-    return this.api.get().camps({ id: route.params.campId })
+    return apiStore.get().camps({ id: route.params.campId })
   }
 }
 
 export function invitationFromInviteKey(inviteKey) {
   return function () {
-    return this.api.get().invitations({ action: 'find', id: inviteKey })
+    return apiStore.get().invitations({ action: 'find', id: inviteKey })
   }
 }
 
 export function periodFromRoute(route) {
   return function () {
-    return this.api.get().periods({ id: route.params.periodId })
+    return apiStore.get().periods({ id: route.params.periodId })
   }
 }
 
 function scheduleEntryFromRoute(route) {
   return function () {
-    return this.api.get().scheduleEntries({ id: route.params.scheduleEntryId })
+    return apiStore.get().scheduleEntries({ id: route.params.scheduleEntryId })
   }
 }
 
 function categoryFromRoute(route) {
   return function () {
-    const camp = this.api.get().camps({ id: route.params.campId })
+    const camp = apiStore.get().camps({ id: route.params.campId })
     return camp.categories().items.find((c) => c.id === route.params.categoryId)
   }
 }
 
 export function materialListFromRoute(route) {
   return function () {
-    return this.api.get().materialLists({ id: route.params.materialId })
+    return apiStore.get().materialLists({ id: route.params.materialId })
   }
 }
 
@@ -517,7 +517,7 @@ function getContentLayout(route) {
 
 function dayFromScheduleEntryInRoute(route) {
   return function () {
-    return this.api.get().scheduleEntries({ id: route.params.scheduleEntryId }).day()
+    return apiStore.get().scheduleEntries({ id: route.params.scheduleEntryId }).day()
   }
 }
 

From 7e33195dc9da674070b16f3418d4cd5819ca7a2c Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sat, 20 Jan 2024 18:07:19 +0100
Subject: [PATCH 21/21] v-calendar; first render

---
 .../components/program/picasso/Picasso.vue    | 64 +++++++++++++------
 frontend/src/plugins/vuetify.js               |  5 ++
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index ef02852bb8..4d5bff529d 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -5,6 +5,12 @@ Listing all given activity schedule entries in a calendar view.
 <template>
   <div>
     <v-calendar
+      ref="calendar"
+      v-model="calendarValue"
+      view-mode="week"
+      :events="events"
+    ></v-calendar>
+    <!-- <v-calendar
       ref="calendar"
       v-model="value"
       v-resize="resize"
@@ -32,9 +38,9 @@ Listing all given activity schedule entries in a calendar view.
       v-on="vCalendarListeners"
       @mouseleave.native="onMouseleave"
       @mousedown.native.prevent="preventMiddleButtonFromStartingScrollBehaviour"
-    >
-      <!-- day header -->
-      <template #day-label-header="{ date }">
+    > -->
+    <!-- day header -->
+    <!-- <template #day-label-header="{ date }">
         <slot name="day-label-header" :date="date">
           <div class="e-picasso-daily_head-day-label">
             {{
@@ -54,27 +60,27 @@ Listing all given activity schedule entries in a calendar view.
           </div>
           <day-responsibles :date="date" :period="period" :readonly="!editable" />
         </slot>
-      </template>
+      </template> -->
 
-      <!-- template for single scheduleEntry -->
-      <template #event="{ event }">
+    <!-- template for single scheduleEntry -->
+    <!-- <template #event="{ event }">
         <PicassoEntry
           :schedule-entry="event"
           :editable="editable"
           @start-resize="startResize(event)"
           @finish-edit="reloadScheduleEntries"
         />
-      </template>
-    </v-calendar>
+      </template> -->
+    <!-- </v-calendar> -->
 
-    <v-snackbar v-model="isSaving" light>
+    <!-- <v-snackbar v-model="isSaving" light>
       <v-icon class="mdi-spin">mdi-loading</v-icon>
       {{ $tc('global.button.saving') }}
-    </v-snackbar>
+    </v-snackbar> -->
   </div>
 </template>
 <script>
-import Vue, { reactive, ref, toRefs, watch } from 'vue'
+import { reactive, ref, toRefs, watch } from 'vue'
 import { useDragAndDropMove } from './useDragAndDropMove.js'
 import { useDragAndDropResize } from './useDragAndDropResize.js'
 import { useDragAndDropNew } from './useDragAndDropNew.js'
@@ -82,16 +88,16 @@ import { useDragAndDropReminder } from './useDragAndDropReminder.js'
 import { apiStore as api } from '@/plugins/store'
 import mergeListeners from '@/helpers/mergeListeners.js'
 import { timestampToUtcString, utcStringToTimestamp } from './dateHelperVCalendar.js'
-import DayResponsibles from './DayResponsibles.vue'
+// import DayResponsibles from './DayResponsibles.vue'
 import { ONE_DAY_IN_MILLISECONDS } from '@/helpers/vCalendarDragAndDrop.js'
-import { errorToMultiLineToast } from '@/components/toast/toasts'
-import PicassoEntry from './PicassoEntry.vue'
+// import { errorToMultiLineToast } from '@/components/toast/toasts'
+//import PicassoEntry from './PicassoEntry.vue'
 
 export default {
   name: 'Picasso',
   components: {
-    PicassoEntry,
-    DayResponsibles,
+    // PicassoEntry,
+    // DayResponsibles,
   },
   props: {
     // period for which to show picasso
@@ -162,7 +168,8 @@ export default {
       api
         .patch(scheduleEntry._meta.self, patchData)
         .catch((error) => {
-          Vue.$toast.error(errorToMultiLineToast(error))
+          console.log(error)
+          // Vue.$toast.error(errorToMultiLineToast(error))
         })
         .finally(() => {
           isSaving.value = false
@@ -231,16 +238,28 @@ export default {
     const loadCalenderEventsFromScheduleEntries = () => {
       // prepare scheduleEntries to make them understandable by v-calendar
       events.value = scheduleEntries.value.items.map((entry) => ({
-        ...entry,
+        /*...entry,
         startTimestamp: utcStringToTimestamp(entry.start),
         endTimestamp: utcStringToTimestamp(entry.end),
         timed: true,
         isResizing: false,
-        isMoving: false,
+        isMoving: false,*/
+
+        // VCalendar v3
+        title:
+          (entry.number ? entry.number + ' ' : '') +
+          (entry.activity().category().short
+            ? entry.activity().category().short + ': '
+            : '') +
+          entry.activity().title,
+        start: new Date(utcStringToTimestamp(entry.start)),
+        end: new Date(utcStringToTimestamp(entry.end)),
+        color: entry.activity().category().color,
+        allDay: false,
       }))
 
       // add placeholder for drag & drop (create new entry)
-      events.value.push(placeholder)
+      // events.value.push(placeholder)
     }
     loadCalenderEventsFromScheduleEntries()
 
@@ -279,6 +298,9 @@ export default {
       intervalMinutes: 60,
       firstInterval: 0,
       intervalCount: 24,
+
+      // VCalendar v3 demo
+      calendarValue: [new Date('2023-12-15')],
     }
   },
   computed: {
@@ -317,6 +339,8 @@ export default {
     // scroll a bit down to hide the night hours
     const scroller = this.$el.querySelector('.v-calendar')
     scroller.scrollTo({ top: 250 })
+
+    this.calendarValue = [new Date(this.period.start)]
   },
   methods: {
     resize() {
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 643c2686c3..1f40c77427 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -16,6 +16,8 @@ import i18n from '@/plugins/i18n'
 import * as colors from 'vuetify/util/colors'
 import { apiPropsMixin } from '@/mixins/apiPropsMixin'
 
+import { VCalendar } from 'vuetify/labs/VCalendar'
+
 // Styles
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
@@ -59,6 +61,9 @@ class VuetifyLoaderPlugin {
           },
         },
       },
+      components: {
+        VCalendar,
+      },
     }
 
     vuetify = createVuetify(opts)