diff --git a/.npmrc b/.npmrc
index b4718360b8a..2d7748d6e6b 100644
--- a/.npmrc
+++ b/.npmrc
@@ -8,6 +8,7 @@ public-hoist-pattern[]=owncloud-sdk
 public-hoist-pattern[]=lodash-es
 public-hoist-pattern[]=mark.js
 public-hoist-pattern[]=fuse.js
+public-hoist-pattern[]=filesize
 
 # @vue/component-compiler-utils
 hoist-pattern[]=sass
diff --git a/Makefile.release b/Makefile.release
index a8781484c7b..28691b0bee1 100644
--- a/Makefile.release
+++ b/Makefile.release
@@ -34,6 +34,7 @@ build: build-web copy-config
 .PHONY: build-web
 build-web:
 	$(PNPM) install
+	$(PNPM) check-types
 	$(PNPM) build
 
 .PHONY: copy-config
diff --git a/package.json b/package.json
index a3599bdd965..6dec2a83ab4 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "license": "AGPL-3.0",
   "author": "ownCloud GmbH <devops@owncloud.com>",
   "scripts": {
+    "check-types": "tsc --noEmit",
     "build": "vue-demi-fix && pnpm build:tokens && pnpm vite build",
     "build:w": "pnpm build --watch",
     "build:tokens": "pnpm --filter @ownclouders/design-system tokens",
@@ -145,7 +146,8 @@
       "@adobe/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch",
       "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch",
       "vue-gettext@2.1.12": "patches/vue-gettext@2.1.12.patch",
-      "keycode@2.2.1": "patches/keycode@2.2.1.patch"
+      "keycode@2.2.1": "patches/keycode@2.2.1.patch",
+      "vue-inline-svg@3.1.0": "patches/vue-inline-svg@3.1.0.patch"
     }
   },
   "jestSerializer": {
diff --git a/packages/design-system/docs/components/status/ComponentsList.vue b/packages/design-system/docs/components/status/ComponentsList.vue
index e41b8d37c2a..d8eb5ac9615 100644
--- a/packages/design-system/docs/components/status/ComponentsList.vue
+++ b/packages/design-system/docs/components/status/ComponentsList.vue
@@ -63,10 +63,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import orderBy from '../../utils/orderBy'
 
-export default {
+export default defineComponent({
   name: 'ComponentsList',
   data() {
     return {
@@ -90,7 +91,7 @@ export default {
       return orderBy(data, 'name', 'asc')
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/design-system/docs/components/tokens/AllTokens.vue b/packages/design-system/docs/components/tokens/AllTokens.vue
index 14cf1f5339f..6fdeb25e18d 100644
--- a/packages/design-system/docs/components/tokens/AllTokens.vue
+++ b/packages/design-system/docs/components/tokens/AllTokens.vue
@@ -33,7 +33,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -42,14 +43,14 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * To edit these tokens and add more, see
  * [/src/tokens/](https://github.com/owncloud/owncloud-design-system/blob/master/src/tokens).
  */
-export default {
+export default defineComponent({
   name: 'AllTokens',
   data() {
     return {
       tokens: Object.values(designTokens)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/design-system/docs/components/tokens/ColorTokens.vue b/packages/design-system/docs/components/tokens/ColorTokens.vue
index aeca6fd879f..c64d9c35d15 100644
--- a/packages/design-system/docs/components/tokens/ColorTokens.vue
+++ b/packages/design-system/docs/components/tokens/ColorTokens.vue
@@ -19,7 +19,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -29,7 +30,7 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * like destructive actions and error messages. To edit the colors, see
  * [/src/tokens/color.yml](https://github.com/owncloud/owncloud-design-system/blob/master/src/tokens/color.yml).
  */
-export default {
+export default defineComponent({
   name: 'ColorTokens',
 
   computed: {
@@ -37,7 +38,7 @@ export default {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-color-'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/design-system/docs/components/tokens/FontSize.vue b/packages/design-system/docs/components/tokens/FontSize.vue
index 8d11fcdfb9a..03769cd67d7 100644
--- a/packages/design-system/docs/components/tokens/FontSize.vue
+++ b/packages/design-system/docs/components/tokens/FontSize.vue
@@ -12,7 +12,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -21,7 +22,7 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * sizes to a minimum. To edit font-sizes, see
  * [/src/tokens/font-size.yml](https://github.com/owncloud/web/blob/master/packages/design-system/src/tokens/font-size.yml).
  */
-export default {
+export default defineComponent({
   name: 'FontSize',
 
   computed: {
@@ -29,7 +30,7 @@ export default {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-font-size-'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -63,7 +64,7 @@ export default {
 </style>
 
 <docs>
-  ```jsx
+  ```
   <FontSize/>
   ```
 </docs>
diff --git a/packages/design-system/docs/components/tokens/IconList.vue b/packages/design-system/docs/components/tokens/IconList.vue
index a8ecb1115b4..c6e7b81bbb6 100644
--- a/packages/design-system/docs/components/tokens/IconList.vue
+++ b/packages/design-system/docs/components/tokens/IconList.vue
@@ -66,7 +66,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcIcon from '../../../src/components/OcIcon/OcIcon.vue'
 import OcTable from '../../../src/components/OcTable/OcTable.vue'
 import OcSearchBar from '../../../src/components/OcSearchBar/OcSearchBar'
@@ -79,7 +81,7 @@ const req = require.context('../../../src/assets/icons/', true, /^\.\/.*\.svg$/)
  *  Icons made by <a href="https://remixicon.com/">Remixicon</a> and, in the case of the `resource-type-*` icons, <a href="https://fontawesome.com/">Font Awesome</a> (available under the [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/) license).
  * </p>
  */
-export default {
+export default defineComponent({
   name: 'IconList',
   components: { HighlightedText, OcSearchBar, OcIcon, OcTable },
   data() {
@@ -147,7 +149,7 @@ export default {
       return filename.split('.').slice(0, -1).join('.').substring(2)
     })
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/docs/components/tokens/SpacingTokens.vue b/packages/design-system/docs/components/tokens/SpacingTokens.vue
index c60fbdafd21..c5b36c3396b 100644
--- a/packages/design-system/docs/components/tokens/SpacingTokens.vue
+++ b/packages/design-system/docs/components/tokens/SpacingTokens.vue
@@ -12,7 +12,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -22,14 +24,14 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * To edit spacing, see
  * [/src/tokens/spacing.yml](https://github.com/owncloud/web/blob/master/packages/design-system/src/tokens/spacing.yml).
  */
-export default {
+export default defineComponent({
   name: 'SpacingTokens',
   computed: {
     tokens() {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-space'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/design-system/docs/components/tokens/_HighlightedText.vue b/packages/design-system/docs/components/tokens/_HighlightedText.vue
index 70308dbf2b9..035ccdeee36 100644
--- a/packages/design-system/docs/components/tokens/_HighlightedText.vue
+++ b/packages/design-system/docs/components/tokens/_HighlightedText.vue
@@ -22,8 +22,8 @@
   </component>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+export default defineComponent({
   name: 'HighlightedText',
   props: {
     tag: {
@@ -83,7 +83,7 @@ export default {
       ]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 1964659e246..197f25ff9fc 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -64,7 +64,7 @@
     "deepmerge": "^4.2.2",
     "depcheck": "^1.3.1",
     "file-loader": "^6.2.0",
-    "filesize": "^9.0.9",
+    "filesize": "^9.0.11",
     "focus-trap": "^6.4.0",
     "focus-trap-vue": "^1.1.1",
     "fuse.js": "^6.4.6",
@@ -126,7 +126,7 @@
   },
   "peerDependencies": {
     "@popperjs/core": "^2.4.0",
-    "filesize": "^9.0.9",
+    "filesize": "^9.0.11",
     "focus-trap": "^6.4.0",
     "focus-trap-vue": "^1.1.1",
     "fuse.js": "^6.4.6",
diff --git a/packages/design-system/src/components/OcAccordion/OcAccordion.vue b/packages/design-system/src/components/OcAccordion/OcAccordion.vue
index 56091260213..a27bf943bed 100644
--- a/packages/design-system/src/components/OcAccordion/OcAccordion.vue
+++ b/packages/design-system/src/components/OcAccordion/OcAccordion.vue
@@ -5,9 +5,10 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAccordionItem from '../OcAccordionItem/OcAccordionItem.vue'
-export default {
+export default defineComponent({
   name: 'OcAccordion',
   // eslint-disable-next-line vue/no-unused-components
   components: { OcAccordionItem },
@@ -144,7 +145,7 @@ export default {
       this.expandedIdsInternal = this.expandedIdsInternal.filter((expandedId) => expandedId !== id)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
index ac9ac2afaf0..5014eb92ba3 100644
--- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
+++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -6,11 +6,13 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Count of avatars which weren't displayed.
  */
-export default {
+export default defineComponent({
   name: 'OcAvatarCount',
   status: 'ready',
   release: '2.1.0',
@@ -37,7 +39,7 @@ export default {
       return Math.floor(this.size / 2.5) + 'px'
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue b/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue
index 0bab1e6e6be..9d6192be438 100644
--- a/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue
+++ b/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue
@@ -10,10 +10,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarFederated',
   status: 'ready',
   release: '10.0.0',
@@ -55,7 +56,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue b/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue
index 0a62bbf7c01..043aa1ea38e 100644
--- a/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue
+++ b/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue
@@ -8,10 +8,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarGroup',
   status: 'ready',
   release: '10.0.0',
@@ -53,7 +54,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue b/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue
index b6810d05447..aad1f95dcc7 100644
--- a/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue
+++ b/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue
@@ -10,10 +10,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarGuest',
   status: 'ready',
   release: '10.0.0',
@@ -55,7 +56,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index 66536d143f5..4fe22d3a078 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -19,10 +19,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarItem',
   status: 'ready',
   release: '10.0.0',
@@ -130,7 +131,7 @@ export default {
       return backgroundColors[Math.floor(Math.random() * backgroundColors.length)]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcAvatarLink/OcAvatarLink.vue b/packages/design-system/src/components/OcAvatarLink/OcAvatarLink.vue
index 638e454ec80..e1d58f08b14 100644
--- a/packages/design-system/src/components/OcAvatarLink/OcAvatarLink.vue
+++ b/packages/design-system/src/components/OcAvatarLink/OcAvatarLink.vue
@@ -8,10 +8,12 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarLink',
   status: 'ready',
   release: '2.1.0',
@@ -53,7 +55,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index 614610de748..8dffa62a8db 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -29,7 +29,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { shareType } from '../../utils/shareType.js'
 import OcAvatar from '../OcAvatar/OcAvatar.vue'
 import OcAvatarCount from '../OcAvatarCount/OcAvatarCount.vue'
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index b376596f46d..69ca2a1399a 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -89,7 +89,9 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { AVAILABLE_SIZES } from '../../helpers/constants'
 
 import OcButton from '../OcButton/OcButton.vue'
@@ -102,7 +104,7 @@ import OcIcon from '../OcIcon/OcIcon.vue'
  *  - text: mandatory element, holds the text which is to be displayed in the breadcrumb
  *  - to: optional element, the vue router link
  */
-export default {
+export default defineComponent({
   name: 'OcBreadcrumb',
   status: 'ready',
   release: '1.0.0',
@@ -175,7 +177,7 @@ export default {
       return this.items.length - 1 === index ? 'page' : null
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index cebd4960ba4..4d2c9e37e3a 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -12,10 +12,11 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { getSizeClass } from '../../utils/sizeClasses'
 
-export default {
+export default defineComponent({
   name: 'OcButton',
   status: 'ready',
   release: '1.0.0',
@@ -173,7 +174,7 @@ export default {
       this.$emit('click', event)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 27006f93722..c24e8f08c38 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -13,13 +13,14 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { getSizeClass } from '../../utils/sizeClasses'
 import uniqueId from '../../utils/uniqueId'
 /**
  * A checkbox input element. The checkbox is either checked or unchecked.
  */
-export default {
+export default defineComponent({
   name: 'OcCheckbox',
   status: 'ready',
   release: '1.0.0',
@@ -136,7 +137,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcContextualHelper/OcContextualHelper.vue b/packages/design-system/src/components/OcContextualHelper/OcContextualHelper.vue
index 6dce2695ff1..5d2aaf2d6d8 100644
--- a/packages/design-system/src/components/OcContextualHelper/OcContextualHelper.vue
+++ b/packages/design-system/src/components/OcContextualHelper/OcContextualHelper.vue
@@ -7,13 +7,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import uniqueId from '../../utils/uniqueId'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcInfoDrop from '../OcInfoDrop/OcInfoDrop.vue'
 
-export default {
+export default defineComponent({
   name: 'OcContextualHelper',
   status: 'unreleased',
   components: { OcButton, OcIcon, OcInfoDrop },
@@ -70,7 +71,7 @@ export default {
       return `#${this.buttonId}`
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index a94a1ae7cb5..6af66f169a4 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -5,12 +5,14 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'OcDropzone',
   status: 'ready',
   release: '0.0.1'
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcGrid/OcGrid.vue b/packages/design-system/src/components/OcGrid/OcGrid.vue
index 30ff19e061d..d2bfe76c39c 100644
--- a/packages/design-system/src/components/OcGrid/OcGrid.vue
+++ b/packages/design-system/src/components/OcGrid/OcGrid.vue
@@ -4,11 +4,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * The Grid system allows you to arrange block elements in columns.
  */
-export default {
+export default defineComponent({
   name: 'OcGrid',
   status: 'ready',
   release: '1.0.0',
@@ -45,7 +47,7 @@ export default {
       return c
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcHiddenAnnouncer/OcHiddenAnnouncer.vue b/packages/design-system/src/components/OcHiddenAnnouncer/OcHiddenAnnouncer.vue
index a3c3228cbb8..c43c3d4d556 100644
--- a/packages/design-system/src/components/OcHiddenAnnouncer/OcHiddenAnnouncer.vue
+++ b/packages/design-system/src/components/OcHiddenAnnouncer/OcHiddenAnnouncer.vue
@@ -8,7 +8,8 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 /**
  * Live regions for screen reader announcements
  *
@@ -22,7 +23,7 @@
  *
  * Debug live regions without starting a screen reader using [NerdeRegion](https://chrome.google.com/webstore/detail/nerderegion/lkcampbojgmgobcfinlkgkodlnlpjieb).
  */
-export default {
+export default defineComponent({
   name: 'OcHiddenAnnouncer',
   status: 'ready',
   release: '1.0.0',
@@ -52,7 +53,7 @@ export default {
       id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index c1cbc486278..78ca5539a24 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -19,11 +19,13 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import InlineSvg from 'vue-inline-svg'
 import { AVAILABLE_SIZES } from '../../helpers/constants'
 import { getSizeClass } from '../../utils/sizeClasses'
 import uniqueId from '../../utils/uniqueId'
+
 /**
  * Icons are used to visually communicate core parts of the product and
  * available actions. They can act as wayfinding tools to help users more
@@ -77,7 +79,7 @@ InlineSvg.name = 'inline-svg'
   )
 }*/
 
-export default {
+export default defineComponent({
   name: 'OcIcon',
   status: 'ready',
   release: '1.0.0',
@@ -185,7 +187,7 @@ export default {
       return svg
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcImage/OcImage.vue b/packages/design-system/src/components/OcImage/OcImage.vue
index 5fdd02e6629..7b895ccf3c4 100644
--- a/packages/design-system/src/components/OcImage/OcImage.vue
+++ b/packages/design-system/src/components/OcImage/OcImage.vue
@@ -1,12 +1,14 @@
 <template>
   <img :src="src" :alt="alt" :aria-hidden="!alt" :title="title" :loading="loadingType" />
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Images can be displayed using this component.
  *
  */
-export default {
+export default defineComponent({
   name: 'OcImg',
   status: 'ready',
   release: '1.0.0',
@@ -53,7 +55,7 @@ export default {
       return this.alt.length === 0
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index f5e549c77f1..9ab6a7391fd 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -39,13 +39,15 @@
   </oc-drop>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcDrop from '../OcDrop/OcDrop.vue'
 import uniqueId from '../../utils/uniqueId'
 
-export default {
+export default defineComponent({
   name: 'OcInfoDrop',
   status: 'unreleased',
   components: { OcButton, OcIcon, OcDrop },
@@ -128,7 +130,7 @@ export default {
       default: ''
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index 2f8822ef653..ca6f42709bf 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -2,11 +2,13 @@
   <div :class="['oc-loader', { 'oc-loader-flat': flat }]" :aria-label="ariaLabel" />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Remote actions can take an undefined portion of time. The spinner gives feedback to the users about an actions being processed.
  */
-export default {
+export default defineComponent({
   name: 'OcLoader',
   status: 'ready',
   release: '1.0.0',
@@ -26,7 +28,7 @@ export default {
       default: false
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcLogo/OcLogo.vue b/packages/design-system/src/components/OcLogo/OcLogo.vue
index 77d6e6995dd..12289f9b858 100644
--- a/packages/design-system/src/components/OcLogo/OcLogo.vue
+++ b/packages/design-system/src/components/OcLogo/OcLogo.vue
@@ -2,10 +2,11 @@
   <oc-img :ref="ref" class="oc-logo" :src="src" :alt="alt" />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcImg from '../OcImage/OcImage.vue'
 
-export default {
+export default defineComponent({
   name: 'OcLogo',
   status: 'ready',
   release: '7.3.0',
@@ -27,7 +28,7 @@ export default {
       required: true
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index c93a862a41b..ad5e62b3e57 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -77,7 +77,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcButton from '../OcButton/OcButton.vue'
 import OcCheckbox from '../OcCheckbox/OcCheckbox.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -99,7 +100,7 @@ import { FocusTrap } from 'focus-trap-vue'
  * variations and appearances can be targeted individually (see examples and API docs below).
  *
  */
-export default {
+export default defineComponent({
   name: 'OcModal',
   status: 'ready',
   release: '1.3.0',
@@ -398,7 +399,7 @@ export default {
       this.$emit('checkbox-changed', value)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index e7a7ac39f92..d59ea82fb6b 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -19,13 +19,14 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 
 /**
  * Notifications are used to inform users about errors, warnings and as confirmations for their actions.
  */
-export default {
+export default defineComponent({
   name: 'OcNotificationMessage',
   status: 'ready',
   release: '1.0.0',
@@ -106,7 +107,7 @@ export default {
       this.$emit('close')
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcNotifications/OcNotifications.vue b/packages/design-system/src/components/OcNotifications/OcNotifications.vue
index 65225d9734a..3ad334901ad 100644
--- a/packages/design-system/src/components/OcNotifications/OcNotifications.vue
+++ b/packages/design-system/src/components/OcNotifications/OcNotifications.vue
@@ -4,7 +4,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Notifications are used to inform users about errors, warnings and as confirmations for their actions. They will automatically disappear after a certain amount of time.
  *
@@ -15,7 +17,7 @@
  * ### Notifications for screen reader users
  * This component uses so called live regions in order to announce its content to screen readers once the notification appeared (this is not the normal modus operandi for screen readers, since their reading order is usually the DOM order – when the user does not take shortcuts). There are two types of live regions: `aria-live="polite"` (equivalent to `role="status"`) and `aria-live="assertive"` (equivalent to `role="alert"`). The latter directly interrupts the current output of the screen reader, the former waits until the current output is finished and reads the announcement afterwards. Since 'assertive' should be used sparingly, only `<oc-notfication-message>`'s "danger" status prop value uses `aria-live="assertive"` (and `role="alert"`). Using `aria-live` and `role="assertive|status"` simultaneously is for compatibility reasons regarding different browser and assistive technology pairings.
  */
-export default {
+export default defineComponent({
   name: 'OcNotifications',
   status: 'ready',
   release: '1.0.0',
@@ -38,7 +40,7 @@ export default {
       return `oc-notification-${this.position}`
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcPageSize/OcPageSize.vue b/packages/design-system/src/components/OcPageSize/OcPageSize.vue
index 4fdb1de98d4..51a19917bfc 100644
--- a/packages/design-system/src/components/OcPageSize/OcPageSize.vue
+++ b/packages/design-system/src/components/OcPageSize/OcPageSize.vue
@@ -19,14 +19,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import uniqueId from '../../utils/uniqueId'
 import OcSelect from '../OcSelect/OcSelect.vue'
 
 /**
  * Select how many items will be displayed per page
  */
-export default {
+export default defineComponent({
   name: 'OcPageSize',
   status: 'ready',
   release: '8.0.0',
@@ -81,7 +82,7 @@ export default {
       this.$emit('change', value)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index 5cd5e774e9c..4058ab2861b 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -31,13 +31,14 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 
 /**
  * A list of links used for switching to different pages
  */
-export default {
+export default defineComponent({
   name: 'OcPagination',
   status: 'ready',
   release: '7.2.0',
@@ -197,7 +198,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcProgress/OcProgress.vue b/packages/design-system/src/components/OcProgress/OcProgress.vue
index b132d4b5cbe..2722c1e67a5 100644
--- a/packages/design-system/src/components/OcProgress/OcProgress.vue
+++ b/packages/design-system/src/components/OcProgress/OcProgress.vue
@@ -15,8 +15,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'OcProgress',
   status: 'ready',
   release: '1.0.0',
@@ -87,7 +89,7 @@ export default {
       return `${num}%`
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
index da51b4f4cab..a5a4ab96265 100644
--- a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
+++ b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -4,11 +4,13 @@
     <label v-if="showLabel" class="oc-progress-pie-label oc-text-muted" v-text="_label" />
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Show progress to the users in a pie shape.
  */
-export default {
+export default defineComponent({
   name: 'OcProgressPie',
   status: 'ready',
   release: '1.0.0',
@@ -51,7 +53,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 <style lang="scss">
 $default-size: 64px;
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
index 8b1f4b5b595..95e7f1df597 100644
--- a/packages/design-system/src/components/OcRadio/OcRadio.vue
+++ b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -14,13 +14,15 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { getSizeClass } from '../../utils/sizeClasses'
 import uniqueId from '../../utils/uniqueId'
 /**
  * The radio element. Can be grouped to give the user to choose between different options.
  */
-export default {
+export default defineComponent({
   name: 'OcRadio',
   status: 'ready',
   release: '1.0.0',
@@ -111,7 +113,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index f93e8a6c8b7..3fbd56d5bf4 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -32,12 +32,14 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcAvatar from '../OcAvatar/OcAvatar.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcSpinner from '../OcSpinner/OcSpinner.vue'
 
-export default {
+export default defineComponent({
   name: 'OcRecipient',
   status: 'ready',
   release: '8.2.0',
@@ -94,7 +96,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 92aa2fb1340..69e52772eb7 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -57,7 +57,9 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcButton from '../OcButton/OcButton.vue'
 import OcImg from '../OcImage/OcImage.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -69,7 +71,7 @@ import * as path from 'path'
 /**
  * Displays a resource together with the resource type icon or thumbnail
  */
-export default {
+export default defineComponent({
   name: 'OcResource',
   status: 'ready',
   release: '2.1.0',
@@ -184,7 +186,7 @@ export default {
       this.$emit('click')
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcResourceName/OcResourceName.vue b/packages/design-system/src/components/OcResourceName/OcResourceName.vue
index 9ed001668d0..ab3a20762be 100644
--- a/packages/design-system/src/components/OcResourceName/OcResourceName.vue
+++ b/packages/design-system/src/components/OcResourceName/OcResourceName.vue
@@ -19,8 +19,10 @@
   </span>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'OcResourceName',
   status: 'ready',
   release: '2.1.0',
@@ -136,7 +138,7 @@ export default {
       return this.displayName
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcResourceSize/OcResourceSize.vue b/packages/design-system/src/components/OcResourceSize/OcResourceSize.vue
index 4a2cf537ea3..651f2c4af2a 100644
--- a/packages/design-system/src/components/OcResourceSize/OcResourceSize.vue
+++ b/packages/design-system/src/components/OcResourceSize/OcResourceSize.vue
@@ -2,13 +2,14 @@
   <span class="oc-resource-size" v-text="formattedSize" />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import filesize from 'filesize'
 
 /**
  * Displays a formatted resource size
  */
-export default {
+export default defineComponent({
   name: 'OcResourceSize',
   status: 'ready',
   release: '2.1.0',
@@ -41,7 +42,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 
 <docs>
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index cb5021306ff..14c29bcb7f9 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -59,7 +59,9 @@
   </oc-grid>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcButton from '../OcButton/OcButton.vue'
 import OcGrid from '../OcGrid/OcGrid.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -79,7 +81,7 @@ import OcSpinner from '../OcSpinner/OcSpinner.vue'
  *
  * The `aria-label` of the loading spinner can be set via `customLoadingAccessibleLabel`. If not set, it will default to "Loading results".
  */
-export default {
+export default defineComponent({
   name: 'OcSearchBar',
   status: 'ready',
   release: '1.0.0',
@@ -282,7 +284,7 @@ export default {
       this.cancelHandler()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index 3e09e11af4c..067a899f2be 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
@@ -2,7 +2,8 @@
   <span :class="$_ocSpinner_class" :aria-label="ariaLabel" tabindex="-1" role="img" />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { getSizeClass } from '../../utils/sizeClasses'
 
 /**
@@ -18,7 +19,7 @@ import { getSizeClass } from '../../utils/sizeClasses'
  *
  *
  */
-export default {
+export default defineComponent({
   name: 'OcSpinner',
   status: 'ready',
   release: '1.0.0',
@@ -48,7 +49,7 @@ export default {
       return ['oc-spinner', `oc-spinner-${getSizeClass(this.size)}`]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
index cfafb8d6c95..127a92ba180 100644
--- a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
+++ b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
@@ -43,7 +43,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcButton from '../OcButton/OcButton.vue'
 import uniqueId from '../../utils/uniqueId'
@@ -51,7 +52,7 @@ import uniqueId from '../../utils/uniqueId'
 /**
  * Status indicators which can be attatched to a resource
  */
-export default {
+export default defineComponent({
   name: 'OcStatusIndicators',
   status: 'ready',
   release: '2.0.1',
@@ -111,7 +112,7 @@ export default {
       return this.accessibleDescriptionIds[indicator.id]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index 5018a91bd23..b4378d09ca5 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -12,13 +12,15 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import uniqueId from '../../utils/uniqueId'
 
 /**
  * The switch has two states between users can choose.
  */
-export default {
+export default defineComponent({
   name: 'OcSwitch',
   status: 'ready',
   release: '1.0.0',
@@ -66,7 +68,7 @@ export default {
       this.$emit('change', !this.checked)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue b/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue
index 1be1b424062..38722860d7c 100644
--- a/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue
+++ b/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue
@@ -3,11 +3,13 @@
     <slot />
   </table>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * A table component with manually built layout.
  */
-export default {
+export default defineComponent({
   name: 'OcTableSimple',
   status: 'ready',
   release: '2.1.0',
@@ -29,7 +31,7 @@ export default {
       return result
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .oc-table-simple {
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index f85400c1d8e..700072a5168 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -5,10 +5,12 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { getSizeClass } from '../../utils/sizeClasses'
 
-export default {
+export default defineComponent({
   name: 'OcTag',
   status: 'ready',
   release: '2.0.0',
@@ -81,7 +83,7 @@ export default {
       this.$emit('click', event)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 666c024db80..5805c76d89c 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -43,7 +43,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import uniqueId from '../../utils/uniqueId'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -61,7 +63,7 @@ import OcIcon from '../OcIcon/OcIcon.vue'
  * An error or warning will replace the description as well as the `aria-describedby` property until the error
  * or warning is fixed.
  */
-export default {
+export default defineComponent({
   name: 'OcTextInput',
   components: { OcIcon, OcButton },
   status: 'ready',
@@ -266,7 +268,7 @@ export default {
       this.$emit('focus', target.value)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index 9d0eb934a1c..efb75d9f453 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -29,7 +29,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import uniqueId from '../../utils/uniqueId'
 
 /**
@@ -45,7 +46,7 @@ import uniqueId from '../../utils/uniqueId'
  * An error or warning will replace the description as well as the `aria-describedby` property until the error
  * or warning is fixed.
  */
-export default {
+export default defineComponent({
   name: 'OcTextarea',
   status: 'ready',
   release: '1.0.0',
@@ -186,7 +187,7 @@ export default {
       this.$emit('keydown', e)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/_OcGhostElement/_OcGhostElement.vue b/packages/design-system/src/components/_OcGhostElement/_OcGhostElement.vue
index faf20c7e842..7d199886ad5 100644
--- a/packages/design-system/src/components/_OcGhostElement/_OcGhostElement.vue
+++ b/packages/design-system/src/components/_OcGhostElement/_OcGhostElement.vue
@@ -9,11 +9,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Please head to the ownCloud web ResourceTable component (https://github.com/owncloud/web/blob/master/packages/web-app-files/src/components/FilesList/ResourceTable.vue) for a demo of the Ghost Element.
  */
-export default {
+export default defineComponent({
   name: 'OcGhostElement',
   status: 'ready',
   release: '11.2.0',
@@ -37,7 +39,7 @@ export default {
       return this.previewItems.length
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/_OcTableBody/_OcTableBody.vue b/packages/design-system/src/components/_OcTableBody/_OcTableBody.vue
index 2d46f7c80d4..e6ae07bb842 100644
--- a/packages/design-system/src/components/_OcTableBody/_OcTableBody.vue
+++ b/packages/design-system/src/components/_OcTableBody/_OcTableBody.vue
@@ -3,10 +3,11 @@
     <slot />
   </tbody>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'OcTbody',
   status: 'ready',
   release: '2.1.0'
-}
+})
 </script>
diff --git a/packages/design-system/src/components/_OcTableCellData/_OcTableCellData.vue b/packages/design-system/src/components/_OcTableCellData/_OcTableCellData.vue
index a78f483949d..3557d332c36 100644
--- a/packages/design-system/src/components/_OcTableCellData/_OcTableCellData.vue
+++ b/packages/design-system/src/components/_OcTableCellData/_OcTableCellData.vue
@@ -10,10 +10,11 @@
     <slot />
   </oc-table-cell>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcTableCell from '../_OcTableCell/_OcTableCell.vue'
 
-export default {
+export default defineComponent({
   name: 'OcTd',
   status: 'ready',
   release: '2.1.0',
@@ -40,5 +41,5 @@ export default {
       validator: (wrap) => (wrap ? /(break|nowrap|truncate)/.test(wrap) : true)
     }
   }
-}
+})
 </script>
diff --git a/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue b/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
index 5339bc2c1d3..a7305dfbe09 100644
--- a/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
+++ b/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
@@ -11,10 +11,11 @@
     <slot />
   </oc-table-cell>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcTableCell from '../_OcTableCell/_OcTableCell.vue'
 
-export default {
+export default defineComponent({
   name: 'OcTh',
   status: 'ready',
   release: '2.1.0',
@@ -42,7 +43,7 @@ export default {
     }
   },
   emits: ['click']
-}
+})
 </script>
 <style lang="scss">
 .oc-th {
diff --git a/packages/design-system/src/components/_OcTableFooter/_OcTableFooter.vue b/packages/design-system/src/components/_OcTableFooter/_OcTableFooter.vue
index f9caed781c3..7e2037bbbef 100644
--- a/packages/design-system/src/components/_OcTableFooter/_OcTableFooter.vue
+++ b/packages/design-system/src/components/_OcTableFooter/_OcTableFooter.vue
@@ -3,10 +3,11 @@
     <slot />
   </tfoot>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'OcTfoot',
   status: 'ready',
   release: '2.1.0'
-}
+})
 </script>
diff --git a/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue b/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue
index dc1078c903e..6143cc83121 100644
--- a/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue
+++ b/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue
@@ -4,12 +4,13 @@
   </thead>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'OcThead',
   status: 'ready',
   release: '2.1.0'
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/design-system/src/components/_OcTableRow/_OcTableRow.vue b/packages/design-system/src/components/_OcTableRow/_OcTableRow.vue
index 4c52f51b059..e2dc5d54b28 100644
--- a/packages/design-system/src/components/_OcTableRow/_OcTableRow.vue
+++ b/packages/design-system/src/components/_OcTableRow/_OcTableRow.vue
@@ -17,12 +17,12 @@
     <slot v-else />
   </tr>
 </template>
-<script>
-import { customRef, computed, ref, unref } from 'vue'
+<script lang="ts">
+import { customRef, computed, ref, unref, defineComponent } from 'vue'
 import { useIsVisible } from '../../composables'
 import OcTd from '../_OcTableCellData/_OcTableCellData.vue'
 
-export default {
+export default defineComponent({
   name: 'OcTr',
   status: 'ready',
   release: '1.0.0',
@@ -78,7 +78,7 @@ export default {
       lazyColspan
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .shimmer {
diff --git a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
index 46176390034..f05d64df069 100644
--- a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
@@ -25,8 +25,10 @@
   </oc-modal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'CreateGroupModal',
   props: {
     existingGroups: {
@@ -89,5 +91,5 @@ export default {
       this.$emit('confirm', this.group)
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue b/packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue
index 89b52fe2843..e29fb729216 100644
--- a/packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue
@@ -12,8 +12,10 @@
   </oc-modal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DeleteGroupModal',
   props: {
     groups: {
@@ -43,5 +45,5 @@ export default {
       )
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index e17eb401ae2..5244d28fec4 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -70,11 +70,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 
-export default {
+export default defineComponent({
   name: 'GroupsList',
   props: {
     groups: {
@@ -201,7 +202,7 @@ export default {
       return this.$gettextInterpolate(translated, { group: group.displayName }, true)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
index 96e8610e3e5..c45af1c2284 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
@@ -30,8 +30,10 @@
     </div>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DetailsPanel',
   props: {
     groups: {
@@ -55,7 +57,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .group-info {
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
index 94cb87b1070..9d4a9fe5a52 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
@@ -24,10 +24,11 @@
     </form>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
 
-export default {
+export default defineComponent({
   name: 'EditPanel',
   components: {
     CompareSaveDialog
@@ -89,7 +90,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 <style lang="scss">
 #group-edit-panel {
diff --git a/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue b/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
index 376725717f0..4600f67e706 100644
--- a/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
@@ -52,10 +52,11 @@
   </oc-modal>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import * as EmailValidator from 'email-validator'
 
-export default {
+export default defineComponent({
   name: 'CreateUserModal',
   props: {
     existingUsers: {
@@ -193,5 +194,5 @@ export default {
       this.$emit('confirm', this.user)
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue b/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue
index cd229b3f38a..1c8b3a05d13 100644
--- a/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue
@@ -12,8 +12,10 @@
   </oc-modal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DeleteUserModal',
   props: {
     users: {
@@ -43,5 +45,5 @@ export default {
       )
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index 3a17345d788..80c4e24dab3 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -38,9 +38,10 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import UserInfoBox from './UserInfoBox.vue'
-export default {
+export default defineComponent({
   name: 'DetailsPanel',
   components: {
     UserInfoBox
@@ -67,7 +68,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .details-table {
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index 870535aaa05..0f21c4da1c4 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -61,14 +61,15 @@
     </form>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import * as EmailValidator from 'email-validator'
 import UserInfoBox from './UserInfoBox.vue'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
 import QuotaSelect from 'web-pkg/src/components/QuotaSelect.vue'
 import { cloneDeep } from 'lodash-es'
 
-export default {
+export default defineComponent({
   name: 'EditPanel',
   components: {
     UserInfoBox,
@@ -158,7 +159,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/GroupAssignmentsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/GroupAssignmentsPanel.vue
index ea7c5624c0e..151d4a6a56c 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/GroupAssignmentsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/GroupAssignmentsPanel.vue
@@ -46,11 +46,12 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import UserInfoBox from './UserInfoBox.vue'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
 
-export default {
+export default defineComponent({
   name: 'GroupAssignmentsPanel',
   components: {
     UserInfoBox,
@@ -85,7 +86,7 @@ export default {
       this.editUser = { ...this.user }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
index a7a7c59776a..0882fee01bd 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
@@ -5,8 +5,9 @@
     <span class="oc-text-muted user-info-display-name" v-text="user.displayName"></span>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'UserInfoBox',
   props: {
     user: {
@@ -14,7 +15,7 @@ export default {
       required: true
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .user-info {
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index 211062c8c7a..9ef2c198fde 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -80,11 +80,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 
-export default {
+export default defineComponent({
   name: 'UsersList',
   props: {
     users: {
@@ -230,7 +232,7 @@ export default {
       return this.$gettextInterpolate(translated, { user: user.displayName }, true)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-external/src/components/ErrorScreen.vue b/packages/web-app-external/src/components/ErrorScreen.vue
index 6491adef8e6..5662141b424 100644
--- a/packages/web-app-external/src/components/ErrorScreen.vue
+++ b/packages/web-app-external/src/components/ErrorScreen.vue
@@ -5,8 +5,9 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'ErrorScreen',
   props: {
     /**
@@ -18,5 +19,5 @@ export default {
       required: false
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-external/src/components/LoadingScreen.vue b/packages/web-app-external/src/components/LoadingScreen.vue
index 4cf0e91d5f5..c8eaadc0fa2 100644
--- a/packages/web-app-external/src/components/LoadingScreen.vue
+++ b/packages/web-app-external/src/components/LoadingScreen.vue
@@ -5,8 +5,9 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'LoadingScreen'
-}
+})
 </script>
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 ca199573c65..38c526b0aa0 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -17,8 +17,9 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   props: {
     btnLabel: {
       type: String,
@@ -80,7 +81,7 @@ export default {
       this.$refs.input.click()
     }
   }
-}
+})
 </script>
 
 <style scoped>
diff --git a/packages/web-app-files/src/components/FilesList/ListInfo.vue b/packages/web-app-files/src/components/FilesList/ListInfo.vue
index 9ce9845d235..3138edc27e9 100644
--- a/packages/web-app-files/src/components/FilesList/ListInfo.vue
+++ b/packages/web-app-files/src/components/FilesList/ListInfo.vue
@@ -14,10 +14,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { formatFileSize } from 'web-pkg/src/helpers'
 
-export default {
+export default defineComponent({
   props: {
     files: {
       type: Number,
@@ -108,5 +109,5 @@ export default {
       })
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index 087c53c51f4..fe6c0f787ac 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -9,8 +9,10 @@
   />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   props: {
     pages: {
       type: Number,
@@ -28,5 +30,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index bc42a191a39..e3c7975ce9b 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -74,7 +74,7 @@ import { ImageType, ImageDimension } from 'web-pkg/src/constants'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ResourceTable from '../FilesList/ResourceTable.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
 import AppBar from '../AppBar/AppBar.vue'
 import { defineComponent, nextTick } from 'vue'
diff --git a/packages/web-app-files/src/components/Search/Preview.vue b/packages/web-app-files/src/components/Search/Preview.vue
index 990b04d2607..fa0a86b2d49 100644
--- a/packages/web-app-files/src/components/Search/Preview.vue
+++ b/packages/web-app-files/src/components/Search/Preview.vue
@@ -25,7 +25,7 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { loadPreview } from 'web-pkg/src/helpers'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 import Vue from 'vue'
 import { mapGetters } from 'vuex'
 import { createLocationShares, createLocationSpaces } from '../../router'
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index 1aafb1e12b9..caa6ee6d456 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -90,7 +90,7 @@
 <script lang="ts">
 import ResourceTable from '../FilesList/ResourceTable.vue'
 import { computed, defineComponent, unref } from 'vue'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
diff --git a/packages/web-app-files/src/components/SideBar/FileInfo.vue b/packages/web-app-files/src/components/SideBar/FileInfo.vue
index abc51b1271b..6e00868244f 100644
--- a/packages/web-app-files/src/components/SideBar/FileInfo.vue
+++ b/packages/web-app-files/src/components/SideBar/FileInfo.vue
@@ -25,11 +25,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { mapGetters, mapState } from 'vuex'
 import PrivateLinkItem from './PrivateLinkItem.vue'
 
-export default {
+export default defineComponent({
   name: 'FileInfo',
   components: {
     PrivateLinkItem
@@ -58,7 +60,7 @@ export default {
       return this.highlightedFile
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 10428b33eed..8f4e2e1f491 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -52,12 +52,13 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
 import { DateTime } from 'luxon'
 import { formatRelativeDateFromDateTime } from 'web-pkg/src/helpers'
 
-export default {
+export default defineComponent({
   name: 'EditDropdown',
   props: {
     expirationDate: {
@@ -255,7 +256,7 @@ export default {
       this.$emit('showAccessDetails')
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .collaborator-edit-dropdown-options-list .action-menu-item {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 12bdcf5a9c9..763dbc84aef 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts">
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 import PQueue from 'p-queue'
 
 import { mapActions, mapGetters } from 'vuex'
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
index 1939b60bced..ceeb8932e9d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
diff --git a/packages/web-app-files/src/components/SideBar/SpaceInfo.vue b/packages/web-app-files/src/components/SideBar/SpaceInfo.vue
index 269d1515145..4bb1820f9b3 100644
--- a/packages/web-app-files/src/components/SideBar/SpaceInfo.vue
+++ b/packages/web-app-files/src/components/SideBar/SpaceInfo.vue
@@ -16,10 +16,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { mapGetters } from 'vuex'
 
-export default {
+export default defineComponent({
   name: 'SpaceInfo',
   computed: {
     ...mapGetters('Files', ['highlightedFile']),
@@ -28,7 +30,7 @@ export default {
       return this.highlightedFile
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-app-files/src/router/router.ts b/packages/web-app-files/src/router/router.ts
index ed473bacb39..e5a03877463 100644
--- a/packages/web-app-files/src/router/router.ts
+++ b/packages/web-app-files/src/router/router.ts
@@ -7,19 +7,19 @@ import Vue, { ComponentOptions } from 'vue'
  * into js files which then again get imported by other vue files...
  */
 export interface RouteComponents {
-  App: ComponentOptions<Vue>
-  Favorites: ComponentOptions<Vue>
-  FilesDrop: ComponentOptions<Vue>
-  PrivateLink: ComponentOptions<Vue>
-  SearchResults: ComponentOptions<Vue>
-  PublicLink: ComponentOptions<Vue>
+  App: ComponentOptions<typeof Vue>
+  Favorites: ComponentOptions<typeof Vue>
+  FilesDrop: ComponentOptions<typeof Vue>
+  PrivateLink: ComponentOptions<typeof Vue>
+  SearchResults: ComponentOptions<typeof Vue>
+  PublicLink: ComponentOptions<typeof Vue>
   Shares: {
-    SharedWithMe: ComponentOptions<Vue>
-    SharedWithOthers: ComponentOptions<Vue>
-    SharedViaLink: ComponentOptions<Vue>
+    SharedWithMe: ComponentOptions<typeof Vue>
+    SharedWithOthers: ComponentOptions<typeof Vue>
+    SharedViaLink: ComponentOptions<typeof Vue>
   }
   Spaces: {
-    DriveResolver: ComponentOptions<Vue>
-    Projects: ComponentOptions<Vue>
+    DriveResolver: ComponentOptions<typeof Vue>
+    Projects: ComponentOptions<typeof Vue>
   }
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index bb1918db5e0..6de22282212 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -72,7 +72,7 @@ import ResourceTable from '../components/FilesList/ResourceTable.vue'
 import FileActions from '../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 
 import AppBar from '../components/AppBar/AppBar.vue'
 import QuickActions from '../components/FilesList/QuickActions.vue'
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 6ad06da6bfe..79a44d2bfcd 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -66,7 +66,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import FileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 98e25718335..7a61354e440 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -66,7 +66,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import FileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 6229a1ad752..beb70f07fef 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -98,7 +98,7 @@
 
 <script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 
 import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../../mixins/fileActions'
diff --git a/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue b/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue
index 38e6037a068..54da550eb45 100644
--- a/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue
+++ b/packages/web-app-pdf-viewer/src/components/ErrorScreen.vue
@@ -4,8 +4,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'ErrorScreen'
-}
+})
 </script>
diff --git a/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue b/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue
index 95d565567cd..641f4c1e09b 100644
--- a/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue
+++ b/packages/web-app-pdf-viewer/src/components/LoadingScreen.vue
@@ -5,8 +5,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'LoadingScreen'
-}
+})
 </script>
diff --git a/packages/web-app-search/src/App.vue b/packages/web-app-search/src/App.vue
index 7989f6bca7e..f44c51199b0 100644
--- a/packages/web-app-search/src/App.vue
+++ b/packages/web-app-search/src/App.vue
@@ -3,8 +3,10 @@
     <router-view id="search-view" />
   </main>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Search'
-}
+})
 </script>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 407fd8af14e..0769aa26415 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -92,13 +92,12 @@
   <div v-else><!-- no search provider available --></div>
 </template>
 
-<!-- This is a `js` component because TypeScript and jest currently fail to import lodash-es/debounce and mark.js -->
-<script lang="js">
+<script lang="ts">
 import { providerStore } from '../service'
 
 import { createLocationCommon } from 'web-app-files/src/router'
 import Mark from 'mark.js'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 import { useStore, useUserContext } from 'web-pkg/src/composables'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { defineComponent } from 'vue'
@@ -106,7 +105,7 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'SearchBar',
   setup() {
-   const store = useStore()
+    const store = useStore()
     return {
       isUserContext: useUserContext({ store })
     }
@@ -216,7 +215,7 @@ export default defineComponent({
   },
 
   methods: {
-    async showPreview(){
+    async showPreview() {
       if (!this.term) {
         return
       }
diff --git a/packages/web-app-search/src/views/List.vue b/packages/web-app-search/src/views/List.vue
index 65c896f4b82..37067e70d3e 100644
--- a/packages/web-app-search/src/views/List.vue
+++ b/packages/web-app-search/src/views/List.vue
@@ -2,11 +2,13 @@
   <component :is="listSearch.component" :search-result="searchResult" :loading="loading" />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { providerStore } from '../service'
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 
-export default {
+export default defineComponent({
   data() {
     const { provider: providerId } = this.$route.query
     const { listSearch } = providerStore.availableProviders.find(
@@ -47,5 +49,5 @@ export default {
       this.loading = false
     }
   }
-}
+})
 </script>
diff --git a/packages/web-app-skeleton/src/App.vue b/packages/web-app-skeleton/src/App.vue
index a6288f12a68..b3ae8b1be15 100644
--- a/packages/web-app-skeleton/src/App.vue
+++ b/packages/web-app-skeleton/src/App.vue
@@ -2,8 +2,9 @@
   <div @click="hello">CLICK ME TO TALK TO FOO --> {{ foo }}</div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   data: () => ({
     foo: 'bar'
   }),
@@ -12,5 +13,5 @@ export default {
       alert(this.foo)
     }
   }
-}
+})
 </script>
diff --git a/packages/web-pkg/src/components/AppLoadingSpinner.vue b/packages/web-pkg/src/components/AppLoadingSpinner.vue
index 9f65088c217..59f614b6165 100644
--- a/packages/web-pkg/src/components/AppLoadingSpinner.vue
+++ b/packages/web-pkg/src/components/AppLoadingSpinner.vue
@@ -4,8 +4,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'AppLoadingSpinner'
-}
+})
 </script>
diff --git a/packages/web-pkg/src/components/NoContentMessage.vue b/packages/web-pkg/src/components/NoContentMessage.vue
index 9a86e93b9e0..938bf41b06a 100644
--- a/packages/web-pkg/src/components/NoContentMessage.vue
+++ b/packages/web-pkg/src/components/NoContentMessage.vue
@@ -12,8 +12,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'NoContentMessage',
 
   props: {
@@ -26,7 +28,7 @@ export default {
       default: 'fill'
     }
   }
-}
+})
 </script>
 <style>
 .no-content-message {
diff --git a/packages/web-pkg/src/components/SpaceQuota.vue b/packages/web-pkg/src/components/SpaceQuota.vue
index 51094ee35af..14ca6022b0a 100644
--- a/packages/web-pkg/src/components/SpaceQuota.vue
+++ b/packages/web-pkg/src/components/SpaceQuota.vue
@@ -10,10 +10,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import filesize from 'filesize'
 
-export default {
+export default defineComponent({
   name: 'SpaceQuota',
   props: {
     spaceQuota: {
@@ -60,5 +62,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue b/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue
index 6b567e07253..807563d09fa 100644
--- a/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue
+++ b/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue
@@ -21,9 +21,11 @@
   </portal>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { mapActions, mapMutations } from 'vuex'
-export default {
+export default defineComponent({
   name: 'SpaceReadmeContentModal',
   props: {
     space: {
@@ -93,5 +95,5 @@ export default {
         })
     }
   }
-}
+})
 </script>
diff --git a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
index 23465e6cfb8..8f4b1560f58 100644
--- a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
+++ b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
@@ -6,10 +6,12 @@
     </div>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'SpaceDetailsMultiple'
-}
+})
 </script>
 <style lang="scss">
 .space-info {
diff --git a/packages/web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue b/packages/web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue
index ce1abf75e8c..4f6608fb1b4 100644
--- a/packages/web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue
+++ b/packages/web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue
@@ -6,10 +6,11 @@
     </div>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'SpaceNoSelection'
-}
+})
 </script>
 <style lang="scss">
 .space-info {
diff --git a/packages/web-pkg/src/composables/reactivity/useDebouncedRev.ts b/packages/web-pkg/src/composables/reactivity/useDebouncedRev.ts
index 5abbcdc65fe..061d2939a3f 100644
--- a/packages/web-pkg/src/composables/reactivity/useDebouncedRev.ts
+++ b/packages/web-pkg/src/composables/reactivity/useDebouncedRev.ts
@@ -1,5 +1,5 @@
 import { customRef, Ref, ref } from 'vue'
-import debounce, { DebounceSettings } from 'lodash-es/debounce'
+import { debounce, DebounceSettings } from 'lodash-es'
 
 export const useDebouncedRef = <T>(
   initialValue: T,
diff --git a/packages/web-pkg/src/decorator/debounce.ts b/packages/web-pkg/src/decorator/debounce.ts
index 129352749a2..aefda37f0aa 100644
--- a/packages/web-pkg/src/decorator/debounce.ts
+++ b/packages/web-pkg/src/decorator/debounce.ts
@@ -1,4 +1,4 @@
-import debounce from 'lodash-es/debounce'
+import { debounce } from 'lodash-es'
 
 /**
  * Wrap lodash debounce as a decorator
diff --git a/packages/web-runtime/src/components/Avatar.vue b/packages/web-runtime/src/components/Avatar.vue
index 9d484e21d88..fa99aa44253 100644
--- a/packages/web-runtime/src/components/Avatar.vue
+++ b/packages/web-runtime/src/components/Avatar.vue
@@ -14,10 +14,12 @@
     />
   </component>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { mapGetters } from 'vuex'
 
-export default {
+export default defineComponent({
   name: 'Avatar',
   props: {
     /**
@@ -116,5 +118,5 @@ export default {
         })
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/components/EditPasswordModal.vue b/packages/web-runtime/src/components/EditPasswordModal.vue
index ad86cb86594..123a63a6962 100644
--- a/packages/web-runtime/src/components/EditPasswordModal.vue
+++ b/packages/web-runtime/src/components/EditPasswordModal.vue
@@ -33,8 +33,10 @@
   </oc-modal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'EditPasswordModal',
   data: function () {
     return {
@@ -74,5 +76,5 @@ export default {
       return true
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/components/MessageBar.vue b/packages/web-runtime/src/components/MessageBar.vue
index 66a80b3e67f..327c7f247eb 100644
--- a/packages/web-runtime/src/components/MessageBar.vue
+++ b/packages/web-runtime/src/components/MessageBar.vue
@@ -11,10 +11,11 @@
   </oc-notifications>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
-export default {
+export default defineComponent({
   props: {
     activeMessages: {
       type: Array,
@@ -39,5 +40,5 @@ export default {
       this.$emit('deleteMessage', item)
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 896dd562b9f..0d2b29307f8 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -44,12 +44,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { mapState, mapActions } from 'vuex'
 import SidebarNavItem from './SidebarNavItem.vue'
 import * as uuid from 'uuid'
 
-export default {
+export default defineComponent({
   components: {
     SidebarNavItem
   },
@@ -110,7 +111,7 @@ export default {
       return uuid.v4().replaceAll('-', '')
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 08c264538f0..b9bd55194df 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -22,10 +22,12 @@
     </oc-button>
   </li>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import get from 'lodash-es/get'
 
-export default {
+export default defineComponent({
   props: {
     name: {
       type: String,
@@ -109,7 +111,7 @@ export default {
       style.setProperty('transform', `translateY(${offset}px)`)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index 3a35431bae2..4a9cf2ffc10 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -2,8 +2,9 @@
   <button class="skip-button" @click="skipToTarget"><slot /></button>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
   props: {
     /*
      * The element to focus and to skip to
@@ -25,7 +26,7 @@ export default {
       this.targetElement.scrollIntoView()
     }
   }
-}
+})
 </script>
 
 <style scoped>
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 74b083e8316..2d971bb9807 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -47,13 +47,14 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { clientService } from 'web-pkg/src/services'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { mapGetters } from 'vuex'
 import { urlJoin } from 'web-client/src/utils'
 
-export default {
+export default defineComponent({
   props: {
     applicationsList: {
       type: Array,
@@ -87,7 +88,7 @@ export default {
       return httpClient.post(url, { isDefault: false })
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
index 59e2da234a3..eac161056d1 100644
--- a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
@@ -16,8 +16,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'FeedbackLink',
   props: {
     href: {
@@ -52,5 +54,5 @@ export default {
       )
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
index 07a6e8bf360..b53c5892ec4 100644
--- a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
@@ -11,13 +11,13 @@
     <oc-icon :name="switchIcon" fill-type="line" />
   </oc-button>
 </template>
-<script>
-import { computed, unref, watch } from 'vue'
+<script lang="ts">
+import { computed, unref, watch, defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
 import { useStore, useLocalStorage } from 'web-pkg/src/composables'
 import { themeNameDark, themeNameLight, useDefaultThemeName } from '../../composables'
 
-export default {
+export default defineComponent({
   setup() {
     const store = useStore()
     const currentThemeName = useLocalStorage('oc_currentThemeName', useDefaultThemeName())
@@ -57,5 +57,5 @@ export default {
       this.currentThemeName = this.isLightTheme ? themeNameDark : themeNameLight
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 4f253ec03e5..b4d2773fb16 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -76,14 +76,15 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import isNil from 'lodash-es/isNil'
 import { authService } from '../../services/auth'
 import { useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 
-export default {
+export default defineComponent({
   props: {
     applicationsList: {
       type: Array,
@@ -169,7 +170,7 @@ export default {
       authService.logoutUser()
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/web-runtime/src/layouts/Loading.vue b/packages/web-runtime/src/layouts/Loading.vue
index 8a39b1c8bcf..ad16528492f 100644
--- a/packages/web-runtime/src/layouts/Loading.vue
+++ b/packages/web-runtime/src/layouts/Loading.vue
@@ -8,15 +8,16 @@
     <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" />
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
-export default {
+export default defineComponent({
   name: 'LoadingLayout',
   computed: {
     ...mapGetters(['configuration'])
   }
-}
+})
 </script>
 <style lang="scss">
 .loading-overlay {
diff --git a/patches/vue-inline-svg@3.1.0.patch b/patches/vue-inline-svg@3.1.0.patch
new file mode 100644
index 00000000000..a3d6eb25c4c
--- /dev/null
+++ b/patches/vue-inline-svg@3.1.0.patch
@@ -0,0 +1,11 @@
+diff --git a/dist/vue-inline-svg.js b/dist/vue-inline-svg.js
+index 293dfd0e89d2de6b38cde450c8ab910ce2dd344f..050c788fb9b304f82d7039fcf3ad022992837578 100644
+--- a/dist/vue-inline-svg.js
++++ b/dist/vue-inline-svg.js
+@@ -1,5 +1,5 @@
+ (function (global, factory) {
+-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
++    typeof exports === 'object' && typeof module !== 'undefined' ? function() { Object.defineProperty(exports, "__esModule", { value: true }); module.exports.default = factory(require('vue')) }() :
+     typeof define === 'function' && define.amd ? define(['vue'], factory) :
+     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VueInlineSvg = factory(global.Vue));
+ })(this, (function (vue) { 'use strict';
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2eb113667e0..708748f9e1f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,9 @@ patchedDependencies:
   keycode@2.2.1:
     hash: nmisee7m676ph5sqah5fka5ueu
     path: patches/keycode@2.2.1.patch
+  vue-inline-svg@3.1.0:
+    hash: agvlx64p3fh52dmj7mriww4tnm
+    path: patches/vue-inline-svg@3.1.0.patch
 
 importers:
 
@@ -218,7 +221,7 @@ importers:
       deepmerge: ^4.2.2
       depcheck: ^1.3.1
       file-loader: ^6.2.0
-      filesize: ^9.0.9
+      filesize: ^9.0.11
       focus-trap: ^6.4.0
       focus-trap-vue: ^1.1.1
       fuse.js: ^6.4.6
@@ -349,7 +352,7 @@ importers:
       v-calendar: github.com/dschmidt/v-calendar/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d_vue@3.2.45
       vue: 3.2.45
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
-      vue-inline-svg: 3.1.0_vue@3.2.45
+      vue-inline-svg: 3.1.0_agvlx64p3fh52dmj7mriww4tnm_vue@3.2.45
       vue-jest: 3.0.7_qsqxdmxdesuuf5j66ce4k53gda
       vue-loader: 15.10.1_gbcg65oxpbb7ilgade5wkoys5m
       vue-select: 4.0.0-beta.6_vue@3.2.45
@@ -699,7 +702,7 @@ importers:
       vue: 3.2.45
       vue-concurrency: 4.0.0_vue@3.2.45
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
-      vue-inline-svg: 3.1.0_vue@3.2.45
+      vue-inline-svg: 3.1.0_agvlx64p3fh52dmj7mriww4tnm_vue@3.2.45
       vue-router: 3.6.5_vue@3.2.45
       vue-select: 4.0.0-beta.6_vue@3.2.45
       vuex: 4.1.0_vue@3.2.45
@@ -22243,12 +22246,13 @@ packages:
       - vue-template-compiler
     dev: true
 
-  /vue-inline-svg/3.1.0_vue@3.2.45:
+  /vue-inline-svg/3.1.0_agvlx64p3fh52dmj7mriww4tnm_vue@3.2.45:
     resolution: {integrity: sha512-4FUu6q7l6jSL0sc8bs0lzV7MgWMsuSSQAJiQdKsxhGP9sNJfepCWiPfWxU1IPY1mf4LZjTtX93DAiEegWt6cTg==}
     peerDependencies:
       vue: ^3
     dependencies:
       vue: 3.2.45
+    patched: true
 
   /vue-jest/3.0.7_qsqxdmxdesuuf5j66ce4k53gda:
     resolution: {integrity: sha512-PIOxFM+wsBMry26ZpfBvUQ/DGH2hvp5khDQ1n51g3bN0TwFwTy4J85XVfxTRMukqHji/GnAoGUnlZ5Ao73K62w==}
diff --git a/tests/unit/config/jest.config.ts b/tests/unit/config/jest.config.ts
index 6533cca3d1f..6b97e2ef691 100644
--- a/tests/unit/config/jest.config.ts
+++ b/tests/unit/config/jest.config.ts
@@ -3,7 +3,7 @@ import { compilerOptions } from '../../../vite.config'
 const rootDir = path.resolve(__dirname, '../../../')
 
 // We need to transpile these modules as they are using esm syntax
-const esmModules = ['lodash-es', 'mark.js', 'fuse.js'].map((m) => `.pnpm/${m}@.*`)
+const esmModules = ['lodash-es', 'mark.js', 'fuse.js', 'filesize'].map((m) => `.pnpm/${m}@.*`)
 process.env.TZ = 'GMT'
 module.exports = {
   globals: {
@@ -22,10 +22,11 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less|scss)$': '<rootDir>/tests/unit/stubs/empty.js',
     '^@/(.*)$': '<rootDir>/$1',
-    'core-js': '<rootDir>/node_modules/core-js',
+    '^core-js$': '<rootDir>/node_modules/core-js',
     '^vue$': '@vue/compat',
-    'mark.js': '<rootDir>/node_modules/mark.js/src/vanilla.js',
-    'fuse.js': '<rootDir>/node_modules/fuse.js/dist/fuse.esm.js',
+    '^mark.js$': '<rootDir>/node_modules/mark.js/src/vanilla.js',
+    '^fuse.js$': '<rootDir>/node_modules/fuse.js/dist/fuse.esm.js',
+    '^filesize$': '<rootDir>/node_modules/filesize/lib/filesize.esm.js',
 
     // HACK: workaround for https://github.com/transloadit/uppy/issues/4127
     '@uppy/core': '<rootDir>tests/unit/stubs/uppy',