diff --git a/package-lock.json b/package-lock.json
index cbc00f19f8bdf..09ba9f3860a44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3436,18 +3436,18 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.7.2.tgz",
-      "integrity": "sha512-WR3HSdzdPI5kIUtU9k2Wc+4QKMshpfrvFrJ0POecimLOravibjfP9549y7McceB1bHg61tA/upNGQpZDdT+OjQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-4.0.0.tgz",
+      "integrity": "sha512-DvjKb8HqhHje/oCeZ6VidR3qaUuuOLwPKv0pzCm/LedL68QVDBY8nAUQZOlvmQB+GwXxulKnPljiyZgQFQF23Q==",
       "requires": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
         "@nextcloud/browser-storage": "^0.1.1",
         "@nextcloud/capabilities": "^1.0.2",
         "@nextcloud/dialogs": "^3.0.0",
-        "@nextcloud/event-bus": "^1.1.4",
+        "@nextcloud/event-bus": "^2.0.0",
         "@nextcloud/l10n": "^1.2.3",
-        "@nextcloud/router": "^1.0.2",
+        "@nextcloud/router": "^2.0.0",
         "core-js": "^3.6.5",
         "debounce": "1.2.1",
         "emoji-mart-vue-fast": "^7.0.7",
@@ -3456,7 +3456,8 @@
         "linkifyjs": "~2.1.9",
         "md5": "^2.2.1",
         "regenerator-runtime": "^0.13.5",
-        "string-length": "^4.0.1",
+        "splitpanes": "^2.3.6",
+        "string-length": "^5.0.0",
         "striptags": "^3.1.1",
         "style-loader": "^2.0.0",
         "tributejs": "^5.1.3",
@@ -3464,15 +3465,56 @@
         "v-tooltip": "^2.0.3",
         "vue": "^2.6.11",
         "vue-color": "^2.7.1",
+        "vue-material-design-icons": "^4.11.0",
         "vue-multiselect": "^2.1.6",
         "vue-visible": "^1.0.2",
         "vue2-datepicker": "^3.6.3"
       },
       "dependencies": {
-        "debounce": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-          "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+        "@nextcloud/event-bus": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-2.0.0.tgz",
+          "integrity": "sha512-92lEJeDfOLU320mWb2Dm/EtHaRKiyOSSZyfz3MRrbtxja5up8iFK0EVizE5qO3o718Iyy3a6xw/G5Ztwy40EoA==",
+          "requires": {
+            "@types/semver": "^7.1.0",
+            "core-js": "^3.6.2",
+            "semver": "^7.3.2"
+          }
+        },
+        "@nextcloud/router": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.0.0.tgz",
+          "integrity": "sha512-GyHYNYrYAZRBGD5VxRggcbahdJ/zCkXb8+ERVfuaosT+nHMjJSmenTD6Uyct41qGm0p3Az4xRCXGyZGJM0NEUQ==",
+          "requires": {
+            "core-js": "^3.6.4"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+        },
+        "char-regex": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz",
+          "integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA=="
+        },
+        "string-length": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
+          "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+          "requires": {
+            "char-regex": "^2.0.0",
+            "strip-ansi": "^7.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
         }
       }
     },
@@ -9373,6 +9415,42 @@
         "@nextcloud/vue": "^3.1.2",
         "lodash": "^4.17.20",
         "vue": "^2.6.12"
+      },
+      "dependencies": {
+        "@nextcloud/vue": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.1.tgz",
+          "integrity": "sha512-DdnnEFxt5FuZOtAD1x7hSDFVQF9KVVgQtFKwzs2ySNbyIx8rfRfc6noC7JbMAPR1LyPegCst0bVwQIfqsASGog==",
+          "requires": {
+            "@nextcloud/auth": "^1.2.3",
+            "@nextcloud/axios": "^1.3.2",
+            "@nextcloud/browser-storage": "^0.1.1",
+            "@nextcloud/capabilities": "^1.0.2",
+            "@nextcloud/dialogs": "^3.0.0",
+            "@nextcloud/event-bus": "^1.1.4",
+            "@nextcloud/l10n": "^1.2.3",
+            "@nextcloud/router": "^1.0.2",
+            "core-js": "^3.6.5",
+            "debounce": "1.2.1",
+            "emoji-mart-vue-fast": "^7.0.7",
+            "escape-html": "^1.0.3",
+            "hammerjs": "^2.0.8",
+            "linkifyjs": "~2.1.9",
+            "md5": "^2.2.1",
+            "regenerator-runtime": "^0.13.5",
+            "string-length": "^4.0.1",
+            "striptags": "^3.1.1",
+            "style-loader": "^2.0.0",
+            "tributejs": "^5.1.3",
+            "v-click-outside": "^3.0.1",
+            "v-tooltip": "^2.0.3",
+            "vue": "^2.6.11",
+            "vue-color": "^2.7.1",
+            "vue-multiselect": "^2.1.6",
+            "vue-visible": "^1.0.2",
+            "vue2-datepicker": "^3.6.3"
+          }
+        }
       }
     },
     "nice-try": {
@@ -11291,6 +11369,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "splitpanes": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
+      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
diff --git a/package.json b/package.json
index ec776b1cf582b..139c35c6dd957 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@nextcloud/password-confirmation": "^1.0.1",
     "@nextcloud/paths": "^1.1.2",
     "@nextcloud/router": "^1.1.0",
-    "@nextcloud/vue": "^3.7.2",
+    "@nextcloud/vue": "^4.0.0",
     "@nextcloud/vue-dashboard": "^1.1.0",
     "autosize": "^4.0.2",
     "backbone": "^1.4.0",