opencloud-eu · JammingBen · May 22, 2026
diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts
@@ -1,5 +1,5 @@
 import { useModals, UserAction } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import CreateGroupModal from '../../../components/Groups/CreateGroupModal.vue'
 
@@ -17,7 +17,7 @@ export const useGroupActionsCreateGroup = () => {
       handler: () => {
         dispatchModal({
           title: $gettext('Create group'),
-          customComponent: CreateGroupModal
+          customComponent: markRaw(CreateGroupModal)
         })
       }
     }

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts
@@ -1,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, markRaw, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
@@ -20,7 +20,7 @@ export const useUserActionsAddToGroups = ({ groups }: { groups: Ref<Group[]> })
           userCount: resources.length.toString()
         }
       ),
-      customComponent: AddToGroupsModal,
+      customComponent: markRaw(AddToGroupsModal),
       customComponentAttrs: () => ({
         users: resources,
         groups: unref(groups)

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts
@@ -1,5 +1,5 @@
 import { useModals, useCapabilityStore } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction } from '@opencloud-eu/web-pkg'
 import CreateUserModal from '../../../components/Users/CreateUserModal.vue'
@@ -19,7 +19,7 @@ export const useUserActionsCreateUser = () => {
       handler: () => {
         dispatchModal({
           title: $gettext('Create user'),
-          customComponent: CreateUserModal
+          customComponent: markRaw(CreateUserModal)
         })
       }
     }

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import LoginModal from '../../../components/Users/LoginModal.vue'
@@ -19,7 +19,7 @@ export const useUserActionsEditLogin = () => {
           userCount: resources.length.toString()
         }
       ),
