diff --git a/apps/federatedfilesharing/src/components/AdminSettings.vue b/apps/federatedfilesharing/src/components/AdminSettings.vue
index 84bf6b565a3..f8315eaf1f9 100644
--- a/apps/federatedfilesharing/src/components/AdminSettings.vue
+++ b/apps/federatedfilesharing/src/components/AdminSettings.vue
@@ -65,11 +65,11 @@
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
+import { DialogBuilder, showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { DialogBuilder, DialogSeverity, showError } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import { confirmPassword } from '@nextcloud/password-confirmation'
-import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 
@@ -114,10 +114,8 @@ export default {
 
 			const dialog = new DialogBuilder(t('federatedfilesharing', 'Confirm data upload to lookup server'))
 			await dialog
-				.setSeverity(DialogSeverity.Warning)
-				.setText(
-					t('federatedfilesharing', 'When enabled, all account properties (e.g. email address) with scope visibility set to "published", will be automatically synced and transmitted to an external system and made available in a public, global address book.'),
-				)
+				.setSeverity('warning')
+				.setText(t('federatedfilesharing', 'When enabled, all account properties (e.g. email address) with scope visibility set to "published", will be automatically synced and transmitted to an external system and made available in a public, global address book.'))
 				.addButton({
 					callback: () => this.setLookupServerUploadEnabled(false),
 					label: t('federatedfilesharing', 'Disable upload'),
@@ -147,9 +145,8 @@ export default {
 
 			const dialog = new DialogBuilder(t('federatedfilesharing', 'Confirm querying lookup server'))
 			await dialog
-				.setSeverity(DialogSeverity.Warning)
-				.setText(
-					t('federatedfilesharing', 'When enabled, the search input when creating shares will be sent to an external system that provides a public and global address book.')
+				.setSeverity('warning')
+				.setText(t('federatedfilesharing', 'When enabled, the search input when creating shares will be sent to an external system that provides a public and global address book.')
 					+ t('federatedfilesharing', 'This is used to retrieve the federated cloud ID to make federated sharing easier.')
 					+ t('federatedfilesharing', 'Moreover, email addresses of users might be sent to that system in order to verify them.'),
 				)
diff --git a/apps/federatedfilesharing/src/services/dialogService.ts b/apps/federatedfilesharing/src/services/dialogService.ts
index a38c6c57707..4bcffa12099 100644
--- a/apps/federatedfilesharing/src/services/dialogService.ts
+++ b/apps/federatedfilesharing/src/services/dialogService.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { spawnDialog } from '@nextcloud/dialogs'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import RemoteShareDialog from '../components/RemoteShareDialog.vue'
 
 /**
diff --git a/apps/files/src/utils/newNodeDialog.ts b/apps/files/src/utils/newNodeDialog.ts
index a81fa9f4e17..f3f65a21438 100644
--- a/apps/files/src/utils/newNodeDialog.ts
+++ b/apps/files/src/utils/newNodeDialog.ts
@@ -4,7 +4,8 @@
  */
 
 import type { Node } from '@nextcloud/files'
-import { spawnDialog } from '@nextcloud/dialogs'
+
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import NewNodeDialog from '../components/NewNodeDialog.vue'
 
 interface ILabels {
diff --git a/apps/files/src/views/FileReferencePickerElement.vue b/apps/files/src/views/FileReferencePickerElement.vue
index 9a60336e1c9..24de7e3e4f4 100644
--- a/apps/files/src/views/FileReferencePickerElement.vue
+++ b/apps/files/src/views/FileReferencePickerElement.vue
@@ -4,80 +4,79 @@
 -->
 
 <template>
-	<div :id="containerId">
-		<FilePicker v-bind="filepickerOptions" @close="onClose" />
-	</div>
+	<div :id="containerId" />
 </template>
 
-<script lang="ts">
-import type { Node as NcNode } from '@nextcloud/files'
+<script setup lang="ts">
 import type { IFilePickerButton } from '@nextcloud/dialogs'
+import type { Node as NcNode } from '@nextcloud/files'
 
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import { generateFileUrl } from '../../../files_sharing/src/utils/generateUrl'
+import { FilePickerBuilder } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { onMounted } from 'vue'
+import logger from '../logger.ts'
 
-export default defineComponent({
-	name: 'FileReferencePickerElement',
-	components: {
-		FilePicker,
-	},
-	props: {
-		providerId: {
-			type: String,
-			required: true,
-		},
-		accessible: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		containerId() {
-			return `filepicker-${Math.random().toString(36).slice(7)}`
-		},
-		filepickerOptions() {
-			return {
-				allowPickDirectory: true,
-				buttons: this.buttonFactory,
-				container: `#${this.containerId}`,
-				multiselect: false,
-				name: t('files', 'Select file or folder to link to'),
-			}
-		},
-	},
-	methods: {
-		t,
+defineProps<{
+	providerId: string
+	accessible: boolean
+}>()
 
-		buttonFactory(selected: NcNode[]): IFilePickerButton[] {
-			const buttons = [] as IFilePickerButton[]
-			if (selected.length === 0) {
-				return []
-			}
-			const node = selected.at(0)
-			if (node.path === '/') {
-				return [] // Do not allow selecting the users root folder
-			}
-			buttons.push({
-				label: t('files', 'Choose {file}', { file: node.displayname }),
-				type: 'primary',
-				callback: this.onClose,
-			})
-			return buttons
-		},
+const emit = defineEmits<{
+	(e: 'submit', url: string): void
+	(e: 'cancel'): void
+}>()
 
-		onClose(nodes?: NcNode[]) {
-			if (nodes === undefined || nodes.length === 0) {
-				this.$emit('cancel')
-			} else {
-				this.onSubmit(nodes[0])
-			}
-		},
+const containerId = `filepicker-${Math.random().toString(36).slice(7)}`
 
-		onSubmit(node: NcNode) {
-			this.$emit('submit', generateFileUrl(node.fileid!))
-		},
-	},
+const filePicker = new FilePickerBuilder(t('files', 'Select file or folder to link to'))
+	.allowDirectories(true)
+	.setButtonFactory(buttonFactory)
+	.setContainer(`#${containerId}`)
+	.setMultiSelect(false)
+	.build()
+
+onMounted(async () => {
+	try {
+		const [node] = await filePicker.pickNodes()
+		onSubmit(node)
+	} catch (error) {
+		logger.debug('Aborted picking nodes:', { error })
+		emit('cancel')
+	}
 })
+
+/**
+ * Get buttons for the file picker dialog
+ *
+ * @param selected - currently selected nodes
+ */
+function buttonFactory(selected: NcNode[]): IFilePickerButton[] {
+	const buttons = [] as IFilePickerButton[]
+	const node = selected[0]
+	if (node === undefined) {
+		return []
+	}
+
+	if (node.path === '/') {
+		return [] // Do not allow selecting the users root folder
+	}
+
+	buttons.push({
+		label: t('files', 'Choose {file}', { file: node.displayname }),
+		variant: 'primary',
+		callback: () => {}, // handled by the pickNodes method
+	})
+	return buttons
+}
+
+/**
+ * @param node - selected node
+ */
+function onSubmit(node: NcNode) {
+	const url = new URL(window.location.href)
+	url.pathname = generateUrl('/f/{fileId}', { fileId: node.fileid! })
+	url.search = ''
+	emit('submit', url.href)
+}
 </script>
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 0f30c091114..d5906234f83 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -50,13 +50,14 @@
 import type { TemplateFile } from '../types.ts'
 
 import { getCurrentUser } from '@nextcloud/auth'
-import { showError, spawnDialog } from '@nextcloud/dialogs'
+import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { File, Node } from '@nextcloud/files'
 import { getClient, getRootPath, resultToNode, getDefaultPropfind } from '@nextcloud/files/dav'
 import { translate as t } from '@nextcloud/l10n'
 import { generateRemoteUrl } from '@nextcloud/router'
-import { normalize, extname, join } from 'path'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+import { extname, join, normalize } from 'path'
 import { defineComponent } from 'vue'
 import { createFromTemplate, getTemplates, getTemplateFields } from '../services/Templates.js'
 
diff --git a/apps/files_external/src/actions/enterCredentialsAction.ts b/apps/files_external/src/actions/enterCredentialsAction.ts
index 580f15ad876..4ed74fdde16 100644
--- a/apps/files_external/src/actions/enterCredentialsAction.ts
+++ b/apps/files_external/src/actions/enterCredentialsAction.ts
@@ -7,15 +7,15 @@ import type { AxiosResponse } from '@nextcloud/axios'
 import type { Node } from '@nextcloud/files'
 import type { StorageConfig } from '../services/externalStorage'
 
+import LoginSvg from '@mdi/svg/svg/login.svg?raw'
+import axios from '@nextcloud/axios'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { DefaultType, FileAction } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
 import { addPasswordConfirmationInterceptors, PwdConfirmationMode } from '@nextcloud/password-confirmation'
 import { generateUrl } from '@nextcloud/router'
-import { showError, showSuccess, spawnDialog } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
-import axios from '@nextcloud/axios'
-import LoginSvg from '@mdi/svg/svg/login.svg?raw'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import Vue, { defineAsyncComponent } from 'vue'
-
-import { FileAction, DefaultType } from '@nextcloud/files'
 import { STORAGE_STATUS, isMissingAuthConfig } from '../utils/credentialsUtils'
 import { isNodeExternalStorage } from '../utils/externalStorageUtils'
 
diff --git a/apps/files_sharing/src/files_newMenu/newFileRequest.ts b/apps/files_sharing/src/files_newMenu/newFileRequest.ts
index 1d58e3552a2..5d50bc8dbc0 100644
--- a/apps/files_sharing/src/files_newMenu/newFileRequest.ts
+++ b/apps/files_sharing/src/files_newMenu/newFileRequest.ts
@@ -2,15 +2,16 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { Entry, Folder, Node } from '@nextcloud/files'
 
+import type { NewMenuEntry, Folder, Node } from '@nextcloud/files'
+
+import { t } from '@nextcloud/l10n'
+import { isPublicShare } from '@nextcloud/sharing/public'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { defineAsyncComponent } from 'vue'
-import { spawnDialog } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
 import FileUploadSvg from '@mdi/svg/svg/file-upload-outline.svg?raw'
 
 import Config from '../services/ConfigService'
-import { isPublicShare } from '@nextcloud/sharing/public'
 const sharingConfig = new Config()
 
 const NewFileRequestDialogVue = defineAsyncComponent(() => import('../components/NewFileRequestDialog.vue'))
@@ -39,4 +40,4 @@ export const entry = {
 			content,
 		})
 	},
-} as Entry
+} as NewMenuEntry
diff --git a/apps/files_trashbin/src/files_listActions/emptyTrashAction.ts b/apps/files_trashbin/src/files_listActions/emptyTrashAction.ts
index 2b6ff171adf..fde6c5f9cbf 100644
--- a/apps/files_trashbin/src/files_listActions/emptyTrashAction.ts
+++ b/apps/files_trashbin/src/files_listActions/emptyTrashAction.ts
@@ -2,16 +2,14 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { Node, View, Folder } from '@nextcloud/files'
 
+import type { Folder, Node, View } from '@nextcloud/files'
+
+import { getDialogBuilder } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { FileListAction } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import {
-	DialogSeverity,
-	getDialogBuilder,
-} from '@nextcloud/dialogs'
 import { emptyTrash } from '../services/api.ts'
 import { TRASHBIN_VIEW_ID } from '../files_views/trashbinView.ts'
 
@@ -41,18 +39,18 @@ export const emptyTrashAction = new FileListAction({
 	async exec(view: View, nodes: Node[]): Promise<null> {
 		const askConfirmation = new Promise<boolean>((resolve) => {
 			const dialog = getDialogBuilder(t('files_trashbin', 'Confirm permanent deletion'))
-				.setSeverity(DialogSeverity.Warning)
+				.setSeverity('warning')
 				// TODO Add note for groupfolders
 				.setText(t('files_trashbin', 'Are you sure you want to permanently delete all files and folders in the trash? This cannot be undone.'))
 				.setButtons([
 					{
 						label: t('files_trashbin', 'Cancel'),
-						type: 'secondary',
+						variant: 'secondary',
 						callback: () => resolve(false),
 					},
 					{
 						label: t('files_trashbin', 'Empty deleted files'),
-						type: 'error',
+						variant: 'error',
 						callback: () => resolve(true),
 					},
 				])
diff --git a/apps/settings/src/components/Encryption/EncryptionSettings.vue b/apps/settings/src/components/Encryption/EncryptionSettings.vue
index f4db63ce53c..0f739374d94 100644
--- a/apps/settings/src/components/Encryption/EncryptionSettings.vue
+++ b/apps/settings/src/components/Encryption/EncryptionSettings.vue
@@ -5,15 +5,17 @@
 
 <script setup lang="ts">
 import type { OCSResponse } from '@nextcloud/typings/ocs'
-import { showError, spawnDialog } from '@nextcloud/dialogs'
+
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { generateOcsUrl } from '@nextcloud/router'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { ref } from 'vue'
 import { textExistingFilesNotEncrypted } from './sharedTexts.ts'
 
-import axios from '@nextcloud/axios'
 import logger from '../../logger.ts'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
diff --git a/apps/systemtags/src/files_actions/bulkSystemTagsAction.ts b/apps/systemtags/src/files_actions/bulkSystemTagsAction.ts
index 7dfe90a1527..9399c725ec4 100644
--- a/apps/systemtags/src/files_actions/bulkSystemTagsAction.ts
+++ b/apps/systemtags/src/files_actions/bulkSystemTagsAction.ts
@@ -2,13 +2,14 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import { Permission, type Node } from '@nextcloud/files'
 
-import { defineAsyncComponent } from 'vue'
-import { FileAction } from '@nextcloud/files'
-import { isPublicShare } from '@nextcloud/sharing/public'
-import { spawnDialog } from '@nextcloud/dialogs'
+import type { Node } from '@nextcloud/files'
+
+import { FileAction, Permission } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
+import { isPublicShare } from '@nextcloud/sharing/public'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
+import { defineAsyncComponent } from 'vue'
 
 import TagMultipleSvg from '@mdi/svg/svg/tag-multiple-outline.svg?raw'
 
diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index 5c6934e67a2..94df7e8c331 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -10,10 +10,9 @@ import $ from 'jquery'
 
 import IconMove from '@mdi/svg/svg/folder-move.svg?raw'
 import IconCopy from '@mdi/svg/svg/folder-multiple-outline.svg?raw'
-
-import OC from './index.js'
-import { DialogBuilder, FilePickerType, getFilePickerBuilder, spawnDialog } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
+import { DialogBuilder, FilePickerType, getFilePickerBuilder } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { basename } from 'path'
 import { defineAsyncComponent } from 'vue'
 
diff --git a/core/src/components/PublicPageMenu/PublicPageMenuExternalEntry.vue b/core/src/components/PublicPageMenu/PublicPageMenuExternalEntry.vue
index a4451a38bbe..5c8b068a7c3 100644
--- a/core/src/components/PublicPageMenu/PublicPageMenuExternalEntry.vue
+++ b/core/src/components/PublicPageMenu/PublicPageMenuExternalEntry.vue
@@ -3,19 +3,23 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
  -->
 <template>
-	<PublicPageMenuEntry :id="id"
-		:icon="icon"
-		href="#"
-		:label="label"
-		@click="openDialog" />
+	<Fragment>
+		<PublicPageMenuEntry :id="id"
+			:icon="icon"
+			href="#"
+			:label="label"
+			@click="openDialog" />
+		<PublicPageMenuExternalDialog v-if="showDialog" :label="label" />
+	</Fragment>
 </template>
 
 <script setup lang="ts">
-import { spawnDialog } from '@nextcloud/dialogs'
+import { ref } from 'vue'
+import { Fragment } from 'vue-frag'
 import PublicPageMenuEntry from './PublicPageMenuEntry.vue'
 import PublicPageMenuExternalDialog from './PublicPageMenuExternalDialog.vue'
 
-const props = defineProps<{
+defineProps<{
 	id: string
 	label: string
 	icon: string
@@ -26,11 +30,13 @@ const emit = defineEmits<{
 	(e: 'click'): void
 }>()
 
+const showDialog = ref(false)
+
 /**
  * Open the "create federated share" dialog
  */
 function openDialog() {
-	spawnDialog(PublicPageMenuExternalDialog, { label: props.label })
+	showDialog.value = true
 	emit('click')
 }
 </script>