diff --git a/packages/design-system/docs/components/tokens/_HighlightedText.vue b/packages/design-system/docs/components/tokens/_HighlightedText.vue
index a7323611075..70308dbf2b9 100644
--- a/packages/design-system/docs/components/tokens/_HighlightedText.vue
+++ b/packages/design-system/docs/components/tokens/_HighlightedText.vue
@@ -2,7 +2,8 @@
   <component :is="tag">
     <template v-for="(fragments, lineIndex) in lines">
       <template v-for="(fragment, fragmentIndex) in fragments">
-        <span
+        <!-- eslint-disable vue/no-v-for-template-key-on-child -->
+        <component
           :is="fragment.tag"
           :key="'line-' + lineIndex + '-fragment-' + fragmentIndex"
           :style="{
@@ -14,7 +15,7 @@
           :class="{ 'highlighted-fragment': fragment.highlighted }"
         >
           {{ fragment.value }}
-        </span>
+        </component>
       </template>
       <br v-if="lineIndex < lines.length - 1" :key="'line-' + lineIndex + '-br'" />
     </template>
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index 47c77a7975f..fed9b038403 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -144,7 +144,7 @@ export default defineComponent({
       this.tippy.setProps({ trigger: this.triggerMapping })
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     destroy(this.tippy)
   },
   mounted() {
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 85509720aca..0605fb29543 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -16,7 +16,7 @@
       <template v-for="(index, name) in $slots" #[name]="data">
         <slot v-if="name !== 'search'" :name="name" v-bind="data" />
       </template>
-      <div slot="no-options" v-translate>No options available.</div>
+      <template #no-options><div v-translate>No options available.</div></template>
       <template #spinner="{ loading }">
         <oc-spinner v-if="loading" />
       </template>
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 67565c0c33a..74b1e9c0f38 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -53,7 +53,7 @@
         @contextmenu="
           $emit(constants.EVENT_TROW_CONTEXTMENU, $refs[`row-${trIndex}`][0], $event, item)
         "
-        @hook:mounted="$emit(constants.EVENT_TROW_MOUNTED, item, $refs[`row-${trIndex}`][0])"
+        @vue:mounted="$emit(constants.EVENT_TROW_MOUNTED, item, $refs[`row-${trIndex}`][0])"
         @dragstart="dragStart(item, $event)"
         @drop="dropRowEvent(itemDomSelector(item), $event)"
         @dragenter.prevent="dropRowStyling(itemDomSelector(item), false, $event)"
@@ -251,7 +251,13 @@ export default defineComponent({
       default: false
     }
   },
-  emits: [EVENT_THEAD_CLICKED, EVENT_TROW_CLICKED, EVENT_TROW_MOUNTED, EVENT_TROW_CONTEXTMENU],
+  emits: [
+    EVENT_ITEM_DROPPED,
+    EVENT_THEAD_CLICKED,
+    EVENT_TROW_CLICKED,
+    EVENT_TROW_MOUNTED,
+    EVENT_TROW_CONTEXTMENU
+  ],
   data() {
     return {
       constants: {
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index b99f6adf8f5..666c024db80 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -15,7 +15,6 @@
         :type="type"
         :value="displayValue"
         :disabled="disabled"
-        v-on="listeners"
         @change="onChange($event.target.value)"
         @input="onInput($event.target.value)"
         @focus="onFocus($event.target)"
@@ -185,12 +184,6 @@ export default {
         !!this.descriptionMessage
       )
     },
-    listeners() {
-      // Exclude listeners for events which are handled via methods in this component
-      // eslint-disable-next-line no-unused-vars
-      const { change, input, focus, ...listeners } = this.$listeners
-      return listeners
-    },
     messageId() {
       return `${this.id}-message`
     },
@@ -203,7 +196,11 @@ export default {
       if (this.defaultValue) {
         additionalAttrs['placeholder'] = this.defaultValue
       }
-      return { ...this.$attrs, ...additionalAttrs }
+      // Exclude listeners for events which are handled via methods in this component
+      // eslint-disable-next-line no-unused-vars
+      const { change, input, focus, ...attrs } = this.$attrs
+
+      return { ...attrs, ...additionalAttrs }
     },
     ariaInvalid() {
       return (!!this.errorMessage).toString()
diff --git a/packages/design-system/src/directives/OcTooltip.js b/packages/design-system/src/directives/OcTooltip.ts
similarity index 88%
rename from packages/design-system/src/directives/OcTooltip.js
rename to packages/design-system/src/directives/OcTooltip.ts
index 05392aefb73..ddce940f63a 100644
--- a/packages/design-system/src/directives/OcTooltip.js
+++ b/packages/design-system/src/directives/OcTooltip.ts
@@ -47,7 +47,7 @@ export const destroy = (_tippy) => {
   }
 }
 
-const initOrUpdate = (el, { value = {} }, { elm }) => {
+const initOrUpdate = (el, { value = {} }: any, { elm }) => {
   if (Object.prototype.toString.call(value) !== '[object Object]') {
     value = { content: value }
   }
@@ -82,7 +82,7 @@ const initOrUpdate = (el, { value = {} }, { elm }) => {
 
 export default {
   name: 'OcTooltip',
-  bind: initOrUpdate,
-  componentUpdated: initOrUpdate,
-  unbind: (el, binding, { elm }) => destroy(elm.tooltip)
+  beforeMount: initOrUpdate,
+  updated: initOrUpdate,
+  unmounted: (el, binding, { elm }) => destroy(elm.tooltip)
 }
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
index 4c8269b1d24..53889ee8060 100644
--- a/packages/eslint-config/index.js
+++ b/packages/eslint-config/index.js
@@ -4,7 +4,11 @@ module.exports = {
     es6: true,
     amd: true
   },
-  extends: ['plugin:vue/recommended', 'plugin:prettier-vue/recommended', 'plugin:jest/recommended'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier-vue/recommended',
+    'plugin:jest/recommended'
+  ],
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: {
@@ -25,7 +29,10 @@ module.exports = {
     'node/no-callback-literal': 'off',
     'unused-imports/no-unused-imports': 'error',
     'nonblock-statement-body-position': ['error', 'below'],
-    curly: 'error'
+    curly: 'error',
+
+    // Vue 3 rules: (need to be fixed, but can be done incrementally)
+    'vue/no-deprecated-events-api': 'warn'
   },
   globals: {
     require: false,
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 743972c93f5..48aed6a0b9b 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -40,7 +40,7 @@
           :label="getSelectSpaceLabel(item)"
           hide-label
           @input="$emit('toggleSelectSpace', item)"
-          @click.native.stop
+          @click.stop
         />
       </template>
       <template #icon>
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 120c8c14376..3911e46cad9 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -201,7 +201,7 @@ export default defineComponent({
 
     window.addEventListener('resize', this.calculateListHeaderPosition)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
     })
   },
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index a1fd7b737ee..2ecc00cf39a 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 
       calculateListHeaderPosition()
       window.addEventListener('resize', calculateListHeaderPosition)
-      instance.$on('beforeDestroy', () => {
+      instance.$on('beforeUnmount', () => {
         eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
       })
     })
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 29d671e53fd..9814cf5f957 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -256,7 +256,7 @@ export default defineComponent({
 
     window.addEventListener('resize', this.calculateListHeaderPosition)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
     })
   },
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 94d37e143ad..6b13ce496b9 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -24,7 +24,7 @@ export default defineComponent({
     const dragOut = eventBus.subscribe('drag-out', this.hideDropzone)
     const drop = eventBus.subscribe('drop', this.hideDropzone)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('drag-over', dragOver)
       eventBus.unsubscribe('drag-out', dragOut)
       eventBus.unsubscribe('drop', drop)
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index e5851394794..037e280e969 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -148,7 +148,7 @@ export default defineComponent({
   mounted() {
     this.resizeObserver.observe(this.$refs.filesAppBar)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.filesAppBar)
   },
 
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 67d8852d014..7eff4e37528 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -212,7 +212,7 @@ export default defineComponent({
         uppyService
       })
 
-      instance.$on('beforeDestroy', () => {
+      instance.$on('beforeUnmount', () => {
         uppyService.unsubscribe('filesSelected', filesSelectedSub)
         uppyService.unsubscribe('uploadCompleted', uploadCompletedSub)
         uppyService.removeDropTarget()
diff --git a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
index 52577905802..ca199573c65 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -72,7 +72,7 @@ export default {
   mounted() {
     this.$uppyService.registerUploadInput(this.$refs.input)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$uppyService.removeUploadInput(this.$refs.input)
   },
   methods: {
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
index 1c4fec621d2..d993384f0a2 100644
--- a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
+++ b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -60,7 +60,7 @@ export default defineComponent({
       this.handleShiftClickAction
     )
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.files.list.clicked', fileListClickedEvent)
       eventBus.unsubscribe('app.files.list.clicked.meta', fileListClickedMetaEvent)
       eventBus.unsubscribe('app.files.list.clicked.shift', fileListClickedShiftEvent)
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 5944bab87a3..bffbaf22ca4 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -188,7 +188,7 @@ export default defineComponent({
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
   methods: {
diff --git a/packages/web-app-files/src/components/Search/Preview.vue b/packages/web-app-files/src/components/Search/Preview.vue
index ed73c2d5006..f223a426f73 100644
--- a/packages/web-app-files/src/components/Search/Preview.vue
+++ b/packages/web-app-files/src/components/Search/Preview.vue
@@ -155,7 +155,7 @@ export default defineComponent({
 
     visibilityObserver.observe(this.$el, { onEnter: debounced, onExit: debounced.cancel })
   },
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
   methods: {
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index e6621d02276..306b189d57e 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -254,7 +254,7 @@ export default defineComponent({
       return this.items.slice(0, this.showMoreToggleCount)
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
   methods: {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index 5d13fd77cec..d4ac8333c9b 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -224,7 +224,7 @@ export default defineComponent({
     this.applyRoleAndPermissions()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('keydown', this.cycleRoles)
   },
 
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 086312110d0..b27ff8e3907 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -13,12 +13,11 @@
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
     data-custom-key-bindings="true"
-    @beforeDestroy="destroySideBar"
+    @beforeUnmount="destroySideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
     @selectPanel="setActiveSideBarPanel"
     @close="closeSideBar"
-    v-on="$listeners"
   >
     <template #header>
       <file-info
@@ -104,7 +103,7 @@ export default defineComponent({
       component.focus({
         from: document.activeElement,
         to: component.sidebar?.$el,
-        revert: event === 'beforeDestroy'
+        revert: event === 'beforeUnmount'
       })
     }
 
@@ -136,7 +135,6 @@ export default defineComponent({
       webdav
     }
   },
-
   data() {
     return {
       focused: undefined,
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 7d001127129..7e5204302ef 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -151,7 +151,7 @@ export default defineComponent({
     this.scrollToResourceFromRoute(this.paginatedResources)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index b6093820890..44f0711c877 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -66,7 +66,7 @@ export default defineComponent({
         uppyService
       })
 
-      instance.$on('beforeDestroy', () => {
+      instance.$on('beforeUnmount', () => {
         uppyService.unsubscribe('filesSelected', filesSelectedSub)
         uppyService.removeDropTarget()
       })
@@ -115,7 +115,7 @@ export default defineComponent({
     const dragOut = eventBus.subscribe('drag-out', this.hideDropzone)
     const drop = eventBus.subscribe('drop', this.hideDropzone)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('drag-over', dragOver)
       eventBus.unsubscribe('drag-out', dragOut)
       eventBus.unsubscribe('drop', drop)
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index ba7b5104108..592789b86e5 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -150,7 +150,7 @@ export default defineComponent({
     this.scrollToResourceFromRoute(this.paginatedResources)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 75431e9239c..993add00b74 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -145,7 +145,7 @@ export default defineComponent({
     this.scrollToResourceFromRoute(this.paginatedResources)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 45c3317e56f..14cf9a87046 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -335,12 +335,12 @@ export default defineComponent({
         this.performLoaderTask(true, path, fileId)
       }
     )
-    this.$on('beforeDestroy', () =>
+    this.$on('beforeUnmount', () =>
       eventBus.unsubscribe('app.files.list.load', loadResourcesEventToken)
     )
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
   },
 
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index 81620a3fa17..e5833a64241 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -183,7 +183,7 @@ export default defineComponent({
     const loadResourcesEventToken = eventBus.subscribe('app.files.list.load', () => {
       this.performLoaderTask()
     })
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.files.list.load', loadResourcesEventToken)
     })
   },
diff --git a/packages/web-app-pdf-viewer/src/App.vue b/packages/web-app-pdf-viewer/src/App.vue
index a35335691bf..ab5ce611ccc 100644
--- a/packages/web-app-pdf-viewer/src/App.vue
+++ b/packages/web-app-pdf-viewer/src/App.vue
@@ -44,7 +44,7 @@ export default defineComponent({
       immediate: true
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.unloadPdf()
   },
   methods: {
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 3a906b18173..be49f921c32 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -388,7 +388,7 @@ export default defineComponent({
     this.$refs.preview.focus()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('popstate', this.handleLocalHistoryEvent)
     document.removeEventListener('fullscreenchange', this.handleFullScreenChangeEvent)
 
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 641a98d2d61..407fd8af14e 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -198,7 +198,7 @@ export default defineComponent({
       this.$refs.optionsDrop.hide()
     })
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       eventBus.unsubscribe('app.search.options-drop.hide', hideOptionsDropEvent)
     })
   },
@@ -209,7 +209,7 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.isSearchBarEnabled) {
       this.resizeObserver.unobserve(this.$refs.searchBar)
     }
diff --git a/packages/web-pkg/src/components/sideBar/CompareSaveDialog.vue b/packages/web-pkg/src/components/sideBar/CompareSaveDialog.vue
index 98d751850c3..c4f196c2412 100644
--- a/packages/web-pkg/src/components/sideBar/CompareSaveDialog.vue
+++ b/packages/web-pkg/src/components/sideBar/CompareSaveDialog.vue
@@ -75,7 +75,7 @@ export default defineComponent({
       this.saved = true
     })
 
-    this.$on('beforeDestroy', () => eventBus.unsubscribe('sidebar.entity.saved', savedEventToken))
+    this.$on('beforeUnmount', () => eventBus.unsubscribe('sidebar.entity.saved', savedEventToken))
   }
 })
 </script>
diff --git a/packages/web-pkg/src/components/sideBar/SideBar.vue b/packages/web-pkg/src/components/sideBar/SideBar.vue
index 713cc270040..0bd0ce15bd1 100644
--- a/packages/web-pkg/src/components/sideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/sideBar/SideBar.vue
@@ -194,7 +194,7 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     visibilityObserver.disconnect()
     hiddenObserver.disconnect()
   },
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 7eaa4f87c86..b2db66d97a4 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -33,7 +33,7 @@
       @checkbox-changed="modal.onCheckboxValueChanged"
       @confirm-secondary="modal.onConfirmSecondary"
       @mounted="focusModal"
-      @beforeDestroy="focusModal"
+      @beforeUnmount="focusModal"
     >
       <template v-if="modal.customContent" #content>
         <div v-html="modal.customContent"></div>
@@ -162,7 +162,7 @@ export default defineComponent({
       }
     )
   },
-  destroyed() {
+  unmounted() {
     if (this.$_notificationsInterval) {
       clearInterval(this.$_notificationsInterval)
     }
@@ -188,7 +188,7 @@ export default defineComponent({
 
     focusModal(component, event) {
       this.focus({
-        revert: event === 'beforeDestroy'
+        revert: event === 'beforeUnmount'
       })
     },
 
diff --git a/packages/web-runtime/src/compatConfig.ts b/packages/web-runtime/src/compatConfig.ts
new file mode 100644
index 00000000000..dcd9a3877ab
--- /dev/null
+++ b/packages/web-runtime/src/compatConfig.ts
@@ -0,0 +1,48 @@
+import { configureCompat } from 'vue'
+
+type CompatConfig = Parameters<typeof configureCompat>[0]
+export const compatConfig: CompatConfig = {
+  MODE: 2
+  // ATTR_ENUMERATED_COERCION: false,
+  // ATTR_FALSE_VALUE: false,
+  // COMPONENT_ASYNC: false,
+  // COMPONENT_FUNCTIONAL: false,
+  // COMPONENT_V_MODEL: false,
+  // CONFIG_DEVTOOLS: false,
+  // CONFIG_IGNORED_ELEMENTS: false,
+  // CONFIG_KEY_CODES: false,
+  // CONFIG_OPTION_MERGE_STRATS: false,
+  // CONFIG_PRODUCTION_TIP: false,
+  // CONFIG_SILENT: false,
+  // CONFIG_WHITESPACE: false,
+  // CUSTOM_DIR: false,
+  // FILTERS: false,
+  // GLOBAL_DELETE: false,
+  // GLOBAL_EXTEND: false,
+  // GLOBAL_MOUNT: false,
+  // GLOBAL_MOUNT_CONTAINER: false,
+  // GLOBAL_OBSERVABLE: false,
+  // GLOBAL_PRIVATE_UTIL: false,
+  // GLOBAL_PROTOTYPE: false,
+  // GLOBAL_SET: false,
+  // INSTANCE_ATTRS_CLASS_STYLE: false,
+  // INSTANCE_CHILDREN: false,
+  // INSTANCE_DELETE: false,
+  // INSTANCE_DESTROY: false,
+  // INSTANCE_EVENT_EMITTER: false,
+  // INSTANCE_EVENT_HOOKS: false,
+  // INSTANCE_LISTENERS: false,
+  // INSTANCE_SCOPED_SLOTS: false,
+  // INSTANCE_SET: false,
+  // OPTIONS_BEFORE_DESTROY: false,
+  // OPTIONS_DATA_FN: false,
+  // OPTIONS_DATA_MERGE: false,
+  // OPTIONS_DESTROYED: false,
+  // PRIVATE_APIS: false,
+  // PROPS_DEFAULT_THIS: false,
+  // RENDER_FUNCTION: false // comment in when vue-router, vue-gettext, ... are fixed/updated
+  // TRANSITION_CLASSES: false,
+  // TRANSITION_GROUP_ROOT: false,
+  // V_ON_KEYCODE_MODIFIER: false,
+  // WATCH_ARRAY: false,
+}
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 6e0938628e9..896dd562b9f 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -95,7 +95,7 @@ export default {
     })
     resizeObserver.observe(navBar)
 
-    this.$on('beforeDestroy', () => {
+    this.$on('beforeUnmount', () => {
       resizeObserver.disconnect()
     })
   },
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 2b2b747e4e6..7e48472f972 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -36,6 +36,10 @@ import {
 } from 'web-client/src/helpers'
 import { WebDAV } from 'web-client/src/webdav'
 import { DavProperty } from 'web-client/src/webdav/constants'
+import { configureCompat, h } from 'vue'
+import { compatConfig } from './compatConfig'
+
+configureCompat(compatConfig)
 
 export const bootstrap = async (configurationPath: string): Promise<void> => {
   const runtimeConfiguration = await announceConfiguration(configurationPath)
@@ -67,7 +71,9 @@ export const renderSuccess = (): void => {
     el: '#owncloud',
     store,
     router,
-    render: (h) => h(pages.success)
+    render() {
+      return h(pages.success)
+    }
   })
 
   instance.$once('mounted', () => {
@@ -195,7 +201,9 @@ export const renderFailure = async (err: Error): Promise<void> => {
   new Vue({
     el: '#owncloud',
     store,
-    render: (h) => h(pages.failure)
+    render() {
+      return h(pages.failure)
+    }
   })
 }
 ;(window as any).runtimeLoaded({
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 361a4bb5939..bfc10c05898 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -178,7 +178,7 @@ export default defineComponent({
       this.onResize()
     })
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.onResize)
   },
   methods: {
diff --git a/packages/web-runtime/src/mixins/lifecycleMixin.js b/packages/web-runtime/src/mixins/lifecycleMixin.js
index e5d76250c71..e2b890a758a 100644
--- a/packages/web-runtime/src/mixins/lifecycleMixin.js
+++ b/packages/web-runtime/src/mixins/lifecycleMixin.js
@@ -1,10 +1,10 @@
 export default {
-  emits: ['beforeDestroy', 'mounted', 'updated'],
+  emits: ['beforeUnmount', 'mounted', 'updated'],
   mounted() {
     this.$nextTick(() => this.$emit('mounted', this, 'mounted'))
   },
-  beforeDestroy() {
-    this.$emit('beforeDestroy', this, 'beforeDestroy')
+  beforeUnmount() {
+    this.$emit('beforeUnmount', this, 'beforeUnmount')
   },
   updated() {
     this.$nextTick(() => this.$emit('updated', this, 'updated'))
diff --git a/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts b/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts
index 0b8a8e1f858..1dd7f83ec64 100644
--- a/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts
+++ b/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts
@@ -36,11 +36,11 @@ describe('livecycleMixin', () => {
     expect(emittedEvent).toBe(event)
   })
 
-  it('handles beforeDestroy', async () => {
+  it('handles beforeUnmount', async () => {
     const { wrapper } = getWrapper()
     const wrapperComponent = wrapper.findComponent({ name: 'DummyComponent' })
 
-    const event = 'beforeDestroy'
+    const event = 'beforeUnmount'
     wrapper.unmount()
     await wrapper.vm.$nextTick()
     const [emittedComponent, emittedEvent] = wrapper.emitted(event)[0]
diff --git a/packages/web-test-helpers/src/defaultPlugins.ts b/packages/web-test-helpers/src/defaultPlugins.ts
index 9357ad924f9..13234d712f6 100644
--- a/packages/web-test-helpers/src/defaultPlugins.ts
+++ b/packages/web-test-helpers/src/defaultPlugins.ts
@@ -1,4 +1,3 @@
-import Vuex from 'vuex'
 import DesignSystem from '@ownclouders/design-system'
 import GetTextPlugin from 'vue-gettext'
 import AsyncComputed from 'vue-async-computed'
@@ -9,14 +8,12 @@ window.Vue = Vue
 export interface DefaultPluginsOptions {
   designSystem?: boolean
   gettext?: boolean
-  vuex?: boolean
   asyncComputed?: boolean
 }
 
 export const defaultPlugins = ({
   designSystem = true,
   gettext = true,
-  vuex = true,
   asyncComputed = true
 }: DefaultPluginsOptions = {}) => {
   const plugins = []
@@ -51,10 +48,6 @@ export const defaultPlugins = ({
     })
   }
 
-  if (vuex) {
-    plugins.push(Vuex)
-  }
-
   if (asyncComputed) {
     plugins.push(AsyncComputed)
   }
diff --git a/packages/web-test-helpers/src/helpers.ts b/packages/web-test-helpers/src/helpers.ts
index 3f42a882408..efdf2e639b8 100644
--- a/packages/web-test-helpers/src/helpers.ts
+++ b/packages/web-test-helpers/src/helpers.ts
@@ -6,13 +6,7 @@ import { defaultPlugins } from 'web-test-helpers'
 jest.spyOn(console, 'warn').mockImplementation(() => undefined)
 
 export const createStore = <T>(storeOptions: StoreOptions<T>) => {
-  const store = _createStore(storeOptions)
-  // return {
-  //   install(app) {
-  //     app.prototype.$store = new Vuex.Store(storeOptions)
-  //   }
-  // }
-  return store
+  return _createStore(storeOptions)
 }
 export const mount = <T>(component: any, options?: MountingOptions<T>) => {
   return _mount<any>(component, options)
diff --git a/tests/unit/config/jest.init.js b/tests/unit/config/jest.init.js
index 2a5df3ff1f3..862161802c0 100644
--- a/tests/unit/config/jest.init.js
+++ b/tests/unit/config/jest.init.js
@@ -1,8 +1,10 @@
-import Vue from 'vue'
+import Vue, { configureCompat } from 'vue'
 import { config } from '@vue/test-utils'
 import fetchMock from 'jest-fetch-mock'
 
-import * as directives from '@ownclouders/design-system/src/directives'
+import { compatConfig } from '../../../packages/web-runtime/src/compatConfig'
+
+configureCompat(compatConfig)
 
 window.define = jest.fn()
 
@@ -42,5 +44,3 @@ Vue.component('RouterLink', {
     return createElement(this.tag, { attrs: { href: path } }, this.$slots.default)
   }
 })
-
-Object.values(directives).forEach((d) => Vue.directive(d.name, d))