diff --git a/changelog/unreleased/change-update-vue b/changelog/unreleased/change-update-vue
index 80e495d3a62..d5dfc1d0651 100644
--- a/changelog/unreleased/change-update-vue
+++ b/changelog/unreleased/change-update-vue
@@ -16,4 +16,5 @@ https://github.com/owncloud/web/pull/8213
 https://github.com/owncloud/web/pull/8214
 https://github.com/owncloud/web/pull/8221
 https://github.com/owncloud/web/pull/8256
+https://github.com/owncloud/web/pull/8257
 https://github.com/owncloud/web/pull/8258
diff --git a/package.json b/package.json
index 9f4f9c48d23..0a2c25bea36 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
     "url-search-params-polyfill": "8.1.1",
     "vite": "4.0.4",
     "vite-plugin-environment": "^1.1.3",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-tsc": "1.0.20",
     "wait-for-expect": "3.0.2"
   },
@@ -146,7 +146,6 @@
     "patchedDependencies": {
       "@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",
       "vue-inline-svg@3.1.0": "patches/vue-inline-svg@3.1.0.patch"
     }
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 197f25ff9fc..ba11543584c 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -107,7 +107,7 @@
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
     "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
-    "vue-gettext": "^2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-inline-svg": "^3.1.0",
     "vue-jest": "^3.0.4",
     "vue-loader": "^15.9.0",
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
index 49f85881940..ebbcbe0bd7d 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
@@ -228,5 +228,10 @@ function getWrapper(props = {}) {
   })
 }
 function getMountedWrapper() {
-  return mount(OcSearchBar, { props: { label: 'abc' } })
+  return mount(OcSearchBar, {
+    props: { label: 'abc' },
+    global: {
+      plugins: [...defaultPlugins()]
+    }
+  })
 }
diff --git a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.spec.ts b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.spec.ts
index 5458d8a5906..8c258db49c2 100644
--- a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.spec.ts
+++ b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.spec.ts
@@ -1,5 +1,5 @@
 import StatusIndicators from './OcStatusIndicators.vue'
-import { mount } from 'web-test-helpers'
+import { defaultPlugins, mount } from 'web-test-helpers'
 
 const fileResource = {
   name: 'forest.jpg',
@@ -24,6 +24,9 @@ describe('OcStatusIndicators', () => {
         resource: fileResource,
         indicators: [indicator],
         target: 'test'
+      },
+      global: {
+        plugins: [...defaultPlugins()]
       }
     })
     wrapper.find('.oc-status-indicators-indicator').trigger('click')
@@ -35,6 +38,9 @@ describe('OcStatusIndicators', () => {
         resource: fileResource,
         indicators: [indicator],
         target: 'test'
+      },
+      global: {
+        plugins: [...defaultPlugins()]
       }
     })
     expect(wrapper.find(`#${indicator.id}`).exists()).toBeTruthy()
diff --git a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
index 127a92ba180..259cb3ac35f 100644
--- a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
+++ b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
@@ -5,9 +5,9 @@
         v-if="hasHandler(indicator)"
         :id="indicator.id"
         :key="indicator.id"
-        v-oc-tooltip="indicator.label"
+        v-oc-tooltip="$gettext(indicator.label)"
         class="oc-status-indicators-indicator oc-background-primary-gradient oc-p-xs oc-ml-xs"
-        :aria-label="indicator.label"
+        :aria-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
         appearance="raw"
         variation="inverse"
@@ -21,13 +21,13 @@
         v-else
         :id="indicator.id"
         :key="indicator.id"
-        v-oc-tooltip="indicator.label"
+        v-oc-tooltip="$gettext(indicator.label)"
         tabindex="-1"
         size="small"
         class="oc-status-indicators-indicator"
         :name="indicator.icon"
         :fill-type="indicator.fillType"
-        :accessible-label="indicator.label"
+        :accessible-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
@@ -37,7 +37,7 @@
         :id="getIndicatorDescriptionId(indicator)"
         :key="getIndicatorDescriptionId(indicator)"
         class="oc-invisible-sr"
-        v-text="indicator.accessibleDescription"
+        v-text="$gettext(indicator.accessibleDescription)"
       />
     </template>
   </div>