-      customComponent: LoginModal,
+      customComponent: markRaw(LoginModal),
       customComponentAttrs: () => ({
         users: resources
       })

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts
@@ -1,4 +1,4 @@
-import { computed, toRaw } from 'vue'
+import { computed, markRaw, toRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   QuotaModal,
@@ -53,7 +53,7 @@ export const useUserActionsEditQuota = () => {
 
     dispatchModal({
       title: getModalTitle({ resources }),
-      customComponent: QuotaModal,
+      customComponent: markRaw(QuotaModal),
       customComponentAttrs: () => ({
         spaces: getUserDrives({ resources }),
         resourceType: 'user',

diff --git a/...es/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts b/...es/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
@@ -1,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, markRaw, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
@@ -20,7 +20,7 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
           userCount: resources.length.toString()
         }
       ),
-      customComponent: RemoveFromGroupsModal,
+      customComponent: markRaw(RemoveFromGroupsModal),
       customComponentAttrs: () => ({
         users: resources,
         groups: unref(groups)

diff --git a/packages/web-app-contacts/src/extensions.ts b/packages/web-app-contacts/src/extensions.ts
@@ -9,7 +9,7 @@ import {
   useUserStore,
   Extension
 } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import AddressBooksList from './components/AddressBooksList.vue'
 import { useGettext } from 'vue3-gettext'
@@ -48,14 +48,14 @@ export const extensions = (appInfo: ApplicationInformation) => {
     id: `app.${appInfo.id}.sidebar-nav.main-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.main`],
     type: 'customComponent',
-    content: AddressBooksList
+    content: markRaw(AddressBooksList)
   }
 
   const bottomNavExtension: CustomComponentExtension = {
     id: `app.${appInfo.id}.sidebar-nav.bottom-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.bottom`],
     type: 'customComponent',
-    content: AccountsSwitch
+    content: markRaw(AccountsSwitch)
   }
 
   return computed<Extension[]>(() => {

diff --git a/packages/web-app-external/src/App.vue b/packages/web-app-external/src/App.vue
@@ -39,6 +39,7 @@
 import { stringify } from 'qs'
 import {
   computed,
+  markRaw,
   unref,
   nextTick,
   ref,
@@ -280,7 +281,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
             name: resource.name,
             format: message.Values.format
           }),
-          customComponent: FileNameModal,
+          customComponent: markRaw(FileNameModal),
           customComponentAttrs: () => ({
             space,
             resource,
@@ -298,7 +299,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
 
       dispatchModal({
         title: $gettext('Save »%{name}« with new name', { name: resource.name }),
-        customComponent: FileNameModal,
+        customComponent: markRaw(FileNameModal),
         customComponentAttrs: () => ({
           space,
           resource,
@@ -346,7 +347,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       dispatchModal({
         elementClass: 'file-picker-modal',
         title: $gettext('Insert graphic'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
@@ -374,7 +375,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
           callback === 'Action_CompareDocuments'
             ? $gettext('Select document to compare')
             : $gettext('Insert file'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
@@ -401,7 +402,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       dispatchModal({
         elementClass: 'file-picker-modal',
         title: $gettext('Pick a file to link'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -51,7 +51,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, Ref, unref, useTemplateRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  markRaw,
+  PropType,
+  Ref,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { DateTime } from 'luxon'
 import { ContextualHelperDataListItem, uniqueId } from '@opencloud-eu/design-system/helpers'
 import { OcDrop, OcInfoDrop } from '@opencloud-eu/design-system/components'
@@ -237,7 +246,7 @@ export default defineComponent({
       this.dispatchModal({
         title: this.$gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: currentDate.isValid ? currentDate : null,
           minDate: DateTime.now()

diff --git a/...s/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue b/...s/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { DateTime } from 'luxon'
-import { defineComponent, customRef, PropType, unref, watch } from 'vue'
+import { defineComponent, customRef, markRaw, PropType, unref, watch } from 'vue'
 import { useModals, DatePickerModal } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
@@ -89,7 +89,7 @@ export default defineComponent({
       dispatchModal({
         title: language.$gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: unref(dateCurrent),
           minDate: DateTime.now()

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
@@ -53,7 +53,16 @@ import {
   useResourcesStore
 } from '@opencloud-eu/web-pkg'
 import { LinkShare } from '@opencloud-eu/web-client'
-import { computed, defineComponent, inject, PropType, Ref, unref, useTemplateRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  markRaw,
+  PropType,
+  Ref,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 import { createFileRouteOptions, DatePickerModal } from '@opencloud-eu/web-pkg'
 import { OcDrop } from '@opencloud-eu/design-system/components'
@@ -106,7 +115,7 @@ export default defineComponent({
       dispatchModal({
         title: $gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: currentDate.isValid ? currentDate : null,
           minDate: DateTime.now()

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
@@ -55,7 +55,7 @@
 import { DateTime } from 'luxon'
 import { LinkRoleDropdown, useAbility, useLinkTypes, useModals } from '@opencloud-eu/web-pkg'
 import { LinkShare, Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { computed, inject, Ref, ref, unref } from 'vue'
+import { computed, inject, markRaw, Ref, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import SetLinkPasswordModal from '../../../Modals/SetLinkPasswordModal.vue'
 import { SharingLinkType } from '@opencloud-eu/web-client/graph/generated'
@@ -111,7 +111,7 @@ const updateSelectedType = (type: SharingLinkType) => {
 const showPasswordModal = (callbackFn: () => void = undefined) => {
   dispatchModal({
     title: linkShare.hasPassword ? $gettext('Edit password') : $gettext('Add password'),
-    customComponent: SetLinkPasswordModal,
+    customComponent: markRaw(SetLinkPasswordModal),
     customComponentAttrs: () => ({
       space: unref(space),
       resource: unref(resource),

diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateLink.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateLink.ts
@@ -1,4 +1,4 @@
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { LinkShare, isProjectSpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -42,7 +42,7 @@ export const useFileActionsCreateLink = ({
           resources.length,
           { resourceName: resources[0].name }
         ),
-        customComponent: CreateLinkModal,
+        customComponent: markRaw(CreateLinkModal),
         customComponentAttrs: () => ({ space, resources }),
         hideActions: true
       })

diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewShortcut.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
@@ -1,5 +1,5 @@
 import { storeToRefs } from 'pinia'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   CreateShortcutModal,
@@ -26,7 +26,7 @@ export const useFileActionsCreateNewShortcut = () => {
         dispatchModal({
           title: $gettext('Create a Shortcut'),
           confirmText: $gettext('Create'),
-          customComponent: CreateShortcutModal,
+          customComponent: markRaw(CreateShortcutModal),
           customComponentAttrs: () => ({ space: unref(currentSpace) })
         })
       },

diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsEditQuota.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource, isProjectSpaceResource, isSpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -28,7 +28,7 @@ export const useSpaceActionsEditQuota = () => {
   const handler = ({ resources }: SpaceActionOptions) => {
     dispatchModal({
       title: getModalTitle({ resources }),
-      customComponent: QuotaModal,
+      customComponent: markRaw(QuotaModal),
       customComponentAttrs: () => ({
         spaces: resources,
         resourceType: 'space'

diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetIcon.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { HttpError, isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -38,7 +38,7 @@ export const useSpaceActionsSetIcon = () => {
       elementClass: 'w-auto',
       title: $gettext('Set icon for »%{space}«', { space: resources[0].name }),
       hideConfirmButton: true,
-      customComponent: EmojiPickerModal,
+      customComponent: markRaw(EmojiPickerModal),
       focusTrapInitial: false,
       onConfirm: (emoji: string) => setIconSpace(resources[0], emoji)
     })

diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetImage.ts
@@ -1,5 +1,5 @@
 import { isProjectSpaceResource } from '@opencloud-eu/web-client'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   FileAction,
@@ -32,7 +32,7 @@ export const useSpaceActionsSetImage = () => {
     dispatchModal({
       title: $gettext('Crop your Space image'),
       confirmText: $gettext('Confirm'),
-      customComponent: SpaceImageModal,
+      customComponent: markRaw(SpaceImageModal),
       focusTrapInitial: '#image-cropper-selection',
       customComponentAttrs: () => ({ file, space })
     })

diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, unref } from 'vue'
+import { computed, markRaw, onBeforeUnmount, unref } from 'vue'
 import { isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
 import {
   SpaceAction,
@@ -38,7 +38,7 @@ export const useSpaceActionsUploadImage = () => {
     dispatchModal({
       title: $gettext('Crop image for »%{space}«', { space: selectedSpace.name }),
       confirmText: $gettext('Confirm'),
-      customComponent: SpaceImageModal,
+      customComponent: markRaw(SpaceImageModal),
       focusTrapInitial: '#image-cropper-selection',
       customComponentAttrs: () => ({ file, space: unref(selectedSpace) })
     })