diff --git a/changelog/unreleased/change-update-vue b/changelog/unreleased/change-update-vue
index 588181a1f86..b716a99216b 100644
--- a/changelog/unreleased/change-update-vue
+++ b/changelog/unreleased/change-update-vue
@@ -15,3 +15,4 @@ https://github.com/owncloud/web/pull/8198
 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/8257
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 bf378a9ebbf..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,11 +159,7 @@ export default defineComponent({
   },
   emits: ['toggleSelectSpace', 'toggleSelectAllSpaces', 'toggleUnSelectAllSpaces'],
   setup: function (props, { emit }) {
-    const {
-      $gettext,
-      interpolate: $gettextInterpolate,
-      current: currentLanguage
-    } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate, current: currentLanguage } = useGettext()
     const contextMenuButton = ref(undefined)
     const sortBy = ref('name')
     const sortDir = ref('asc')
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index e5bd0efa237..27837255176 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-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/Links/NameAndCopy.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
index 25db86f20d3..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, interpolate: $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 07ab7aedc09..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, interpolate: $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/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index b4c811266df..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,
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-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
index dea1dc38ca7..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, interpolate: $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
 
     const errorPopup = (error) => {
       store.dispatch('showMessage', {
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts b/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
index 2e76707814c..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,7 +24,7 @@ export function useAppDocumentTitle({
   currentRoute
 }: AppDocumentTitleOptions): void {
   const appMeta = useAppMeta({ applicationId, store })
-  const { $gettext } = useTranslations()
+  const { $gettext } = useGettext()
 
   const titleSegments = computed(() => {
     const baseTitle =
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 b43fbeb9e79..00000000000
--- a/packages/web-pkg/src/composables/translations/useTranslations.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useGettext } from 'vue3-gettext'
-
-export const useTranslations = (): any => {
-  return useGettext()
-}
diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index c3e8e061ad5..8faa1120849 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -10,13 +10,14 @@
 
 <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(() => {
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 b0dd3d6a371..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,
@@ -72,6 +71,7 @@ import { urlJoin } from 'web-client/src/utils'
 import { configurationManager } from 'web-pkg/src/configuration'
 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, interpolate: $gettextInterpolate } = useTranslations()
+    const { $gettext, interpolate: $gettextInterpolate } = useGettext()
     const hasSpaces = useCapabilitySpacesEnabled(store)
     const resource: Ref<Resource> = ref()
     const sharedParentResource: Ref<Resource> = ref()
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')