diff --git a/packages/design-system/src/components/OcTable/OcTable.sort.spec.ts b/packages/design-system/src/components/OcTable/OcTable.sort.spec.ts
index ce004c1f7c2..ac0a2f7782d 100644
--- a/packages/design-system/src/components/OcTable/OcTable.sort.spec.ts
+++ b/packages/design-system/src/components/OcTable/OcTable.sort.spec.ts
@@ -128,6 +128,7 @@ describe('OcTable.sort', () => {
           data
         },
         global: {
+          plugins: [...defaultPlugins()],
           stubs: {
             'oc-icon': true
           }
@@ -175,6 +176,7 @@ describe('OcTable.sort', () => {
             sortDir: sortDirOld
           },
           global: {
+            plugins: [...defaultPlugins()],
             stubs: {
               'oc-icon': true
             }
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
index c2c8fb99502..ba8883afac5 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
@@ -17,7 +17,12 @@ describe('OcTextInput', () => {
   }
 
   function getMountedWrapper(options = {}) {
-    return mount(OcTextInput, options)
+    return mount(OcTextInput, {
+      ...options,
+      global: {
+        plugins: [...defaultPlugins()]
+      }
+    })
   }
 
   const selectors = {
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 02e23bd30ea..f2e5f65c45a 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -136,10 +136,10 @@ import {
 } from 'web-pkg/src/helpers'
 import { computed, defineComponent, nextTick, onMounted, PropType, ref, unref, watch } from 'vue'
 import { extractDomSelector, SpaceResource } from 'web-client/src/helpers'
-import { useTranslations } from 'web-pkg/src/composables'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpacesList',
@@ -159,7 +159,7 @@ export default defineComponent({
   },
   emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
   setup: function (props, { emit }) {
-    const { $gettext, $gettextInterpolate, $language } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate, current: currentLanguage } = useGettext()
     const contextMenuButton = ref(undefined)
     const sortBy = ref('name')
     const sortDir = ref('asc')
@@ -321,25 +321,25 @@ export default defineComponent({
       return managerStr
     }
     const formatDate = (date) => {
-      return formatDateFromJSDate(new Date(date), $language.current)
+      return formatDateFromJSDate(new Date(date), currentLanguage)
     }
     const formatDateRelative = (date) => {
-      return formatRelativeDateFromJSDate(new Date(date), $language.current)
+      return formatRelativeDateFromJSDate(new Date(date), currentLanguage)
     }
     const getTotalQuota = (space: SpaceResource) => {
-      return formatFileSize(space.spaceQuota.total, $language.current)
+      return formatFileSize(space.spaceQuota.total, currentLanguage)
     }
     const getUsedQuota = (space: SpaceResource) => {
       if (space.spaceQuota.used === undefined) {
         return '-'
       }
-      return formatFileSize(space.spaceQuota.used, $language.current)
+      return formatFileSize(space.spaceQuota.used, currentLanguage)
     }
     const getRemainingQuota = (space: SpaceResource) => {
       if (space.spaceQuota.remaining === undefined) {
         return '-'
       }
-      return formatFileSize(space.spaceQuota.remaining, $language.current)
+      return formatFileSize(space.spaceQuota.remaining, currentLanguage)
     }
     const getMemberCount = (space: SpaceResource) => {
       return (
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 6aba7b57a60..4af57509df2 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useGraphClient, useStore, useTranslations } from 'web-pkg/src/composables'
+import { useAccessToken, useGraphClient, useStore } from 'web-pkg/src/composables'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
@@ -78,6 +78,7 @@ import ContextActions from '../components/Spaces/ContextActions.vue'
 import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
 import SpaceInfo from 'web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -93,7 +94,7 @@ export default defineComponent({
     const accessToken = useAccessToken({ store })
     const spaces = ref([])
     const { graphClient } = useGraphClient()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const loadResourcesEventToken = ref(null)
     const template = ref(null)
diff --git a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
index acfdd0d7e17..afed1d203e7 100644
--- a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
@@ -136,7 +136,6 @@ function getWrapper({ propsData = {} } = {}) {
         },
         mocks: {
           ...defaultComponentMocks({
-            gettext: false,
             currentRoute: mock<RouteLocation>({ query: { app: 'admin-settings' } })
           })
         }
diff --git a/packages/web-app-external/package.json b/packages/web-app-external/package.json
index be45523213a..80a94190480 100644
--- a/packages/web-app-external/package.json
+++ b/packages/web-app-external/package.json
@@ -6,7 +6,7 @@
   "license": "AGPL-3.0",
   "peerDependencies": {
     "uuid": "^9.0.0",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg"
diff --git a/packages/web-app-external/tests/unit/app.spec.ts b/packages/web-app-external/tests/unit/app.spec.ts
index 348d280796f..9b3a80d435c 100644
--- a/packages/web-app-external/tests/unit/app.spec.ts
+++ b/packages/web-app-external/tests/unit/app.spec.ts
@@ -145,7 +145,6 @@ function createShallowMountWrapper(makeRequest = jest.fn().mockResolvedValue({ s
         stubs: componentStubs,
         mocks: {
           ...defaultComponentMocks({
-            gettext: false,
             currentRoute: mock<RouteLocation>({ query: { app: 'exampleApp' } })
           })
         }
diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index 2889a059a8d..e01ad89be51 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -24,7 +24,7 @@
     "semver": "^7.3.8",
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-app-files": "workspace:*",
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 037e280e969..7a7e89c66fa 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -114,7 +114,7 @@ export default defineComponent({
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 
     pageTitle() {
-      const title = this.$route.meta.title
+      const title = this.$route.meta.title || ''
       return this.$gettext(title)
     },
     showContextActions() {
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
index 2715347e33f..14928e84336 100644
--- a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
+++ b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -135,13 +135,21 @@ export default defineComponent({
       }
 
       if (key === keycode('c') && ctrl) {
-        return this.copySelectedFiles({ space: this.space, resources: this.selectedFiles })
+        return this.copySelectedFiles({
+          ...this.$language,
+          space: this.space,
+          resources: this.selectedFiles
+        })
       }
       if (key === keycode('v') && ctrl) {
         return this.handlePasteAction()
       }
       if (key === keycode('x') && ctrl) {
-        return this.cutSelectedFiles({ space: this.space, resources: this.selectedFiles })
+        return this.cutSelectedFiles({
+          ...this.$language,
+          space: this.space,
+          resources: this.selectedFiles
+        })
       }
       if (key === keycode('down') && !shift) {
         return this.handleNavigateAction(event)
diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index d7ad40ae641..98e03f50c0c 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-mr-xs quick-action-button oc-p-xs"
       :class="`files-quick-action-${action.id}`"
-      @click="action.handler({ item, client: $client, store: $store, $gettext })"
+      @click="action.handler({ ...$language, item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" fill-type="line" />
     </oc-button>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 12dd3214fc6..79f0b519e21 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -25,10 +25,11 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { useStore, useTranslations } from 'web-pkg/src/composables'
+import { useStore } from 'web-pkg/src/composables'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
@@ -48,7 +49,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const getRoute = (resource) => {
       if (resource.type === 'space') {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index da1065f9cca..09f9b30c6a2 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -171,7 +171,6 @@ import {
   useClientService,
   usePublicLinkContext,
   useStore,
-  useTranslations,
   useUserContext
 } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
@@ -185,12 +184,13 @@ import { buildShareSpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { useTask } from 'vue-concurrency'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'FileDetails',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const copiedDirect = ref(false)
     const copiedEos = ref(false)
diff --git a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
index 873b2947525..ff303e740b2 100644
--- a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
+++ b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
@@ -23,12 +23,13 @@
 import { computed, defineComponent, inject, unref } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { Resource } from 'web-client'
-import { useStore, useTranslations } from 'web-pkg/src'
+import { useStore } from 'web-pkg/src'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'PrivateLinkItem',
   setup() {
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const store = useStore<any>()
     const displayedItem = inject<Resource>('displayedItem')
     const privateLink = computed(() => unref(displayedItem))
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 763dbc84aef..8edceaaa1f0 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
@@ -322,10 +322,10 @@ export default defineComponent({
 
             const addMethod = this.resourceIsSpace ? this.addSpaceMember : this.addShare
             addMethod({
+              ...this.$language,
               client: this.$client,
               graphClient: this.graphClient,
               path,
-              $gettext: this.$gettext,
               shareWith: collaborator.value.shareWith,
               displayName: collaborator.label,
               shareType: collaborator.value.shareType,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index cacf1a89e4b..dfccaaf4aa0 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -360,6 +360,7 @@ export default defineComponent({
         : SharePermissions.permissionsToBitmask(role.permissions(this.hasResharing || this.isSpace))
       const changeMethod = this.isSpace ? this.changeSpaceMember : this.changeShare
       changeMethod({
+        ...this.$language,
         client: this.$client,
         graphClient: this.graphClient,
         share: this.share,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index 0f5c7f1cd89..fe06be58895 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -403,7 +403,7 @@ export default defineComponent({
       const paramsToCreate = this.getParamsForLink(link)
 
       if (this.isPasswordEnforcedFor(link)) {
-        showQuickLinkPasswordModal({ store: this.$store }, (newPassword) => {
+        showQuickLinkPasswordModal({ ...this.$language, store: this.$store }, (newPassword) => {
           this.createLink({ params: { ...paramsToCreate, password: newPassword }, onError })
         })
       } else {
@@ -415,7 +415,7 @@ export default defineComponent({
       const params = this.getParamsForLink(link)
 
       if (!link.password && this.isPasswordEnforcedFor(link)) {
-        showQuickLinkPasswordModal({ store: this.$store }, (newPassword) => {
+        showQuickLinkPasswordModal({ ...this.$language, store: this.$store }, (newPassword) => {
           this.updatePublicLink({ params: { ...params, password: newPassword }, onSuccess })
         })
       } else {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
index a04c6a0b5c5..edaacf95268 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
@@ -29,8 +29,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useStore, useTranslations } from 'web-pkg/src/composables'
+import { useStore } from 'web-pkg/src/composables'
 import { useClipboard } from '@vueuse/core'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'NameAndCopy',
@@ -41,7 +42,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $gettext, $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
     const store = useStore<any>()
 
     const {
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 1db30717d4d..54c25443637 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -79,12 +79,7 @@ import {
 } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
 import { loadPreview } from 'web-pkg/src/helpers'
-import {
-  useAccessToken,
-  useClientService,
-  useStore,
-  useTranslations
-} from 'web-pkg/src/composables'
+import { useAccessToken, useClientService, useStore } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -93,6 +88,7 @@ import sanitizeHtml from 'sanitize-html'
 import SpaceContextActions from './SpaceContextActions.vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { useGettext } from 'vue3-gettext'
 
 const visibilityObserver = new VisibilityObserver()
 const markdownContainerCollapsedClass = 'collapsed'
@@ -110,7 +106,7 @@ export default defineComponent({
     sideBarOpen: { type: Boolean, default: false }
   },
   setup(props) {
-    const { $gettext, $ngettext, $gettextInterpolate } = useTranslations()
+    const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useGettext()
     const { getFileContents, getFileInfo } = useClientService().webdav
     const store = useStore()
     const userId = computed(() => store.getters.user?.id)
diff --git a/packages/web-app-files/src/gettext.js b/packages/web-app-files/src/gettext.js
deleted file mode 100644
index 8f27542a1c6..00000000000
--- a/packages/web-app-files/src/gettext.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { translate } from 'vue-gettext'
-import translations from '../l10n/translations.json'
-
-const config = {
-  language: 'en', // TODO BEFORE MERGE: Access current locale
-  getTextPluginSilent: false,
-  getTextPluginMuteLanguages: [],
-  silent: false
-}
-
-translate.initTranslations(translations, config)
-
-// easygettext aliases
-export const {
-  gettext: $gettext,
-  ngettext: $ngettext,
-  gettextInterpolate: $gettextInterpolate
-} = translate
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index e33ca436ef0..9759de162c2 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -1,7 +1,6 @@
 import orderBy from 'lodash-es/orderBy'
 import path, { basename, join } from 'path'
 import { DateTime } from 'luxon'
-import { getIndicators } from './statusIndicators'
 import { DavProperty } from 'web-client/src/webdav/constants'
 import {
   LinkShareRoles,
@@ -39,10 +38,6 @@ export function buildWebDavFilesTrashPath(userId, path = '') {
   return '/' + `trash-bin/${userId}/${path}`.split('/').filter(Boolean).join('/')
 }
 
-export function attachIndicators(resource, sharesTree) {
-  return (resource.indicators = getIndicators(resource, sharesTree))
-}
-
 export function isResourceTxtFileAlmostEmpty(resource: Resource): boolean {
   const mimeType = resource.mimeType || ''
   return mimeType.startsWith('text/') && (resource.size as number) < 30
diff --git a/packages/web-app-files/src/helpers/statusIndicators.js b/packages/web-app-files/src/helpers/statusIndicators.ts
similarity index 93%
rename from packages/web-app-files/src/helpers/statusIndicators.js
rename to packages/web-app-files/src/helpers/statusIndicators.ts
index 9e44d81143a..1d41d27b26f 100644
--- a/packages/web-app-files/src/helpers/statusIndicators.js
+++ b/packages/web-app-files/src/helpers/statusIndicators.ts
@@ -1,9 +1,13 @@
 import { getParentPaths } from './path'
-import { $gettext } from '../gettext'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
+// dummy to trick gettext string extraction into recognizing strings
+const $gettext = (str) => {
+  return str
+}
+
 const $shareTypes = (resource) => {
   if (typeof resource.shareTypes !== 'undefined') {
     return resource.shareTypes
@@ -91,7 +95,7 @@ export const getIndicators = (resource, sharesTree, hasShareJail = false) => {
   const indicators = [
     {
       id: `files-sharing-${resource.getDomSelector()}`,
-      accessibleDescription: shareUserIconDescribedBy(resource, sharesTree),
+      accessibleDescription: shareUserIconDescribedBy(resource),
       label: $gettext('Show invited people'),
       visible: isUserShare(resource, sharesTree, hasShareJail),
       icon: 'group',
@@ -103,7 +107,7 @@ export const getIndicators = (resource, sharesTree, hasShareJail = false) => {
     },
     {
       id: `file-link-${resource.getDomSelector()}`,
-      accessibleDescription: shareLinkDescribedBy(resource, sharesTree),
+      accessibleDescription: shareLinkDescribedBy(resource),
       label: $gettext('Show links'),
       visible: isLinkShare(resource, sharesTree),
       icon: 'link',
diff --git a/packages/web-app-files/src/mixins/actions/copy.js b/packages/web-app-files/src/mixins/actions/copy.js
index 22fbb9570dd..4c7d46d2e8a 100644
--- a/packages/web-app-files/src/mixins/actions/copy.js
+++ b/packages/web-app-files/src/mixins/actions/copy.js
@@ -54,7 +54,7 @@ export default {
   methods: {
     ...mapActions('Files', ['copySelectedFiles']),
     $_copy_trigger({ resources }) {
-      this.copySelectedFiles({ space: this.space, resources })
+      this.copySelectedFiles({ ...this.$language, space: this.space, resources })
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/actions/move.js b/packages/web-app-files/src/mixins/actions/move.js
index 4967da10044..d6a7643b99a 100644
--- a/packages/web-app-files/src/mixins/actions/move.js
+++ b/packages/web-app-files/src/mixins/actions/move.js
@@ -56,7 +56,7 @@ export default {
   methods: {
     ...mapActions('Files', ['cutSelectedFiles']),
     $_move_trigger({ resources }) {
-      this.cutSelectedFiles({ space: this.space, resources })
+      this.cutSelectedFiles({ ...this.$language, space: this.space, resources })
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/deleteResources.ts b/packages/web-app-files/src/mixins/deleteResources.ts
index d4b0427f209..a5ea0c2d1ae 100644
--- a/packages/web-app-files/src/mixins/deleteResources.ts
+++ b/packages/web-app-files/src/mixins/deleteResources.ts
@@ -152,11 +152,10 @@ export default {
 
     $_deleteResources_filesList_delete() {
       this.deleteFiles({
+        ...this.$language,
         space: this.space,
         files: this.$_deleteResources_resources,
-        clientService: this.$clientService,
-        $gettext: this.$gettext,
-        $gettextInterpolate: this.$gettextInterpolate
+        clientService: this.$clientService
       }).then(async () => {
         this.hideModal()
         this.toggleModalConfirmButton()
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.ts
similarity index 80%
rename from packages/web-app-files/src/quickActions.js
rename to packages/web-app-files/src/quickActions.ts
index 037528df24c..61da9f524b7 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.ts
@@ -1,4 +1,3 @@
-import { $gettext } from './gettext'
 import { createQuicklink } from './helpers/share'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
@@ -14,7 +13,7 @@ export function canShare(item, store) {
   return item.canShare()
 }
 
-export function showQuickLinkPasswordModal(ctx, onConfirm) {
+export function showQuickLinkPasswordModal({ $gettext, store }, onConfirm) {
   const modal = {
     variation: 'passive',
     title: $gettext('Set password'),
@@ -24,27 +23,27 @@ export function showQuickLinkPasswordModal(ctx, onConfirm) {
     inputDescription: $gettext('Passwords for links are required.'),
     inputLabel: $gettext('Password'),
     inputType: 'password',
-    onCancel: () => ctx.store.dispatch('hideModal'),
+    onCancel: () => store.dispatch('hideModal'),
     onConfirm: async (password) => {
       if (!password || password.trim() === '') {
-        ctx.store.dispatch('showMessage', {
+        store.dispatch('showMessage', {
           title: $gettext('Password cannot be empty'),
           status: 'danger'
         })
       } else {
-        await ctx.store.dispatch('hideModal')
+        await store.dispatch('hideModal')
         onConfirm(password)
       }
     },
     onInput: (password) => {
       if (password.trim() === '') {
-        return ctx.store.dispatch('setModalInputErrorMessage', $gettext('Password cannot be empty'))
+        return store.dispatch('setModalInputErrorMessage', $gettext('Password cannot be empty'))
       }
-      return ctx.store.dispatch('setModalInputErrorMessage', null)
+      return store.dispatch('setModalInputErrorMessage', null)
     }
   }
 
-  return ctx.store.dispatch('createModal', modal)
+  return store.dispatch('createModal', modal)
 }
 
 export default {
@@ -52,6 +51,7 @@ export default {
     id: 'collaborators',
     label: ($gettext) => $gettext('Add people'),
     icon: 'user-add',
+    iconFillType: undefined,
     handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing#peopleShares'),
     displayed: canShare
   },
@@ -59,6 +59,7 @@ export default {
     id: 'quicklink',
     label: ($gettext) => $gettext('Copy quicklink'),
     icon: 'link',
+    iconFillType: undefined,
     handler: async (ctx) => {
       const passwordEnforced =
         ctx.store.getters.capabilities?.files_sharing?.public?.password?.enforced_for?.read_only ===
diff --git a/packages/web-app-files/src/store/actions.ts b/packages/web-app-files/src/store/actions.ts
index c91a96da992..fb6e5d6d032 100644
--- a/packages/web-app-files/src/store/actions.ts
+++ b/packages/web-app-files/src/store/actions.ts
@@ -3,7 +3,6 @@ import { dirname } from 'path'
 
 import { getParentPaths } from '../helpers/path'
 import { buildShare, buildCollaboratorShare } from '../helpers/resources'
-import { $gettext, $gettextInterpolate } from '../gettext'
 import { ResourceTransfer, TransferType } from '../helpers/resource'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import { avatarUrl } from '../helpers/user'
@@ -20,6 +19,7 @@ import {
 } from 'web-client/src/helpers'
 import { WebDAV } from 'web-client/src/webdav'
 import { ClientService } from 'web-pkg/src/services'
+import { Language } from 'vue3-gettext'
 
 const allowSharePermissions = (getters) => {
   return get(getters, `capabilities.files_sharing.resharing`, true)
@@ -40,7 +40,8 @@ export default {
       context.commit('ADD_FILE_SELECTION', file)
     }
   },
-  copySelectedFiles(context, options: { space: SpaceResource; resources: Resource[] }) {
+  copySelectedFiles(context, options: { space: SpaceResource; resources: Resource[] } & Language) {
+    const { $gettext } = options
     context.commit('CLIPBOARD_SELECTED', options)
     context.commit('SET_CLIPBOARD_ACTION', ClipboardActions.Copy)
     context.dispatch(
@@ -52,7 +53,8 @@ export default {
       { root: true }
     )
   },
-  cutSelectedFiles(context, options: { space: SpaceResource; resources: Resource[] }) {
+  cutSelectedFiles(context, options: { space: SpaceResource; resources: Resource[] } & Language) {
+    const { $gettext } = options
     context.commit('CLIPBOARD_SELECTED', options)
     context.commit('SET_CLIPBOARD_ACTION', ClipboardActions.Cut)
     context.dispatch(
@@ -138,13 +140,21 @@ export default {
   },
   deleteFiles(
     context,
-    {
+    options: {
+      space: SpaceResource
+      files: Resource[]
+      clientService: ClientService
+      firstRun: boolean
+    } & Language
+  ) {
+    const {
+      $gettext,
+      interpolate: $gettextInterpolate,
       space,
       files,
       clientService,
       firstRun = true
-    }: { space: SpaceResource; files: Resource[]; clientService: ClientService; firstRun: boolean }
-  ) {
+    } = options
     const promises = []
     const removedFiles = []
     for (const file of files) {
@@ -158,6 +168,7 @@ export default {
           if (error.statusCode === 423) {
             if (firstRun) {
               return context.dispatch('deleteFiles', {
+                ...options,
                 space,
                 files: [file],
                 clientService,
@@ -208,7 +219,7 @@ export default {
   },
   async changeShare(
     { commit, dispatch, getters, rootGetters },
-    { client, share, permissions, expirationDate, role }
+    { $gettext, client, share, permissions, expirationDate, role }
   ) {
     if (!permissions && !role) {
       throw new Error('Nothing changed')
@@ -239,7 +250,7 @@ export default {
   },
   addShare(
     context,
-    { client, path, shareWith, shareType, permissions, role, expirationDate, storageId }
+    { $gettext, client, path, shareWith, shareType, permissions, role, expirationDate, storageId }
   ) {
     const isGroupShare = shareType === ShareTypes.group.value
     const options = {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index beb70f07fef..3d0b7ee71cd 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -127,7 +127,7 @@ import { useResourcesViewDefaults } from '../../composables'
 import { computed, defineComponent, PropType, unref } from 'vue'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
 import { Resource } from 'web-client'
-import { useRoute, useTranslations } from 'web-pkg/src/composables'
+import { useRoute } from 'web-pkg/src/composables'
 import { Location } from 'vue-router'
 import {
   isPersonalSpaceResource,
@@ -142,6 +142,7 @@ import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import omit from 'lodash-es/omit'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
 import { basename } from 'path'
+import { useGettext } from 'vue3-gettext'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -208,7 +209,7 @@ export default defineComponent({
     })
     useDocumentTitle({ titleSegments })
 
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const route = useRoute()
     const breadcrumbs = computed(() => {
       const space = props.space
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index e5833a64241..c8aec04af2e 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -77,14 +77,11 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { useResourcesViewDefaults } from '../../composables'
 import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource } from 'web-client'
-import {
-  useCapabilityShareJailEnabled,
-  useCapabilitySpacesEnabled,
-  useTranslations
-} from 'web-pkg/src/composables'
+import { useCapabilityShareJailEnabled, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { createLocationTrash } from '../../router'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'GenericTrash',
@@ -115,7 +112,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const noContentMessage = computed(() => {
       return props.space.driveType === 'personal'
         ? $gettext('You have no deleted files')
diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
index 709ea33a647..fc321223ddb 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
@@ -127,7 +127,6 @@ function getShallowWrapper(
   }
 ) {
   const mocks = defaultComponentMocks({
-    gettext: false,
     currentRoute: mock<RouteLocation>({ name: 'files-trash-generic' })
   })
   mocks.$route.meta.title = 'ExampleTitle'
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
index 8a37cfad858..97b8d2237ea 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -1,4 +1,4 @@
-import { mount } from 'web-test-helpers'
+import { defaultPlugins, mount } from 'web-test-helpers'
 import ResourceTiles from '../../../../src/components/FilesList/ResourceTiles.vue'
 
 const spacesResources = [
@@ -42,6 +42,9 @@ describe('OcTileGrid component', () => {
       },
       slots: {
         ...slots
+      },
+      global: {
+        plugins: [...defaultPlugins({ designSystem: false })]
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
index 1e23e045dc1..8f1e2f8af13 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`Collaborator ListItem component share inheritance indicators show when
       <div class="oc-pl-s oc-text-truncate">
         <div class="oc-text-truncate">
           <span aria-hidden="true" class="files-collaborators-collaborator-name">Brian Murphy</span>
-          <span class="oc-invisible-sr">Share receiver name: %{ displayName } (%{ additionalInfo })</span>
+          <span class="oc-invisible-sr">Share receiver name: Brian Murphy (brian@owncloud.com)</span>
         </div>
         <div>
           <div class="oc-flex oc-flex-nowrap oc-flex-middle">
diff --git a/packages/web-app-files/tests/unit/mixins/actions/rename.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/rename.spec.ts
index 1f3e4419bda..05006d74258 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/rename.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/rename.spec.ts
@@ -80,22 +80,23 @@ describe('rename', () => {
       {
         currentName: 'currentName',
         newName: 'file1',
-        message: 'The name "%{name}" is already taken'
+        message: 'The name "file1" is already taken'
       },
       {
         currentName: 'currentName',
         newName: 'newname',
         parentResources: [{ name: 'newname', path: '/newname' }],
-        message: 'The name "%{name}" is already taken'
+        message: 'The name "newname" is already taken'
       }
     ])('should detect name errors and display error messages accordingly', (inputData) => {
-      const { mocks, wrapper } = getWrapper()
+      const { wrapper } = getWrapper()
+      const errorModalSpy = jest.spyOn(wrapper.vm, 'setModalInputErrorMessage')
       wrapper.vm.$_rename_checkNewName(
         { name: inputData.currentName, path: `/${inputData.currentName}` },
         inputData.newName,
         inputData.parentResources
       )
-      expect(mocks.$gettext).toHaveBeenCalledWith(inputData.message)
+      expect(errorModalSpy).toHaveBeenCalledWith(inputData.message)
     })
   })
 
diff --git a/packages/web-app-files/tests/unit/store/actions.spec.ts b/packages/web-app-files/tests/unit/store/actions.spec.ts
index fabdd89d8bb..dde52c3f76f 100644
--- a/packages/web-app-files/tests/unit/store/actions.spec.ts
+++ b/packages/web-app-files/tests/unit/store/actions.spec.ts
@@ -1,12 +1,12 @@
 import actions from '../../../src/store/actions'
 import { spaceRoleManager, ShareTypes, Share } from 'web-client/src/helpers/share'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'
 import { Resource } from 'web-client'
 import { SpaceResource } from 'web-client/src/helpers'
+import { Language } from 'vue3-gettext'
 
 jest.mock('../../../src/helpers/resources')
-jest.mock('../../../src/gettext')
 
 const stateMock = {
   commit: jest.fn(),
@@ -14,6 +14,8 @@ const stateMock = {
   getters: {},
   rootGetters: {}
 }
+// we need to define $gettext explicitly to make it enumerable on the mock
+const languageMock = mock<Language>({ $gettext: jest.fn() })
 
 describe('vuex store actions', () => {
   describe('changeShare', () => {
@@ -21,6 +23,7 @@ describe('vuex store actions', () => {
       const clientMock = mockDeep<OwnCloudSdk>()
       clientMock.shares.updateShare.mockResolvedValue({})
       await actions.changeShare(stateMock, {
+        ...languageMock,
         client: clientMock,
         share: mockDeep<Share>({ shareType: ShareTypes.user.value }),
         permissions: spaceRoleManager.bitmask(false),
@@ -34,6 +37,7 @@ describe('vuex store actions', () => {
       const clientMock = mockDeep<OwnCloudSdk>()
       clientMock.shares.updateShare.mockRejectedValue(new Error())
       await actions.changeShare(stateMock, {
+        ...languageMock,
         client: clientMock,
         share: mockDeep<Share>({ shareType: ShareTypes.user.value }),
         permissions: spaceRoleManager.bitmask(false),
@@ -54,6 +58,7 @@ describe('vuex store actions', () => {
       const clientMock = mockDeep<OwnCloudSdk>()
       clientMock.shares[data.shareMethod].mockResolvedValue({})
       await actions.addShare(stateMock, {
+        ...languageMock,
         client: clientMock,
         path: '/someFile.txt',
         shareWith: 'user',
@@ -71,6 +76,7 @@ describe('vuex store actions', () => {
       const clientMock = mockDeep<OwnCloudSdk>()
       clientMock.shares.shareFileWithUser.mockRejectedValue(new Error())
       await actions.addShare(stateMock, {
+        ...languageMock,
         client: clientMock,
         path: '/someFile.txt',
         shareWith: 'user',
diff --git a/packages/web-app-pdf-viewer/package.json b/packages/web-app-pdf-viewer/package.json
index 14f606e4a1e..74fe5964171 100644
--- a/packages/web-app-pdf-viewer/package.json
+++ b/packages/web-app-pdf-viewer/package.json
@@ -5,7 +5,7 @@
   "description": "ownCloud web PDF viewer",
   "license": "AGPL-3.0",
   "peerDependencies": {
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vuex": "4.1.0",
     "web-pkg": "npm:@ownclouders/web-pkg"
   }
diff --git a/packages/web-app-preview/package.json b/packages/web-app-preview/package.json
index 8433dc7483b..7a29a032f49 100644
--- a/packages/web-app-preview/package.json
+++ b/packages/web-app-preview/package.json
@@ -5,7 +5,7 @@
   "description": "ownCloud Web Preview",
   "license": "AGPL-3.0",
   "peerDependencies": {
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg"
diff --git a/packages/web-app-search/package.json b/packages/web-app-search/package.json
index c53b10f8ada..8c427884196 100644
--- a/packages/web-app-search/package.json
+++ b/packages/web-app-search/package.json
@@ -9,7 +9,7 @@
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "web-app-files": "workspace:*",
     "web-pkg": "npm:@ownclouders/web-pkg"
   }
diff --git a/packages/web-app-text-editor/package.json b/packages/web-app-text-editor/package.json
index f632c49f73e..f573f57d815 100644
--- a/packages/web-app-text-editor/package.json
+++ b/packages/web-app-text-editor/package.json
@@ -8,7 +8,7 @@
     "marked": "^4.0.12",
     "sanitize-html": "^2.7.0",
     "vue-concurrency": "4.0.0",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg"
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
index 6d84c7f59a0..3caf76a999a 100644
--- a/packages/web-app-text-editor/src/App.vue
+++ b/packages/web-app-text-editor/src/App.vue
@@ -48,10 +48,11 @@ import { useTask } from 'vue-concurrency'
 import { computed, defineComponent, onMounted, onBeforeUnmount, ref, unref, Ref, watch } from 'vue'
 import { mapActions } from 'vuex'
 import { DavPermission, DavProperty } from 'web-client/src/webdav/constants'
-import { useAppDefaults, useStore, useTranslations } from 'web-pkg/src/composables'
+import { useAppDefaults, useStore } from 'web-pkg/src/composables'
 import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 import { Resource } from 'web-client'
 import { isProjectSpaceResource } from 'web-client/src/helpers'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'TextEditor',
@@ -100,7 +101,7 @@ export default defineComponent({
     const isReadOnly = ref(true)
     const resource: Ref<Resource> = ref()
     const store = useStore()
-    const { $gettext, $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
 
     const errorPopup = (error) => {
       store.dispatch('showMessage', {
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 51465a77564..899500f4d95 100644
--- a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
+++ b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue
@@ -36,7 +36,7 @@
 import { formatFileSize } from 'web-pkg/src/helpers'
 import { computed, defineComponent, PropType } from 'vue'
 import { SpaceResource } from 'web-client/src'
-import { useTranslations } from 'web-pkg/src'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'SpaceDetailsMultiple',
@@ -47,13 +47,18 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $gettext, $ngettext, $gettextInterpolate, $language } = useTranslations()
+    const {
+      $gettext,
+      $ngettext,
+      interpolate: $gettextInterpolate,
+      current: currentLanguage
+    } = useGettext()
     const totalSelectedSpaceQuotaTotal = computed(() => {
       let total = 0
       props.selectedSpaces.forEach((space) => {
         total += space.spaceQuota.total
       })
-      return formatFileSize(total, $language.current)
+      return formatFileSize(total, currentLanguage)
     })
     const totalSelectedSpaceQuotaRemaining = computed(() => {
       let remaining = 0
@@ -63,7 +68,7 @@ export default defineComponent({
         }
         remaining += space.spaceQuota.remaining
       })
-      return formatFileSize(remaining, $language.current)
+      return formatFileSize(remaining, currentLanguage)
     })
     const totalSelectedSpaceQuotaUsed = computed(() => {
       let used = 0
@@ -73,7 +78,7 @@ export default defineComponent({
         }
         used += space.spaceQuota.used
       })
-      return formatFileSize(used, $language.current)
+      return formatFileSize(used, currentLanguage)
     })
     const totalEnabledSpaces = computed(() => {
       return props.selectedSpaces.filter((s) => !s.disabled).length
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts b/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
index e98a008d1c8..228ad7999e3 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
@@ -5,7 +5,8 @@ import { useAppMeta } from './useAppMeta'
 import { useDocumentTitle } from './useDocumentTitle'
 import { Store } from 'vuex'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
-import { MaybeRef, useTranslations } from 'web-pkg'
+import { MaybeRef } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 interface AppDocumentTitleOptions {
   store: Store<any>
@@ -23,12 +24,12 @@ export function useAppDocumentTitle({
   currentRoute
 }: AppDocumentTitleOptions): void {
   const appMeta = useAppMeta({ applicationId, store })
-  const { $gettext } = useTranslations()
+  const { $gettext } = useGettext()
 
   const titleSegments = computed(() => {
     const baseTitle =
       basename(unref(unref(currentFileContext).fileName)) ||
-      $gettext(unref(currentRoute)?.meta?.title as string)
+      $gettext((unref(currentRoute)?.meta?.title as string) || '')
     const meta = unref(unref(appMeta).applicationMeta)
 
     return [baseTitle, unref(applicationName) || meta.name || meta.id].filter(Boolean)
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index fc63cdad879..e54fcd06e4c 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -8,4 +8,3 @@ export * from './localStorage'
 export * from './reactivity'
 export * from './router'
 export * from './store'
-export * from './translations'
diff --git a/packages/web-pkg/src/composables/translations/index.ts b/packages/web-pkg/src/composables/translations/index.ts
deleted file mode 100644
index 89e36723a2e..00000000000
--- a/packages/web-pkg/src/composables/translations/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useTranslations'
diff --git a/packages/web-pkg/src/composables/translations/useTranslations.ts b/packages/web-pkg/src/composables/translations/useTranslations.ts
deleted file mode 100644
index 6358a60c15d..00000000000
--- a/packages/web-pkg/src/composables/translations/useTranslations.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useService } from '../service'
-
-export const useTranslations = (): {
-  $gettext: (msgid: string) => string
-  $pgettext: (context: string, msgid: string) => string
-  $ngettext: (msgid: string, plural: string, n: number) => string
-  $gettextInterpolate: (msgid: string, context: object, disableHtmlEscaping?: boolean) => string
-  $language: any
-} => {
-  return {
-    $gettext: useService('$gettext'),
-    $pgettext: useService('$pgettext'),
-    $ngettext: useService('$ngettext'),
-    $gettextInterpolate: useService('$gettextInterpolate'),
-    $language: useService('$language')
-  }
-}
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 6ef6bb51f9b..e81bbc92ed3 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -41,7 +41,7 @@
     "uuid": "^9.0.0",
     "vue": "3.2.45",
     "vue-concurrency": "4.0.0",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-inline-svg": "3.1.0",
     "vue-router": "4.1.6",
     "vue-select": "4.0.0-beta.6",
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 3f1e009b2ac..d48b33571fc 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -3,10 +3,10 @@ import { RuntimeConfiguration } from './types'
 import { buildApplication, NextApplication } from './application'
 import { Store } from 'vuex'
 import { Router } from 'vue-router'
-import Vue from 'vue'
+import Vue, { App } from 'vue'
 import { loadTheme } from '../helpers/theme'
 import OwnCloud from 'owncloud-sdk'
-import getTextPlugin from 'vue-gettext'
+import { createGettext, GetTextOptions } from 'vue3-gettext'
 import set from 'lodash-es/set'
 import { getBackendVersion, getWebVersion } from './versions'
 import { useLocalStorage } from 'web-pkg/src/composables'
@@ -15,7 +15,7 @@ import { useDefaultThemeName } from '../composables'
 import { authService } from '../services/auth'
 import { clientService, PermissionManager } from 'web-pkg/src/services'
 import { UppyService } from '../services/uppyService'
-
+import { default as storeOptions } from '../store'
 import { init as SentryInit } from '@sentry/browser'
 import { Vue as SentryVueIntegration } from '@sentry/integrations'
 import { configurationManager, RawConfig, ConfigurationManager } from 'web-pkg/src/configuration'
@@ -52,17 +52,16 @@ export const announceConfiguration = async (path: string): Promise<RuntimeConfig
  *
  * @param vue
  * @param runtimeConfiguration
- * @param store
+ * @param language
  */
 export const announceStore = async ({
   vue,
-  runtimeConfiguration,
-  store
+  runtimeConfiguration
 }: {
   vue: VueConstructor
   runtimeConfiguration: RuntimeConfiguration
-  store: Store<any>
-}): Promise<void> => {
+}): Promise<any> => {
+  const store = new Store({ ...storeOptions })
   await store.dispatch('loadConfig', runtimeConfiguration)
 
   /**
@@ -76,6 +75,7 @@ export const announceStore = async ({
    * the apis for retrieving it.
    */
   set(vue, '$store', store)
+  return store
 }
 
 /**
@@ -237,24 +237,21 @@ export const announceTheme = async ({
  * announce runtime translations by injecting them into the getTextPlugin
  *
  * @param vue
- * @param supportedLanguages
- * @param translations
+ * @param options
  */
 export const announceTranslations = ({
   vue,
-  supportedLanguages,
-  translations
+  ...options
 }: {
-  vue: VueConstructor
-  supportedLanguages: unknown
-  translations: unknown
-}): void => {
-  vue.use(getTextPlugin as any, {
-    availableLanguages: supportedLanguages,
-    defaultLanguage: navigator.language.substring(0, 2),
-    translations,
-    silent: true
-  })
+  vue: App
+} & Partial<GetTextOptions>): void => {
+  vue.use(
+    createGettext({
+      defaultLanguage: navigator.language.substring(0, 2),
+      silent: true,
+      ...options
+    })
+  )
 }
 
 /**
diff --git a/packages/web-runtime/src/defaults/index.ts b/packages/web-runtime/src/defaults/index.ts
index 03e318e91c9..26366b69c42 100644
--- a/packages/web-runtime/src/defaults/index.ts
+++ b/packages/web-runtime/src/defaults/index.ts
@@ -1,9 +1,7 @@
 import merge from 'lodash-es/merge'
 import App from '../App.vue'
 import missingOrInvalidConfigPage from '../pages/missingOrInvalidConfig.vue'
-import Store from '../store'
 import { coreTranslations, clientTranslations, pkgTranslations, odsTranslations } from './json'
-import Vuex from 'vuex'
 
 // fontawesome-free attributions console message
 import '@fortawesome/fontawesome-free/attribution'
@@ -11,7 +9,6 @@ import '@fortawesome/fontawesome-free/attribution'
 export { default as Vue } from './vue'
 export { default as DesignSystem } from '@ownclouders/design-system'
 
-export const store = new Vuex.Store({ ...Store })
 export const pages = { success: App, failure: missingOrInvalidConfigPage }
 export const translations = merge(
   {},
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 546b8bb582f..835284a3a61 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -3,7 +3,6 @@ import {
   pages,
   translations,
   supportedLanguages,
-  store,
   Vue
 } from './defaults'
 
@@ -41,12 +40,13 @@ import { configureCompat, createApp, h } from 'vue'
 import { compatConfig } from './compatConfig'
 import PortalVue, { createWormhole } from 'portal-vue'
 
+let store
 configureCompat(compatConfig)
 
 export const bootstrap = async (configurationPath: string): Promise<void> => {
   const runtimeConfiguration = await announceConfiguration(configurationPath)
   startSentry(runtimeConfiguration, Vue)
-  await announceStore({ vue: Vue, store, runtimeConfiguration })
+  store = await announceStore({ vue: Vue, runtimeConfiguration })
   await initializeApplications({
     runtimeConfiguration,
     configurationManager,
@@ -60,7 +60,6 @@ export const bootstrap = async (configurationPath: string): Promise<void> => {
   announcePermissionManager({ vue: Vue, store })
   await announceClient(runtimeConfiguration)
   await announceAuthService({ vue: Vue, configurationManager, store, router })
-  announceTranslations({ vue: Vue, supportedLanguages, translations })
   await announceTheme({ store, vue: Vue, designSystem, runtimeConfiguration })
   announceDefaults({ store, router })
 }
@@ -76,6 +75,9 @@ export const renderSuccess = async (): Promise<void> => {
     }
   })
 
+  // language
+  announceTranslations({ vue: instance, availableLanguages: supportedLanguages, translations })
+
   // create wormhole
   instance.config.globalProperties.$wormhole = createWormhole()
   instance.use(PortalVue, {
@@ -209,15 +211,20 @@ export const renderFailure = async (err: Error): Promise<void> => {
   Vue.prototype.$store = store
 
   announceVersions({ store })
-  await announceTranslations({ vue: Vue, supportedLanguages, translations })
   await announceTheme({ store, vue: Vue, designSystem })
   console.error(err)
-  createApp({
+  const instance = createApp({
     store,
     render() {
       return h(pages.failure)
     }
-  }).mount('#owncloud')
+  })
+  await announceTranslations({
+    vue: instance,
+    availableLanguages: supportedLanguages,
+    translations
+  })
+  instance.mount('#owncloud')
 }
 ;(window as any).runtimeLoaded({
   bootstrap,
diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index 08005072d44..8faa1120849 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -10,17 +10,18 @@
 
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
-import { useRouteMeta, useStore, useTranslations } from 'web-pkg'
+import { useRouteMeta, useStore } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'PlainLayout',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const title = useRouteMeta('title')
 
     const pageTitle = computed(() => {
-      return $gettext(unref(title))
+      return $gettext(unref(title) || '')
     })
     const backgroundImg = computed(() => {
       return store.getters.configuration?.currentTheme?.loginPage?.backgroundImg
diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 8432a6df0ae..00a843c7d38 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -27,13 +27,14 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore, useTranslations } from 'web-pkg'
+import { useStore } from 'web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'AccessDeniedPage',
   setup() {
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     const logoImg = computed(() => {
       return store.getters.configuration.currentTheme.logo.login
diff --git a/packages/web-runtime/src/pages/logout.vue b/packages/web-runtime/src/pages/logout.vue
index da49160a60c..3311de34a03 100644
--- a/packages/web-runtime/src/pages/logout.vue
+++ b/packages/web-runtime/src/pages/logout.vue
@@ -14,15 +14,16 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useRouter, useStore, useTranslations } from 'web-pkg'
+import { useRouter, useStore } from 'web-pkg'
 import { authService } from 'web-runtime/src/services/auth'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'LogoutPage',
   setup() {
     const router = useRouter()
     const store = useStore()
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
 
     authService.logoutUser().then(() => {
       router.push({ name: 'login' })
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index 2ef8cca44ac..51aceaaa62b 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -49,7 +49,6 @@
 import {
   useRouteParam,
   useStore,
-  useTranslations,
   useRouter,
   queryItemAsString,
   useCapabilitySpacesEnabled,
@@ -70,8 +69,9 @@ import {
 } from 'web-client/src/helpers'
 import { urlJoin } from 'web-client/src/utils'
 import { configurationManager } from 'web-pkg/src/configuration'
-import { RawLocation } from 'vue-router'
+import { RouteLocationRaw } from 'vue-router'
 import { useLoadFileInfoById } from '../composables/fileInfo'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'ResolvePrivateLink',
@@ -79,7 +79,7 @@ export default defineComponent({
     const store = useStore()
     const router = useRouter()
     const id = useRouteParam('fileId')
-    const { $gettext, $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
     const hasSpaces = useCapabilitySpacesEnabled(store)
     const resource: Ref<Resource> = ref()
     const sharedParentResource: Ref<Resource> = ref()
@@ -142,7 +142,7 @@ export default defineComponent({
       const { params, query } = createFileRouteOptions(matchingSpace, { fileId, path })
       // FIXME: we should not hardcode the name here, but we should not depend on
       // createLocationSpaces('files-spaces-generic') in web-app-files either
-      const location: RawLocation = {
+      const location: RouteLocationRaw = {
         name: 'files-spaces-generic',
         params,
         query: {
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 35a5d4435b4..f10dd915b00 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -69,7 +69,6 @@ import {
   useRouteQuery,
   useRouter,
   useStore,
-  useTranslations,
   useUserContext
 } from 'web-pkg/src/composables'
 import { useTask } from 'vue-concurrency'
@@ -82,6 +81,7 @@ import {
 } from 'web-client/src/helpers'
 import isEmpty from 'lodash-es/isEmpty'
 import { useLoadTokenInfo } from '../composables/tokenInfo'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'ResolvePublicLink',
@@ -224,7 +224,7 @@ export default defineComponent({
       }
     })
 
-    const { $gettext } = useTranslations()
+    const { $gettext } = useGettext()
     const footerSlogan = computed(() => store.getters.configuration.currentTheme.general.slogan)
     const passwordFieldLabel = computed(() => {
       return $gettext('Enter password for public link')
diff --git a/packages/web-runtime/src/store/index.js b/packages/web-runtime/src/store/index.ts
similarity index 100%
rename from packages/web-runtime/src/store/index.js
rename to packages/web-runtime/src/store/index.ts
diff --git a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
index bfdefd7b869..0d13f029354 100644
--- a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
+++ b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
@@ -237,7 +237,7 @@ function getShallowWrapper({
   inFinalization = false
 } = {}) {
   const mocks = {
-    ...defaultComponentMocks({ gettext: false })
+    ...defaultComponentMocks()
   }
   const storeOptions = {
     ...defaultStoreMockOptions
diff --git a/packages/web-test-helpers/package.json b/packages/web-test-helpers/package.json
index 385c5204e50..764b8aadc04 100644
--- a/packages/web-test-helpers/package.json
+++ b/packages/web-test-helpers/package.json
@@ -4,7 +4,7 @@
   "main": "src/index.ts",
   "peerDependencies": {
     "axios": "0.27.2",
-    "vue-gettext": "2.1.12",
+    "vue3-gettext": "^2.3.3",
     "vue-router": "4.1.6",
     "vuex": "4.1.0"
   }
diff --git a/packages/web-test-helpers/src/defaultPlugins.ts b/packages/web-test-helpers/src/defaultPlugins.ts
index 3be6522f24e..9394332a71a 100644
--- a/packages/web-test-helpers/src/defaultPlugins.ts
+++ b/packages/web-test-helpers/src/defaultPlugins.ts
@@ -1,6 +1,6 @@
 import DesignSystem from '@ownclouders/design-system'
-import GetTextPlugin from 'vue-gettext'
 import Vue from 'vue'
+import { createGettext } from 'vue3-gettext'
 ;(window as any).Vue = Vue
 
 export interface DefaultPluginsOptions {
@@ -19,20 +19,7 @@ export const defaultPlugins = ({
   }
 
   if (gettext) {
-    plugins.push({
-      install(app) {
-        Vue.use(GetTextPlugin as any, {
-          translations: 'does-not-matter.json',
-          silent: true
-        })
-        ;(Vue.config as any).language = 'en'
-        app.config.globalProperties.$language = { current: 'en' }
-        app.config.globalProperties.$gettext = Vue.prototype.$gettext
-        app.config.globalProperties.$gettextInterpolate = Vue.prototype.$gettextInterpolate
-        app.config.globalProperties.$ngettext = Vue.prototype.$ngettext
-        app.config.globalProperties.$pgettext = Vue.prototype.$pgettext
-      }
-    })
+    plugins.push(createGettext({ translations: {}, silent: true }))
   } else {
     plugins.push({
       install(app) {
diff --git a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
index d11885fb334..950a0b23321 100644
--- a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
+++ b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
@@ -6,14 +6,10 @@ import { OwnCloudSdk } from 'web-client/src/types'
 import { ref } from 'vue'
 
 export interface ComponentMocksOptions {
-  gettext?: boolean
   currentRoute?: RouteLocation
 }
 
-export const defaultComponentMocks = ({
-  gettext = true,
-  currentRoute = undefined
-}: ComponentMocksOptions = {}) => {
+export const defaultComponentMocks = ({ currentRoute = undefined }: ComponentMocksOptions = {}) => {
   const $router = mockDeep<Router>({ ...(currentRoute && { currentRoute: ref(currentRoute) }) })
   $router.resolve.mockImplementation(
     (to: RouteLocationRaw) => ({ href: (to as any).name, location: { path: '' } } as any)
@@ -26,12 +22,6 @@ export const defaultComponentMocks = ({
     $route,
     $clientService: mockDeep<ClientService>(),
     $client: mockDeep<OwnCloudSdk>(),
-    $uppyService: mockDeep<UppyService>(),
-    ...(gettext && {
-      $gettextInterpolate: jest.fn((text) => text),
-      $ngettext: jest.fn((text) => text),
-      $pgettext: jest.fn((text) => text),
-      $gettext: jest.fn((text) => text)
-    })
+    $uppyService: mockDeep<UppyService>()
   }
 }
diff --git a/patches/vue-gettext@2.1.12.patch b/patches/vue-gettext@2.1.12.patch
deleted file mode 100644
index 91b5590fcb4..00000000000
--- a/patches/vue-gettext@2.1.12.patch
+++ /dev/null
@@ -1,15 +0,0 @@
-diff --git a/dist/vue-gettext.js b/dist/vue-gettext.js
-index fe8eff3af09e652fda57c3a325a19967442f6ff0..c23cc96fd168083ff9b8dc31c8f84830dd7bba0f 100755
---- a/dist/vue-gettext.js
-+++ b/dist/vue-gettext.js
-@@ -888,8 +888,8 @@
-
-     shareVueInstance(Vue);
-
--    Override(Vue, languageVm);
--
-+    Vue.prototype.$language = languageVm;
-+
-     Config(Vue, languageVm, options.silent, options.autoAddKeyAttributes, options.muteLanguages);
-
-     translate.initTranslations(options.translations, Vue.config);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c161d22ee5e..756026abb21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,9 +6,6 @@ patchedDependencies:
   '@adobe/leonardo-contrast-colors@1.0.0-alpha.16':
     hash: uknaqjiop66j4kgrr7nmysu5gi
     path: patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch
-  vue-gettext@2.1.12:
-    hash: 6c2crj3kpnhb2sofrku4e7jhce
-    path: patches/vue-gettext@2.1.12.patch
   jest-serializer-vue-tjw@3.19.0:
     hash: n3ezndisi6xx2kbxcsk5pv4dxy
     path: patches/jest-serializer-vue-tjw@3.19.0.patch
@@ -102,9 +99,9 @@ importers:
       vite-plugin-treat-umd-as-commonjs: 0.1.3
       vue: 3.2.45
       vue-demi: '*'
-      vue-gettext: 2.1.12
       vue-router: '*'
       vue-tsc: 1.0.20
+      vue3-gettext: ^2.3.3
       wait-for-expect: 3.0.2
     dependencies:
       '@vue/compat': 3.2.45_vue@3.2.45
@@ -188,8 +185,8 @@ importers:
       url-search-params-polyfill: 8.1.1
       vite: 4.0.4_@types+node@16.18.11
       vite-plugin-environment: 1.1.3_vite@4.0.4
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-tsc: 1.0.20_typescript@4.9.4
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       wait-for-expect: 3.0.2
 
   packages/babel-preset:
@@ -267,13 +264,13 @@ importers:
       url-loader: ^4.1.1
       v-calendar: github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d
       vue: 3.2.45
-      vue-gettext: ^2.1.12
       vue-inline-svg: ^3.1.0
       vue-jest: ^3.0.4
       vue-loader: ^15.9.0
       vue-select: 4.0.0-beta.6
       vue-style-loader: ^4.1.2
       vue-styleguidist: ^4.44.2
+      vue3-gettext: ^2.3.3
       web-client: npm:@ownclouders/web-client
       web-test-helpers: workspace:*
       webfontloader: ^1.6.28
@@ -353,13 +350,13 @@ importers:
       url-loader: 4.1.1_lit45vopotvaqup7lrvlnvtxwy
       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_agvlx64p3fh52dmj7mriww4tnm_vue@3.2.45
       vue-jest: 3.0.7_qsqxdmxdesuuf5j66ce4k53gda
-      vue-loader: 15.10.1_gbcg65oxpbb7ilgade5wkoys5m
+      vue-loader: 15.10.1_4kf77ta7gzt3xaiqoyqekt3oma
       vue-select: 4.0.0-beta.6_vue@3.2.45
       vue-style-loader: 4.1.3
-      vue-styleguidist: 4.54.3_ghgzbqf7yebkqnixijxu4ak7im
+      vue-styleguidist: 4.54.3_zgtkxgz6snfu65xblmebjfwyfu
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       web-test-helpers: link:../web-test-helpers
       webfontloader: 1.6.28
       webpack: 4.46.0
@@ -451,13 +448,13 @@ importers:
   packages/web-app-external:
     specifiers:
       uuid: ^9.0.0
-      vue-gettext: 2.1.12
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
     dependencies:
       uuid: 9.0.0
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
       web-client: link:../web-client
       web-pkg: link:../web-pkg
@@ -478,8 +475,8 @@ importers:
       semver: ^7.3.8
       uuid: ^9.0.0
       vue-concurrency: 4.0.0
-      vue-gettext: 2.1.12
       vue-router: 4.1.6
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
       web-app-files: workspace:*
       web-app-search: workspace:*
@@ -499,8 +496,8 @@ importers:
       semver: 7.3.8
       uuid: 9.0.0
       vue-concurrency: 4.0.0_vue@3.2.45
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-router: 4.1.6_vue@3.2.45
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
       web-app-files: 'link:'
       web-app-search: link:../web-app-search
@@ -513,22 +510,22 @@ importers:
 
   packages/web-app-pdf-viewer:
     specifiers:
-      vue-gettext: 2.1.12
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
       web-pkg: npm:@ownclouders/web-pkg
     dependencies:
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
       web-pkg: link:../web-pkg
 
   packages/web-app-preview:
     specifiers:
-      vue-gettext: 2.1.12
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
     dependencies:
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
       web-client: link:../web-client
       web-pkg: link:../web-pkg
@@ -537,13 +534,13 @@ importers:
     specifiers:
       lodash-es: ^4.17.21
       mark.js: ^8.11.1
-      vue-gettext: 2.1.12
+      vue3-gettext: ^2.3.3
       web-app-files: workspace:*
       web-pkg: npm:@ownclouders/web-pkg
     dependencies:
       lodash-es: 4.17.21
       mark.js: 8.11.1
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       web-app-files: link:../web-app-files
       web-pkg: link:../web-pkg
 
@@ -564,7 +561,7 @@ importers:
       marked: ^4.0.12
       sanitize-html: ^2.7.0
       vue-concurrency: 4.0.0
-      vue-gettext: 2.1.12
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
@@ -572,7 +569,7 @@ importers:
       marked: 4.0.12
       sanitize-html: 2.7.0
       vue-concurrency: 4.0.0_vue@3.2.45
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
       web-client: link:../web-client
       web-pkg: link:../web-pkg
@@ -654,10 +651,10 @@ importers:
       uuid: ^9.0.0
       vue: 3.2.45
       vue-concurrency: 4.0.0
-      vue-gettext: 2.1.12
       vue-inline-svg: 3.1.0
       vue-router: 4.1.6
       vue-select: 4.0.0-beta.6
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
@@ -702,10 +699,10 @@ importers:
       uuid: 9.0.0
       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_agvlx64p3fh52dmj7mriww4tnm_vue@3.2.45
       vue-router: 4.1.6_vue@3.2.45
       vue-select: 4.0.0-beta.6_vue@3.2.45
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
       web-client: link:../web-client
       web-pkg: link:../web-pkg
@@ -721,13 +718,13 @@ importers:
   packages/web-test-helpers:
     specifiers:
       axios: 0.27.2
-      vue-gettext: 2.1.12
       vue-router: 4.1.6
+      vue3-gettext: ^2.3.3
       vuex: 4.1.0
     dependencies:
       axios: 0.27.2
-      vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-router: 4.1.6_vue@3.2.45
+      vue3-gettext: 2.3.4_tfvhctuaqmmqnirfl65c47tqwu
       vuex: 4.1.0_vue@3.2.45
 
   tests/acceptance:
@@ -5630,7 +5627,6 @@ packages:
     dependencies:
       '@types/minimatch': 3.0.4
       '@types/node': 17.0.45
-    dev: true
 
   /@types/graceful-fs/4.1.5:
     resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
@@ -5713,7 +5709,6 @@ packages:
 
   /@types/minimatch/3.0.4:
     resolution: {integrity: sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==}
-    dev: true
 
   /@types/minimist/1.2.2:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
@@ -5735,7 +5730,6 @@ packages:
 
   /@types/node/17.0.45:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
-    dev: true
 
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -5743,7 +5737,9 @@ packages:
 
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
-    dev: true
+
+  /@types/parse5/5.0.3:
+    resolution: {integrity: sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==}
 
   /@types/parse5/6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@@ -7150,6 +7146,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /array-back/3.1.0:
+    resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==}
+    engines: {node: '>=6'}
+
   /array-differ/3.0.0:
     resolution: {integrity: sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==}
     engines: {node: '>=8'}
@@ -8280,7 +8280,7 @@ packages:
       minipass-pipeline: 1.2.4
       mkdirp: 1.0.4
       p-map: 4.0.0
-      promise-inflight: 1.0.1_bluebird@3.7.2
+      promise-inflight: 1.0.1
       rimraf: 3.0.2
       ssri: 8.0.1
       tar: 6.1.13
@@ -8858,6 +8858,15 @@ packages:
     dependencies:
       delayed-stream: 1.0.0
 
+  /command-line-args/5.2.1:
+    resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      array-back: 3.1.0
+      find-replace: 3.0.0
+      lodash.camelcase: 4.3.0
+      typical: 4.0.0
+
   /commander/2.1.0:
     resolution: {integrity: sha512-J2wnb6TKniXNOtoHS8TSrG9IOQluPrsmyAJ8oCUJOBmv+uLBCyPYAZkD2jFvw2DCzIXNnISIM01NIvr35TkBMQ==}
     engines: {node: '>= 0.6.x'}
@@ -9702,7 +9711,6 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
-    dev: true
 
   /crc-32/1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
@@ -9871,6 +9879,9 @@ packages:
       domutils: 2.8.0
       nth-check: 2.1.1
 
+  /css-selector-parser/1.4.1:
+    resolution: {integrity: sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==}
+
   /css-selector-tokenizer/0.7.3:
     resolution: {integrity: sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==}
     dependencies:
@@ -11001,7 +11012,6 @@ packages:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
       is-arrayish: 0.2.1
-    dev: true
 
   /error-stack-parser/2.0.6:
     resolution: {integrity: sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==}
@@ -12078,6 +12088,12 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
+  /find-replace/3.0.0:
+    resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      array-back: 3.1.0
+
   /find-up/2.1.0:
     resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
     engines: {node: '>=4'}
@@ -12509,6 +12525,18 @@ packages:
       assert-plus: 1.0.0
     dev: true
 
+  /gettext-extractor/3.6.1:
+    resolution: {integrity: sha512-s0rh9RGZRHbQAnj2vPACfWrmjYThYJf7k/5LOuyoMk9L8vv/AWBsw8ih9M6Ij3gJYVvMIkAabdB258CW7GD/vQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@types/glob': 7.2.0
+      '@types/parse5': 5.0.3
+      css-selector-parser: 1.4.1
+      glob: 7.2.0
+      parse5: 6.0.1
+      pofile: 1.0.11
+      typescript: 4.9.4
+
   /git-repo-info/2.1.1:
     resolution: {integrity: sha512-8aCohiDo4jwjOwma4FmYFd3i97urZulL8XL24nIPxuE+GZnfsAyy/g2Shqx6OjUiFKUXZM+Yy+KHnOmmA3FVcg==}
     engines: {node: '>= 4.0'}
@@ -13293,7 +13321,6 @@ packages:
 
   /is-arrayish/0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true
 
   /is-bigint/1.0.2:
     resolution: {integrity: sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==}
@@ -15507,7 +15534,6 @@ packages:
 
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: true
 
   /json-schema-traverse/0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@@ -15823,7 +15849,6 @@ packages:
 
   /lines-and-columns/1.1.6:
     resolution: {integrity: sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ==}
-    dev: true
 
   /listify/1.0.3:
     resolution: {integrity: sha512-083swF7iH7bx8666zdzBColpgEuy46HjN3r1isD4zV6Ix7FuHfb/2/WVnl4CH8hjuoWeFF7P5KkKNXUnJCFEJg==}
@@ -15993,6 +16018,9 @@ packages:
       lodash._basetostring: 4.12.0
     dev: false
 
+  /lodash.camelcase/4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
   /lodash.clone/3.0.3:
     resolution: {integrity: sha512-yVYPpFTdZDCLG2p07gVRTvcwN5X04oj2hu4gG6r0fer58JA08wAVxXzWM+CmmxO2bzOH8u8BkZTZqgX6juVF7A==}
     dependencies:
@@ -17639,7 +17667,6 @@ packages:
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.1.6
-    dev: true
 
   /parse-srcset/1.0.2:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
@@ -17902,10 +17929,16 @@ packages:
       semver-compare: 1.0.0
     dev: true
 
+  /pofile/1.0.11:
+    resolution: {integrity: sha512-Vy9eH1dRD9wHjYt/QqXcTz+RnX/zg53xK+KljFSX30PvdDMb2z+c6uDUeblUGqqJgz3QFsdlA0IJvHziPmWtQg==}
+
   /pofile/1.1.1:
     resolution: {integrity: sha512-RVAzFGo1Mx9+YukVKSgTLut6r4ZVBW8IVrqGHAPfEsVJN93WSp5HRD6+qNa7av1q/joPKDNJd55m5AJl9GBQGA==}
     dev: false
 
+  /pofile/1.1.4:
+    resolution: {integrity: sha512-r6Q21sKsY1AjTVVjOuU02VYKVNQGJNQHjTIvs4dEbeuuYfxgYk/DGD2mqqq4RDaVkwdSq0VEtmQUOPe/wH8X3g==}
+
   /popper-max-size-modifier/0.2.0_@popperjs+core@2.11.5:
     resolution: {integrity: sha512-UerPt9pZfTFnpSpIBVJrR3ibHMuU1k5K01AyNLfMUWCr4z1MFH+dsayPlAF9ZeYExa02HPiQn5OIMqUSVtJEbg==}
     deprecated: 'We recommend switching to Floating UI which supports this modifier out of the box: https://floating-ui.com/docs/size'
@@ -18576,6 +18609,15 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /promise-inflight/1.0.1:
+    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dev: true
+
   /promise-inflight/1.0.1_bluebird@3.7.2:
     resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
     peerDependencies:
@@ -21648,7 +21690,10 @@ packages:
     resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
     engines: {node: '>=4.2.0'}
     hasBin: true
-    dev: true
+
+  /typical/4.0.0:
+    resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
+    engines: {node: '>=8'}
 
   /unbox-primitive/1.0.1:
     resolution: {integrity: sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==}
@@ -22158,16 +22203,11 @@ packages:
       - supports-color
     dev: false
 
-  /vue-gettext/2.1.12_6c2crj3kpnhb2sofrku4e7jhce:
-    resolution: {integrity: sha512-7Kw36xtKvARp8ZafQGPK9WR6EM+dhFUikR5f0+etSkiHuvUM3yf1HsRDLYoLLdJ0AMaXxKwgekumzvCk6KX8rA==}
-    engines: {npm: '>= 3.0.0'}
-    patched: true
-
   /vue-hot-reload-api/2.3.4:
     resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==}
     dev: true
 
-  /vue-inbrowser-compiler-demi/4.55.0_plw62lyq7rnwccpcmeldauxtn4:
+  /vue-inbrowser-compiler-demi/4.55.0_gwl46tm7jrf2c2x35qeotalr4m:
     resolution: {integrity: sha512-Ehgo+x78WjCVLMZRcPvcLdAT2FnIbFrqAeh9yJnPdxjk+c2gXwcQNpho+i030CVi/QP398PrtI8bqcdmNulzkg==}
     requiresBuild: true
     peerDependencies:
@@ -22180,6 +22220,7 @@ packages:
       vue-template-compiler:
         optional: true
     dependencies:
+      '@vue/compiler-sfc': 3.2.45
       vue: 3.2.45
       vue-template-compiler: 2.7.14
     dev: true
@@ -22192,21 +22233,21 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /vue-inbrowser-compiler-utils/4.55.0_plw62lyq7rnwccpcmeldauxtn4:
+  /vue-inbrowser-compiler-utils/4.55.0_gwl46tm7jrf2c2x35qeotalr4m:
     resolution: {integrity: sha512-3Qws8l41m7LJJ53ePRl9ScZenL1zFAw4Hz6uDlutq4PiV8qyMZ4dkzYIzqAUMx7cJKBmJ/gNkC+WJ7pYGGiW2g==}
     peerDependencies:
       vue: '>=2'
     dependencies:
       camelcase: 5.3.1
       vue: 3.2.45
-      vue-inbrowser-compiler-demi: 4.55.0_plw62lyq7rnwccpcmeldauxtn4
+      vue-inbrowser-compiler-demi: 4.55.0_gwl46tm7jrf2c2x35qeotalr4m
       vue-inbrowser-compiler-independent-utils: 4.55.0_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/compiler-sfc'
       - vue-template-compiler
     dev: true
 
-  /vue-inbrowser-compiler/4.55.0_plw62lyq7rnwccpcmeldauxtn4:
+  /vue-inbrowser-compiler/4.55.0_gwl46tm7jrf2c2x35qeotalr4m:
     resolution: {integrity: sha512-nZahV0yGrlVeO4KtwtbDbw5H9SJIuMLx/nA29on/HoQlPMKOG22HrLTT6AwoJGEfcpHkIdLZp4kWu6T0aH75jQ==}
     peerDependencies:
       vue: '>=2'
@@ -22217,7 +22258,7 @@ packages:
       camelcase: 5.3.1
       detect-browser: 5.3.0
       vue: 3.2.45
-      vue-inbrowser-compiler-utils: 4.55.0_plw62lyq7rnwccpcmeldauxtn4
+      vue-inbrowser-compiler-utils: 4.55.0_gwl46tm7jrf2c2x35qeotalr4m
       walkes: 0.2.1
     transitivePeerDependencies:
       - '@vue/compiler-sfc'
@@ -22257,7 +22298,7 @@ packages:
       - supports-color
     dev: true
 
-  /vue-loader/15.10.1_gbcg65oxpbb7ilgade5wkoys5m:
+  /vue-loader/15.10.1_4kf77ta7gzt3xaiqoyqekt3oma:
     resolution: {integrity: sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==}
     peerDependencies:
       '@vue/compiler-sfc': ^3.0.8
@@ -22273,6 +22314,7 @@ packages:
       vue-template-compiler:
         optional: true
     dependencies:
+      '@vue/compiler-sfc': 3.2.45
       '@vue/component-compiler-utils': 3.2.2_sfyobadhz7cuvf7tkzqfswrxrq
       css-loader: 5.2.7_webpack@4.46.0
       hash-sum: 1.0.2
@@ -22364,7 +22406,7 @@ packages:
       loader-utils: 1.4.0
     dev: true
 
-  /vue-styleguidist/4.54.3_ghgzbqf7yebkqnixijxu4ak7im:
+  /vue-styleguidist/4.54.3_zgtkxgz6snfu65xblmebjfwyfu:
     resolution: {integrity: sha512-9uv7xexWI6dFWQlhDv491S8sKpuymhT3QvxfnwSrvc3V70Zmp6uWBG48NAXGJIaQc6xQpi9Llv5DSHhyNFlxcg==}
     engines: {node: '>=6', npm: '>=3'}
     hasBin: true
@@ -22384,6 +22426,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.19.0
+      '@vue/compiler-sfc': 3.2.45
       '@vxna/mini-html-webpack-template': 1.0.0
       ast-types: 0.14.2
       classnames: 2.3.2
@@ -22437,9 +22480,9 @@ packages:
       typescript: 4.8.4
       vue: 3.2.45
       vue-docgen-api: 4.56.0_vue@3.2.45
-      vue-inbrowser-compiler: 4.55.0_plw62lyq7rnwccpcmeldauxtn4
-      vue-inbrowser-compiler-utils: 4.55.0_plw62lyq7rnwccpcmeldauxtn4
-      vue-loader: 15.10.1_gbcg65oxpbb7ilgade5wkoys5m
+      vue-inbrowser-compiler: 4.55.0_gwl46tm7jrf2c2x35qeotalr4m
+      vue-inbrowser-compiler-utils: 4.55.0_gwl46tm7jrf2c2x35qeotalr4m
+      vue-loader: 15.10.1_4kf77ta7gzt3xaiqoyqekt3oma
       vue-template-compiler: 2.7.14
       webpack: 4.46.0
       webpack-dev-server: 3.11.3_webpack@4.46.0
@@ -22492,6 +22535,26 @@ packages:
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
 
+  /vue3-gettext/2.3.4_tfvhctuaqmmqnirfl65c47tqwu:
+    resolution: {integrity: sha512-X+dibsUhiSRz2LW5de6NkDl+GNZoo9JMGmlJ+wuzez/UJYvJ6GKofOeoUxbtwOk2vPY+/wesmyyzhkMoR3Z/AA==}
+    engines: {node: '>= 12.0.0'}
+    hasBin: true
+    peerDependencies:
+      '@vue/compiler-sfc': '>=3.0.0'
+      vue: '>=3.0.0'
+    dependencies:
+      '@vue/compiler-sfc': 3.2.45
+      chalk: 4.1.2
+      command-line-args: 5.2.1
+      cosmiconfig: 7.1.0
+      gettext-extractor: 3.6.1
+      glob: 7.2.0
+      parse5: 6.0.1
+      parse5-htmlparser2-tree-adapter: 6.0.1
+      pofile: 1.1.4
+      tslib: 2.4.1
+      vue: 3.2.45
+
   /vuex/4.1.0_vue@3.2.45:
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
     peerDependencies:
@@ -23066,7 +23129,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yaml/2.1.3:
     resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
diff --git a/tests/unit/config/jest.init.js b/tests/unit/config/jest.init.js
index b70b72f5142..79255fe96a1 100644
--- a/tests/unit/config/jest.init.js
+++ b/tests/unit/config/jest.init.js
@@ -1,5 +1,4 @@
 import Vue, { configureCompat, h } from 'vue'
-import { config } from '@vue/test-utils'
 import fetchMock from 'jest-fetch-mock'
 
 import { compatConfig } from '../../../packages/web-runtime/src/compatConfig'
@@ -14,13 +13,6 @@ window.IntersectionObserver = jest.fn(() => ({
 }))
 fetchMock.enableMocks()
 
-config.mocks = {
-  $language: {
-    current: 'en'
-  },
-  language: 'en'
-}
-
 Vue.component('RouterLink', {
   name: 'RouterLink',
   props: {