diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 4c2b8a3a4b008..498ccc279a3f8 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -8,20 +8,20 @@
 		<NewUserDialog
 			v-if="showConfig.showNewUserForm"
 			:loading="loading"
-			:new-user="newUser"
-			:quota-options="quotaOptions"
+			:newUser="newUser"
+			:quotaOptions="quotaOptions"
 			@closing="closeDialog" />
 
 		<EditUserDialog
 			v-if="editingUser"
 			:user="editingUser"
-			:quota-options="quotaOptions"
+			:quotaOptions="quotaOptions"
 			@closing="editingUser = null" />
 
 		<NcEmptyContent
 			v-if="filteredUsers.length === 0"
 			class="empty"
-			:name="isInitialLoad && loading.users ? null : t('settings', 'No accounts')">
+			:name="isInitialLoad && loading.users ? undefined : t('settings', 'No accounts')">
 			<template #icon>
 				<NcLoadingIcon
 					v-if="isInitialLoad && loading.users"
@@ -37,9 +37,9 @@
 			:data-sources="filteredUsers"
 			data-key="id"
 			data-cy-user-list
-			:item-height="rowHeight"
+			:itemHeight="rowHeight"
 			:style="style"
-			:extra-props="{
+			:extraProps="{
 				users,
 				settings,
 				quotaOptions,
@@ -47,7 +47,7 @@
 				externalActions,
 				onEditUser: openEditDialog,
 			}"
-			@scroll-end="handleScrollEnd">
+			@scrollEnd="handleScrollEnd">
 			<template #before>
 				<caption class="hidden-visually">
 					{{ t('settings', 'List of accounts. This list is not fully rendered for performance reasons. The accounts will be rendered as you navigate through the list.') }}
@@ -61,16 +61,22 @@
 			<template #footer>
 				<UserListFooter
 					:loading="loading.users"
-					:filtered-users="filteredUsers" />
+					:filteredUsers="filteredUsers" />
 			</template>
 		</VirtualList>
 	</Fragment>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { IUser } from '../views/user-types.d.ts'
+import type { FormData } from './Users/userFormUtils.ts'
+
 import { mdiAccountGroupOutline } from '@mdi/js'
 import { showError } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
+import { computed, reactive, ref, watch } from 'vue'
 import { Fragment } from 'vue-frag'
+import { useRouter } from 'vue-router/composables'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
@@ -81,9 +87,19 @@ import UserListHeader from './Users/UserListHeader.vue'
 import UserRow from './Users/UserRow.vue'
 import VirtualList from './Users/VirtualList.vue'
 import logger from '../logger.ts'
+import { useStore } from '../store/index.js'
 import { defaultQuota, unlimitedQuota } from '../utils/userUtils.ts'
 
-const newUser = Object.freeze({
+const props = withDefaults(defineProps<{
+	selectedGroup?: string | null
+	externalActions?: { icon: string, text: string, action: (...args: unknown[]) => void }[]
+}>(), {
+	selectedGroup: null,
+	externalActions: () => [],
+})
+const rowHeight = 55
+
+const defaultNewUser = Object.freeze({
 	username: '',
 	displayName: '',
 	password: '',
@@ -98,301 +114,227 @@ const newUser = Object.freeze({
 	},
 })
 
-export default {
-	name: 'UserList',
-
-	components: {
-		EditUserDialog,
-		Fragment,
-		NcEmptyContent,
-		NcIconSvgWrapper,
-		NcLoadingIcon,
-		NewUserDialog,
-		UserListFooter,
-		UserListHeader,
-		VirtualList,
-	},
+const store = useStore()
+const router = useRouter()
 
-	props: {
-		selectedGroup: {
-			type: String,
-			default: null,
-		},
+const loading = reactive({
+	all: false,
+	groups: false,
+	users: false,
+})
+const newUser = reactive<FormData>({ ...defaultNewUser })
+const editingUser = ref<IUser | null>(null)
+const isInitialLoad = ref(true)
+
+const searchQuery = computed(() => store.getters.getSearchQuery)
+const showConfig = computed(() => store.getters.getShowConfig)
+const settings = computed(() => store.getters.getServerData)
+const style = computed(() => ({ '--row-height': `${rowHeight}px` }))
+const users = computed(() => store.getters.getUsers)
+
+const filteredUsers = computed(() => {
+	if (props.selectedGroup === 'disabled') {
+		return users.value.filter((user) => user.enabled === false)
+	}
+	return users.value.filter((user) => user.enabled !== false)
+})
 
-		externalActions: {
-			type: Array,
-			default: () => [],
-		},
-	},
+const groups = computed(() => store.getters.getSortedGroups
+	.filter((group) => group.id !== '__nc_internal_recent' && group.id !== 'disabled'))
+
+const quotaOptions = computed(() => {
+	// convert the preset array into objects
+	const quotaPreset = settings.value.quotaPreset.reduce((acc, cur) => acc.concat({
+		id: cur,
+		label: cur,
+	}), [])
+	// add default presets
+	if (settings.value.allowUnlimitedQuota) {
+		quotaPreset.unshift(unlimitedQuota)
+	}
+	quotaPreset.unshift(defaultQuota)
+	return quotaPreset
+})
 
-	setup() {
-		// non reactive properties
-		return {
-			mdiAccountGroupOutline,
-			rowHeight: 55,
+const usersOffset = computed(() => store.getters.getUsersOffset)
+const usersLimit = computed(() => store.getters.getUsersLimit)
+const disabledUsersOffset = computed(() => store.getters.getDisabledUsersOffset)
+const disabledUsersLimit = computed(() => store.getters.getDisabledUsersLimit)
 
-			UserRow,
-		}
+/* LANGUAGES */
+const languages = computed(() => [
+	{
+		label: t('settings', 'Common languages'),
+		languages: settings.value.languages.commonLanguages,
 	},
-
-	data() {
-		return {
-			loading: {
-				all: false,
-				groups: false,
-				users: false,
-			},
-
-			newUser: { ...newUser },
-			editingUser: null,
-			isInitialLoad: true,
-		}
+	{
+		label: t('settings', 'Other languages'),
+		languages: settings.value.languages.otherLanguages,
 	},
+])
 
-	computed: {
-		searchQuery() {
-			return this.$store.getters.getSearchQuery
-		},
+watch(searchQuery, async () => {
+	store.commit('resetUsers')
+	await loadUsers()
+})
 
-		showConfig() {
-			return this.$store.getters.getShowConfig
-		},
+// watch url change and group select
+watch(() => props.selectedGroup, async (val) => {
+	isInitialLoad.value = true
+	// if selected is the disabled group but it's empty
+	await redirectIfDisabled()
+	store.commit('resetUsers')
+	await loadUsers()
+	setNewUserDefaultGroup(val)
+})
 
-		settings() {
-			return this.$store.getters.getServerData
-		},
+watch(filteredUsers, (value) => {
+	logger.debug(`${value.length} filtered user(s)`)
+})
 
-		style() {
-			return {
-				'--row-height': `${this.rowHeight}px`,
-			}
-		},
+/**
+ * Open the edit dialog for a user.
+ *
+ * @param user The user to edit
+ */
+function openEditDialog(user: IUser) {
+	editingUser.value = user
+}
 
-		users() {
-			return this.$store.getters.getUsers
-		},
+/**
+ * Load the next page when the list scrolls to the end.
+ */
+async function handleScrollEnd() {
+	await loadUsers()
+}
 
-		filteredUsers() {
-			if (this.selectedGroup === 'disabled') {
-				return this.users.filter((user) => user.enabled === false)
-			}
-			return this.users.filter((user) => user.enabled !== false)
-		},
-
-		groups() {
-			return this.$store.getters.getSortedGroups
-				.filter((group) => group.id !== '__nc_internal_recent' && group.id !== 'disabled')
-		},
-
-		quotaOptions() {
-			// convert the preset array into objects
-			const quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({
-				id: cur,
-				label: cur,
-			}), [])
-			// add default presets
-			if (this.settings.allowUnlimitedQuota) {
-				quotaPreset.unshift(unlimitedQuota)
-			}
-			quotaPreset.unshift(defaultQuota)
-			return quotaPreset
-		},
-
-		usersOffset() {
-			return this.$store.getters.getUsersOffset
-		},
-
-		usersLimit() {
-			return this.$store.getters.getUsersLimit
-		},
-
-		disabledUsersOffset() {
-			return this.$store.getters.getDisabledUsersOffset
-		},
-
-		disabledUsersLimit() {
-			return this.$store.getters.getDisabledUsersLimit
-		},
-
-		usersCount() {
-			return this.users.length
-		},
-
-		/* LANGUAGES */
-		languages() {
-			return [
-				{
-					label: t('settings', 'Common languages'),
-					languages: this.settings.languages.commonLanguages,
-				},
-				{
-					label: t('settings', 'Other languages'),
-					languages: this.settings.languages.otherLanguages,
-				},
-			]
-		},
-	},
+/**
+ * Load accounts for the current selection (disabled, recent, or a group).
+ */
+async function loadUsers() {
+	loading.users = true
+	try {
+		if (props.selectedGroup === 'disabled') {
+			await store.dispatch('getDisabledUsers', {
+				offset: disabledUsersOffset.value,
+				limit: disabledUsersLimit.value,
+				search: searchQuery.value,
+			})
+		} else if (props.selectedGroup === '__nc_internal_recent') {
+			await store.dispatch('getRecentUsers', {
+				offset: usersOffset.value,
+				limit: usersLimit.value,
+				search: searchQuery.value,
+			})
+		} else {
+			await store.dispatch('getUsers', {
+				offset: usersOffset.value,
+				limit: usersLimit.value,
+				group: props.selectedGroup,
+				search: searchQuery.value,
+			})
+		}
+		logger.debug(`${users.value.length} total user(s) loaded`)
+	} catch (error) {
+		logger.error('Failed to load accounts', { error })
+		showError('Failed to load accounts')
+	}
+	loading.users = false
+	isInitialLoad.value = false
+}
 
-	watch: {
-		async searchQuery() {
-			this.$store.commit('resetUsers')
-			await this.loadUsers()
-		},
-
-		// watch url change and group select
-		async selectedGroup(val) {
-			this.isInitialLoad = true
-			// if selected is the disabled group but it's empty
-			await this.redirectIfDisabled()
-			this.$store.commit('resetUsers')
-			await this.loadUsers()
-			this.setNewUserDefaultGroup(val)
-		},
-
-		filteredUsers(filteredUsers) {
-			logger.debug(`${filteredUsers.length} filtered user(s)`)
-		},
-	},
+/**
+ * Close the new-account dialog and reset the form.
+ */
+function closeDialog() {
+	store.dispatch('setShowConfig', {
+		key: 'showNewUserForm',
+		value: false,
+	})
+	resetForm()
+}
 
-	async created() {
-		await this.loadUsers()
-	},
+/**
+ * Reset the new user form to its initial state.
+ * Uses in-place mutation (Object.assign + splice) so the
+ * provide/inject reference stays intact.
+ */
+function resetForm() {
+	Object.assign(newUser, {
+		...defaultNewUser,
+		groups: [],
+		subadminGroups: [],
+	})
+	newUser.groups.splice(0)
+	newUser.subadminGroups.splice(0)
+	initForm()
+}
 
-	async mounted() {
-		if (!this.settings.canChangePassword) {
-			OC.Notification.showTemporary(t('settings', 'Password change is disabled because the master key is disabled'))
+/**
+ * Initialise the new-account form defaults (language and group).
+ */
+function initForm() {
+	// Set the default language directly (not via a computed) to keep the form's v-model binding intact.
+	if (settings.value.defaultLanguage) {
+		newUser.language.code = settings.value.defaultLanguage
+	}
+	setNewUserDefaultGroup(props.selectedGroup)
+	loading.all = false
+}
+
+/**
+ * Preselect the new account's group from the current selection or role.
+ *
+ * @param value The currently selected group id, or null
+ */
+function setNewUserDefaultGroup(value: string | null) {
+	// Is no value set, but user is a line manager we set their group as this is a requirement for line manager
+	if (!value && !settings.value.isAdmin && !settings.value.isDelegatedAdmin) {
+		const subAdminGroups = store.getters.getSubAdminGroups
+		// if there are multiple groups we do not know which to add,
+		// so we cannot make the managers life easier by preselecting it.
+		if (subAdminGroups.length === 1) {
+			newUser.groups = [...subAdminGroups]
 		}
+		return
+	}
 
-		/**
-		 * Reset and init new user form
-		 */
-		this.initForm()
+	if (value) {
+		// setting new account default group to the current selected one
+		const currentGroup = groups.value.find((group) => group.id === value)
+		if (currentGroup) {
+			newUser.groups = [currentGroup]
+			return
+		}
+	}
+	// fallback, empty selected group
+	newUser.groups = []
+}
 
-		/**
-		 * If disabled group but empty, redirect
-		 */
-		await this.redirectIfDisabled()
-	},
+/**
+ * If the selected group is the disabled group but the count is 0
+ * redirect to the all users page.
+ * we only check for 0 because we don't have the count on ldap
+ * and we therefore set the usercount to -1 in this specific case
+ */
+async function redirectIfDisabled() {
+	const allGroups = store.getters.getGroups
+	if (props.selectedGroup === 'disabled'
+		&& allGroups.findIndex((group) => group.id === 'disabled' && group.usercount === 0) > -1) {
+		// disabled group is empty, redirection to all users
+		router.push({ name: 'users' })
+		await loadUsers()
+	}
+}
 
-	methods: {
-		openEditDialog(user) {
-			this.editingUser = user
-		},
-
-		async handleScrollEnd() {
-			await this.loadUsers()
-		},
-
-		async loadUsers() {
-			this.loading.users = true
-			try {
-				if (this.selectedGroup === 'disabled') {
-					await this.$store.dispatch('getDisabledUsers', {
-						offset: this.disabledUsersOffset,
-						limit: this.disabledUsersLimit,
-						search: this.searchQuery,
-					})
-				} else if (this.selectedGroup === '__nc_internal_recent') {
-					await this.$store.dispatch('getRecentUsers', {
-						offset: this.usersOffset,
-						limit: this.usersLimit,
-						search: this.searchQuery,
-					})
-				} else {
-					await this.$store.dispatch('getUsers', {
-						offset: this.usersOffset,
-						limit: this.usersLimit,
-						group: this.selectedGroup,
-						search: this.searchQuery,
-					})
-				}
-				logger.debug(`${this.users.length} total user(s) loaded`)
-			} catch (error) {
-				logger.error('Failed to load accounts', { error })
-				showError('Failed to load accounts')
-			}
-			this.loading.users = false
-			this.isInitialLoad = false
-		},
-
-		closeDialog() {
-			this.$store.dispatch('setShowConfig', {
-				key: 'showNewUserForm',
-				value: false,
-			})
-			this.resetForm()
-		},
-
-		/**
-		 * Reset the new user form to its initial state.
-		 * Uses in-place mutation (Object.assign + splice) so the
-		 * provide/inject reference stays intact.
-		 */
-		resetForm() {
-			Object.assign(this.newUser, {
-				...newUser,
-				groups: [],
-				subadminGroups: [],
-			})
-			this.newUser.groups.splice(0)
-			this.newUser.subadminGroups.splice(0)
-			this.initForm()
-		},
-
-		initForm() {
-			/**
-			 * Init default language from server data. The use of this.settings
-			 * requires a computed variable, which break the v-model binding of the form,
-			 * this is a much easier solution than getter and setter on a computed var
-			 */
-			if (this.settings.defaultLanguage) {
-				this.newUser.language.code = this.settings.defaultLanguage
-			}
-			this.setNewUserDefaultGroup(this.selectedGroup)
-			this.loading.all = false
-		},
-
-		setNewUserDefaultGroup(value) {
-			// Is no value set, but user is a line manager we set their group as this is a requirement for line manager
-			if (!value && !this.settings.isAdmin && !this.settings.isDelegatedAdmin) {
-				const groups = this.$store.getters.getSubAdminGroups
-				// if there are multiple groups we do not know which to add,
-				// so we cannot make the managers life easier by preselecting it.
-				if (groups.length === 1) {
-					this.newUser.groups = [...groups]
-				}
-				return
-			}
+// Setup-body work runs once, unawaited, matching the original created/mounted lifecycle.
+loadUsers()
 
-			if (value) {
-				// setting new account default group to the current selected one
-				const currentGroup = this.groups.find((group) => group.id === value)
-				if (currentGroup) {
-					this.newUser.groups = [currentGroup]
-					return
-				}
-			}
-			// fallback, empty selected group
-			this.newUser.groups = []
-		},
-
-		/**
-		 * If the selected group is the disabled group but the count is 0
-		 * redirect to the all users page.
-		 * we only check for 0 because we don't have the count on ldap
-		 * and we therefore set the usercount to -1 in this specific case
-		 */
-		async redirectIfDisabled() {
-			const allGroups = this.$store.getters.getGroups
-			if (this.selectedGroup === 'disabled'
-				&& allGroups.findIndex((group) => group.id === 'disabled' && group.usercount === 0) > -1) {
-				// disabled group is empty, redirection to all users
-				this.$router.push({ name: 'users' })
-				await this.loadUsers()
-			}
-		},
-	},
+if (!settings.value.canChangePassword) {
+	window.OC.Notification.showTemporary(t('settings', 'Password change is disabled because the master key is disabled'))
 }
+initForm()
+redirectIfDisabled()
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/settings/src/components/Users/EditUserDialog.vue b/apps/settings/src/components/Users/EditUserDialog.vue
index ef592b05381e6..cc46486b48bd3 100644
--- a/apps/settings/src/components/Users/EditUserDialog.vue
+++ b/apps/settings/src/components/Users/EditUserDialog.vue
@@ -36,113 +36,94 @@
 	</NcDialog>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { IUser } from '../../views/user-types.d.ts'
+import type { QuotaOption } from './userFormUtils.ts'
+
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
+import { computed, provide, reactive, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import UserFormFields from './UserFormFields.vue'
 import logger from '../../logger.ts'
+import { useStore } from '../../store/index.js'
+import { formDataKey } from './injectionKeys.ts'
 import { diffPayload, userToFormData } from './userFormUtils.ts'
 
-export default {
-	name: 'EditUserDialog',
+const props = defineProps<{
+	user: IUser
+	quotaOptions: QuotaOption[]
+}>()
 
-	components: {
-		NcButton,
-		NcDialog,
-		UserFormFields,
-	},
+const emit = defineEmits<{
+	closing: []
+}>()
 
-	// Children inject this reactive object and mutate its properties via v-model.
-	// Do not reassign editedUser entirely, the injected reference would go stale.
-	provide() {
-		return {
-			formData: this.editedUser,
-		}
-	},
+const store = useStore()
 
-	props: {
-		user: {
-			type: Object,
-			required: true,
-		},
+const allGroups = store.getters.getGroups
+const serverLanguages = store.getters.getServerData.languages
+const formData = userToFormData(props.user, allGroups, props.quotaOptions, serverLanguages)
 
-		quotaOptions: {
-			type: Array,
-			required: true,
-		},
-	},
+const initialData = structuredClone(formData)
+// Children inject and mutate this object's properties; never reassign it or the
+// injected reference goes stale.
+const editedUser = reactive(formData)
+const saving = ref(false)
+const fieldErrors = ref<Record<string, string>>({})
 
-	emits: ['closing'],
-
-	data() {
-		const allGroups = this.$store.getters.getGroups
-		const serverLanguages = this.$store.getters.getServerData.languages
-		const formData = userToFormData(this.user, allGroups, this.quotaOptions, serverLanguages)
-		return {
-			/** Snapshot of initial state for diffing */
-			initialData: structuredClone(formData),
-			/** Mutable form state */
-			editedUser: formData,
-			saving: false,
-			fieldErrors: {},
-		}
-	},
+provide(formDataKey, editedUser)
+
+const settings = computed(() => store.getters.getServerData)
 
-	computed: {
-		settings() {
-			return this.$store.getters.getServerData
-		},
-
-		fieldConfig() {
-			return {
-				username: {
-					show: true,
-					disabled: true,
-					label: t('settings', 'Account name'),
-				},
-
-				password: {
-					show: this.settings.canChangePassword && this.user.backendCapabilities.setPassword,
-					label: t('settings', 'New password'),
-				},
-			}
-		},
+const fieldConfig = computed(() => ({
+	username: {
+		show: true,
+		disabled: true,
+		label: t('settings', 'Account name'),
 	},
 
-	methods: {
-		async save() {
-			this.fieldErrors = {}
-
-			const payload = diffPayload(this.initialData, this.editedUser)
-			if (Object.keys(payload).length === 0) {
-				this.$emit('closing')
-				return
-			}
-
-			this.saving = true
-			try {
-				await confirmPassword()
-				await this.$store.dispatch('editUserMultiField', {
-					userid: this.user.id,
-					payload,
-				})
-				showSuccess(t('settings', 'Account updated'))
-				this.$emit('closing')
-			} catch (error) {
-				const errors = error.response?.data?.ocs?.data?.errors
-				if (errors && typeof errors === 'object') {
-					this.fieldErrors = errors
-				} else {
-					logger.error('Failed to update account', { error })
-					showError(t('settings', 'Failed to update account'))
-				}
-			} finally {
-				this.saving = false
-			}
-		},
+	password: {
+		show: settings.value.canChangePassword && props.user.backendCapabilities.setPassword,
+		label: t('settings', 'New password'),
 	},
+}))
+
+/**
+ * Submit the changed fields; map a 422 to per-field errors, else close.
+ */
+async function save() {
+	fieldErrors.value = {}
+
+	const payload = diffPayload(initialData, editedUser)
+	if (Object.keys(payload).length === 0) {
+		emit('closing')
+		return
+	}
+
+	saving.value = true
+	try {
+		await confirmPassword()
+		await store.dispatch('editUserMultiField', {
+			userid: props.user.id,
+			payload,
+		})
+		showSuccess(t('settings', 'Account updated'))
+		emit('closing')
+	} catch (error) {
+		const errors = (error as { response?: { data?: { ocs?: { data?: { errors?: Record<string, string> } } } } })
+			.response?.data?.ocs?.data?.errors
+		if (errors && typeof errors === 'object') {
+			fieldErrors.value = errors
+		} else {
+			logger.error('Failed to update account', { error })
+			showError(t('settings', 'Failed to update account'))
+		}
+	} finally {
+		saving.value = false
+	}
 }
 </script>
 
diff --git a/apps/settings/src/components/Users/NewUserDialog.vue b/apps/settings/src/components/Users/NewUserDialog.vue
index 7674fb7748a84..ab6bb4c14e0a8 100644
--- a/apps/settings/src/components/Users/NewUserDialog.vue
+++ b/apps/settings/src/components/Users/NewUserDialog.vue
@@ -8,8 +8,8 @@
 		class="dialog"
 		size="small"
 		:name="t('settings', 'New account')"
-		out-transition
-		v-on="$listeners">
+		outTransition
+		@closing="$emit('closing')">
 		<form
 			id="new-user-form"
 			class="dialog__form"
@@ -18,8 +18,8 @@
 			@submit.prevent="createUser">
 			<UserFormFields
 				ref="fields"
-				:field-config="fieldConfig"
-				:quota-options="quotaOptions" />
+				:fieldConfig="fieldConfig"
+				:quotaOptions="quotaOptions" />
 		</form>
 
 		<template #actions>
@@ -35,128 +35,103 @@
 	</NcDialog>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { FormData, QuotaOption } from './userFormUtils.ts'
+
+import { translate as t } from '@nextcloud/l10n'
+import { computed, onMounted, provide, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import UserFormFields from './UserFormFields.vue'
+import { useStore } from '../../store/index.js'
+import { formDataKey } from './injectionKeys.ts'
 
-export default {
-	name: 'NewUserDialog',
+const props = defineProps<{
+	loading: { all: boolean }
+	newUser: FormData
+	quotaOptions: QuotaOption[]
+}>()
 
-	components: {
-		NcButton,
-		NcDialog,
-		UserFormFields,
-	},
+const emit = defineEmits<{
+	closing: []
+}>()
 
-	// Children inject this reactive object and mutate its properties via v-model.
-	// Do not reassign newUser entirely, the injected reference would go stale.
-	provide() {
-		return {
-			formData: this.newUser,
-		}
-	},
+const store = useStore()
 
-	props: {
-		loading: {
-			type: Object,
-			required: true,
-		},
-
-		newUser: {
-			type: Object,
-			required: true,
-		},
-
-		quotaOptions: {
-			type: Array,
-			required: true,
-		},
-	},
+const fields = ref<{ focusField: (name: 'username' | 'password') => void } | null>(null)
 
-	emits: ['closing'],
+// Children inject and mutate this object's properties; never reassign it or the
+// injected reference goes stale.
+provide(formDataKey, props.newUser)
 
-	computed: {
-		settings() {
-			return this.$store.getters.getServerData
-		},
+const settings = computed(() => store.getters.getServerData)
 
-		usernameLabel() {
-			if (this.settings.newUserGenerateUserID) {
-				return t('settings', 'Account name will be autogenerated')
-			}
-			return t('settings', 'Account name (required)')
-		},
-
-		/**
-		 * Reactive field configuration passed to UserFormFields.
-		 * Controls visibility, labels, and required state for each field
-		 * based on the current form values and server settings.
-		 */
-		fieldConfig() {
-			return {
-				username: {
-					show: true,
-					label: this.usernameLabel,
-					disabled: this.settings.newUserGenerateUserID,
-					required: true,
-				},
-
-				password: {
-					label: this.newUser.email === ''
-						? t('settings', 'Password (required)')
-						: t('settings', 'Password'),
-
-					required: this.newUser.email === '',
-				},
-
-				email: {
-					label: this.newUser.password === '' || this.settings.newUserRequireEmail
-						? t('settings', 'Email (required)')
-						: t('settings', 'Email'),
-
-					required: this.newUser.password === '' || this.settings.newUserRequireEmail,
-				},
-
-				showPasswordEmailHint: !this.settings.newUserRequireEmail,
-			}
-		},
+const usernameLabel = computed(() => settings.value.newUserGenerateUserID
+	? t('settings', 'Account name will be autogenerated')
+	: t('settings', 'Account name (required)'))
+
+const fieldConfig = computed(() => ({
+	username: {
+		show: true,
+		label: usernameLabel.value,
+		disabled: settings.value.newUserGenerateUserID,
+		required: true,
 	},
 
-	mounted() {
-		this.$refs.fields?.focusField('username')
+	password: {
+		label: props.newUser.email === ''
+			? t('settings', 'Password (required)')
+			: t('settings', 'Password'),
+
+		required: props.newUser.email === '',
 	},
 
-	methods: {
-		async createUser() {
-			this.loading.all = true
-			try {
-				await this.$store.dispatch('addUser', {
-					userid: this.newUser.username,
-					password: this.newUser.password,
-					displayName: this.newUser.displayName,
-					email: this.newUser.email,
-					groups: this.newUser.groups.map(({ id }) => id),
-					subadmin: this.newUser.subadminGroups.map(({ id }) => id),
-					quota: this.newUser.quota.id,
-					language: this.newUser.language.code,
-					manager: this.newUser.manager.id,
-				})
-
-				this.$emit('closing')
-			} catch (error) {
-				this.loading.all = false
-				if (error.response?.data?.ocs?.meta) {
-					const statuscode = error.response.data.ocs.meta.statuscode
-					if (statuscode === 102) {
-						this.$refs.fields?.focusField('username')
-					} else if (statuscode === 107) {
-						this.$refs.fields?.focusField('password')
-					}
-				}
-			}
-		},
+	email: {
+		label: props.newUser.password === '' || settings.value.newUserRequireEmail
+			? t('settings', 'Email (required)')
+			: t('settings', 'Email'),
+
+		required: props.newUser.password === '' || settings.value.newUserRequireEmail,
 	},
+
+	showPasswordEmailHint: !settings.value.newUserRequireEmail,
+}))
+
+onMounted(() => fields.value?.focusField('username'))
+
+/**
+ * Create the account from the current form state.
+ */
+async function createUser() {
+	props.loading.all = true
+	try {
+		await store.dispatch('addUser', {
+			userid: props.newUser.username,
+			password: props.newUser.password,
+			displayName: props.newUser.displayName,
+			email: props.newUser.email,
+			groups: props.newUser.groups.map(({ id }) => id),
+			subadmin: props.newUser.subadminGroups.map(({ id }) => id),
+			quota: props.newUser.quota.id,
+			language: props.newUser.language.code,
+			manager: (props.newUser.manager as { id?: string }).id,
+		})
+
+		emit('closing')
+	} catch (error) {
+		props.loading.all = false
+		const meta = (error as { response?: { data?: { ocs?: { meta?: { statuscode?: number } } } } })
+			.response?.data?.ocs?.meta
+		if (meta) {
+			if (meta.statuscode === 102) {
+				// Username already taken.
+				fields.value?.focusField('username')
+			} else if (meta.statuscode === 107) {
+				// Password policy rejected.
+				fields.value?.focusField('password')
+			}
+		}
+	}
 }
 </script>
 
diff --git a/apps/settings/src/components/Users/UserFormFields.vue b/apps/settings/src/components/Users/UserFormFields.vue
index 85f44a922b28f..2e408e8329b6e 100644
--- a/apps/settings/src/components/Users/UserFormFields.vue
+++ b/apps/settings/src/components/Users/UserFormFields.vue
@@ -38,7 +38,7 @@
 			data-test="displayName"
 			:label="t('settings', 'Display name')"
 			:error="!!errors.displayName"
-			:helper-text="errors.displayName"
+			:helperText="errors.displayName"
 			autocapitalize="none"
 			autocomplete="off"
 			spellcheck="false" />
@@ -61,7 +61,7 @@
 			:aria-describedby="fieldConfig.showPasswordEmailHint ? 'password-email-hint' : undefined"
 			:label="fieldConfig.password?.label"
 			:error="!!errors.password"
-			:helper-text="errors.password"
+			:helperText="errors.password"
 			autocapitalize="none"
 			autocomplete="new-password"
 			spellcheck="false"
@@ -75,14 +75,14 @@
 			:aria-describedby="fieldConfig.showPasswordEmailHint ? 'password-email-hint' : undefined"
 			:label="fieldConfig.email?.label || t('settings', 'Email')"
 			:error="!!errors.email"
-			:helper-text="errors.email"
+			:helperText="errors.email"
 			autocapitalize="none"
 			autocomplete="off"
 			spellcheck="false"
 			:required="fieldConfig.email?.required" />
 
 		<UserFormGroups />
-		<UserFormQuota :quota-options="quotaOptions" />
+		<UserFormQuota :quotaOptions="quotaOptions" />
 		<UserFormLanguage />
 		<UserFormManager />
 
@@ -99,84 +99,62 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { QuotaOption } from './userFormUtils.ts'
+
+import { translate as t } from '@nextcloud/l10n'
+import { computed, inject, ref } from 'vue'
 import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import UserFormGroups from './UserFormGroups.vue'
 import UserFormLanguage from './UserFormLanguage.vue'
 import UserFormManager from './UserFormManager.vue'
 import UserFormQuota from './UserFormQuota.vue'
+import { useStore } from '../../store/index.js'
+import { formDataKey } from './injectionKeys.ts'
+
+interface FieldConfig {
+	username?: { show?: boolean, disabled?: boolean, label?: string, required?: boolean }
+	password?: { show?: boolean, label?: string, required?: boolean }
+	email?: { label?: string, required?: boolean }
+	showPasswordEmailHint?: boolean
+}
+
+const props = withDefaults(defineProps<{
+	quotaOptions: QuotaOption[]
+	fieldConfig?: FieldConfig
+	errors?: Record<string, string>
+}>(), {
+	fieldConfig: () => ({}),
+	errors: () => ({}),
+})
+
+const store = useStore()
+
+const formData = inject(formDataKey)!
+
+const username = ref<{ focus?: () => void } | null>(null)
+const password = ref<{ focus?: () => void } | null>(null)
+
+const minPasswordLength = computed(() => store.getters.getPasswordPolicyMinLength)
+
+// Errors not bound to a dedicated input, shown in the catch-all live region.
+const unhandledErrors = computed(() => {
+	const handled = new Set(['displayName', 'password', 'email'])
+	return Object.fromEntries(Object.entries(props.errors).filter(([key]) => !handled.has(key)))
+})
 
 /**
- * Shared form fields for creating and editing user accounts.
+ * Focus a field. Exposed so the parent dialog can call it on mount or on a 422.
  *
- * Injects a reactive `formData` object (provided by the parent dialog)
- * and binds directly to its properties via v-model. Complex field logic
- * (groups, quota, language, manager) is delegated to dedicated sub-components
- * that also inject the same formData.
- *
- * Expected formData shape:
- *   { username, displayName, password, email, groups, subadminGroups, quota, language, manager }
+ * @param name The field to focus
  */
-export default {
-	name: 'UserFormFields',
-
-	components: {
-		NcPasswordField,
-		NcTextField,
-		UserFormGroups,
-		UserFormLanguage,
-		UserFormManager,
-		UserFormQuota,
-	},
-
-	inject: ['formData'],
-
-	props: {
-		/** Quota preset options for the quota select */
-		quotaOptions: {
-			type: Array,
-			required: true,
-		},
-
-		/**
-		 * Per-field configuration for visibility, labels, and required state.
-		 * Only fields that differ from defaults need to be specified.
-		 *
-		 * Example: { username: { show: true, label: 'Account name', required: true },
-		 *            password: { show: true, label: 'Password', required: false },
-		 *            email: { label: 'Email (required)', required: true },
-		 *            showPasswordEmailHint: true }
-		 */
-		fieldConfig: {
-			type: Object,
-			default: () => ({}),
-		},
-
-		/** Per-field error messages from 422 validation (e.g. { email: 'Invalid' }) */
-		errors: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-
-	computed: {
-		minPasswordLength() {
-			return this.$store.getters.getPasswordPolicyMinLength
-		},
-
-		unhandledErrors() {
-			const handled = new Set(['displayName', 'password', 'email'])
-			return Object.fromEntries(Object.entries(this.errors).filter(([key]) => !handled.has(key)))
-		},
-	},
-
-	methods: {
-		focusField(name) {
-			this.$refs[name]?.focus?.()
-		},
-	},
+function focusField(name: 'username' | 'password') {
+	const field = name === 'username' ? username : password
+	field.value?.focus?.()
 }
+
+defineExpose({ focusField })
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/settings/src/components/Users/UserFormGroups.vue b/apps/settings/src/components/Users/UserFormGroups.vue
index 8e28ec6fe54a2..2e6268f7ea12a 100644
--- a/apps/settings/src/components/Users/UserFormGroups.vue
+++ b/apps/settings/src/components/Users/UserFormGroups.vue
@@ -10,16 +10,16 @@
 				v-model="formData.groups"
 				class="user-form__select"
 				data-test="groups"
-				:input-label="groupsLabel"
+				:inputLabel="groupsLabel"
 				:placeholder="t('settings', 'Set account groups')"
 				:disabled="creatingGroup"
 				:options="availableGroups"
 				label="name"
-				keep-open
+				keepOpen
 				:multiple="true"
 				:taggable="settings.isAdmin || settings.isDelegatedAdmin"
 				:required="!settings.isAdmin && !settings.isDelegatedAdmin"
-				:create-option="(value) => ({ id: value, name: value, isCreating: true })"
+				:createOption="(value) => ({ id: value, name: value, isCreating: true })"
 				@search="searchGroups"
 				@option:created="createGroup" />
 		</div>
@@ -30,11 +30,11 @@
 			<NcSelect
 				v-model="formData.subadminGroups"
 				class="user-form__select"
-				:input-label="t('settings', 'Admin of the following groups')"
+				:inputLabel="t('settings', 'Admin of the following groups')"
 				:placeholder="t('settings', 'Set account as admin for …')"
 				:disabled="creatingGroup"
 				:options="availableSubAdminGroups"
-				keep-open
+				keepOpen
 				:multiple="true"
 				label="name"
 				@search="searchGroups" />
@@ -42,84 +42,84 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { IGroup } from '../../views/user-types.d.ts'
+
+import { translate as t } from '@nextcloud/l10n'
+import { computed, inject, ref } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import logger from '../../logger.ts'
-import { searchGroups } from '../../service/groups.ts'
-
-export default {
-	name: 'UserFormGroups',
-
-	components: {
-		NcSelect,
-	},
-
-	inject: ['formData'],
-
-	data() {
-		return {
-			creatingGroup: false,
-			promise: null,
+import { searchGroups as searchGroupsApi } from '../../service/groups.ts'
+import { useStore } from '../../store/index.js'
+import { formDataKey } from './injectionKeys.ts'
+
+const store = useStore()
+
+const formData = inject(formDataKey)!
+
+const creatingGroup = ref(false)
+// Kept so a new search can cancel the in-flight one.
+let promise: ReturnType<typeof searchGroupsApi> | null = null
+
+const settings = computed(() => store.getters.getServerData)
+
+const availableGroups = computed(() => {
+	const groups = (settings.value.isAdmin || settings.value.isDelegatedAdmin)
+		? store.getters.getSortedGroups
+		: store.getters.getSubAdminGroups
+
+	return groups.filter(({ id }) => id !== '__nc_internal_recent' && id !== 'disabled')
+})
+
+const availableSubAdminGroups = computed(() => availableGroups.value.filter(({ id }) => id !== 'admin'))
+
+const groupsLabel = computed(() => !settings.value.isAdmin && !settings.value.isDelegatedAdmin
+	? t('settings', 'Member of the following groups (required)')
+	: t('settings', 'Member of the following groups'))
+
+/**
+ * Search groups from the backend and add them to the store.
+ *
+ * @param query The current search string
+ * @param toggleLoading NcSelect callback to toggle its spinner
+ */
+async function searchGroups(query: string, toggleLoading: (loading: boolean) => void) {
+	if (!settings.value.isAdmin && !settings.value.isDelegatedAdmin) {
+		return
+	}
+	if (promise) {
+		promise.cancel()
+	}
+	toggleLoading(true)
+	try {
+		promise = searchGroupsApi({ search: query, offset: 0, limit: 25 })
+		const groups = await promise
+		for (const group of groups) {
+			store.commit('addGroup', group)
 		}
-	},
-
-	computed: {
-		settings() {
-			return this.$store.getters.getServerData
-		},
-
-		availableGroups() {
-			const groups = (this.settings.isAdmin || this.settings.isDelegatedAdmin)
-				? this.$store.getters.getSortedGroups
-				: this.$store.getters.getSubAdminGroups
-
-			return groups.filter(({ id }) => id !== '__nc_internal_recent' && id !== 'disabled')
-		},
-
-		availableSubAdminGroups() {
-			return this.availableGroups.filter(({ id }) => id !== 'admin')
-		},
-
-		groupsLabel() {
-			return !this.settings.isAdmin && !this.settings.isDelegatedAdmin
-				? t('settings', 'Member of the following groups (required)')
-				: t('settings', 'Member of the following groups')
-		},
-	},
-
-	methods: {
-		async searchGroups(query, toggleLoading) {
-			if (!this.settings.isAdmin && !this.settings.isDelegatedAdmin) {
-				return
-			}
-			if (this.promise) {
-				this.promise.cancel()
-			}
-			toggleLoading(true)
-			try {
-				this.promise = searchGroups({ search: query, offset: 0, limit: 25 })
-				const groups = await this.promise
-				for (const group of groups) {
-					this.$store.commit('addGroup', group)
-				}
-			} catch (error) {
-				logger.error(t('settings', 'Failed to search groups'), { error })
-			}
-			this.promise = null
-			toggleLoading(false)
-		},
-
-		async createGroup({ name: gid }) {
-			this.creatingGroup = true
-			try {
-				await this.$store.dispatch('addGroup', gid)
-				this.formData.groups.push({ id: gid, name: gid })
-			} catch (error) {
-				logger.error(t('settings', 'Failed to create group'), { error })
-			}
-			this.creatingGroup = false
-		},
-	},
+	} catch (error) {
+		logger.error(t('settings', 'Failed to search groups'), { error })
+	}
+	promise = null
+	toggleLoading(false)
+}
+
+/**
+ * Create a tagged group and add it to the selection.
+ *
+ * @param option The created NcSelect option
+ * @param option.name The new group id/name
+ */
+async function createGroup({ name: gid }: { name: string }) {
+	creatingGroup.value = true
+	try {
+		await store.dispatch('addGroup', gid)
+		// A freshly tagged group has no member counts yet; the form only reads id/name.
+		formData.groups.push({ id: gid, name: gid } as IGroup)
+	} catch (error) {
+		logger.error(t('settings', 'Failed to create group'), { error })
+	}
+	creatingGroup.value = false
 }
 </script>
 
diff --git a/apps/settings/src/components/Users/UserFormLanguage.vue b/apps/settings/src/components/Users/UserFormLanguage.vue
index 0eddc1e16f371..c60cf9ff2c360 100644
--- a/apps/settings/src/components/Users/UserFormLanguage.vue
+++ b/apps/settings/src/components/Users/UserFormLanguage.vue
@@ -10,47 +10,37 @@
 		<NcSelect
 			v-model="formData.language"
 			class="user-form__select"
-			:input-label="t('settings', 'Language')"
+			:inputLabel="t('settings', 'Language')"
 			:placeholder="t('settings', 'Set default language')"
 			:clearable="false"
 			:selectable="option => !option.languages"
-			:filter-by="languageFilterBy"
+			:filterBy="languageFilterBy"
 			:options="languages"
 			label="name" />
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { computed, inject } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
+import { useStore } from '../../store/index.js'
+import { formDataKey } from './injectionKeys.ts'
 import { languageFilterBy } from './userFormUtils.ts'
 
-export default {
-	name: 'UserFormLanguage',
+const store = useStore()
 
-	components: {
-		NcSelect,
-	},
+const formData = inject(formDataKey)!
 
-	inject: ['formData'],
+const showConfig = computed(() => store.getters.getShowConfig)
 
-	computed: {
-		showConfig() {
-			return this.$store.getters.getShowConfig
-		},
-
-		languages() {
-			const { commonLanguages, otherLanguages } = this.$store.getters.getServerData.languages
-			return [
-				{ name: t('settings', 'Common languages'), languages: commonLanguages },
-				...commonLanguages,
-				{ name: t('settings', 'Other languages'), languages: otherLanguages },
-				...otherLanguages,
-			]
-		},
-	},
-
-	methods: {
-		languageFilterBy,
-	},
-}
+const languages = computed(() => {
+	const { commonLanguages, otherLanguages } = store.getters.getServerData.languages
+	return [
+		{ name: t('settings', 'Common languages'), languages: commonLanguages },
+		...commonLanguages,
+		{ name: t('settings', 'Other languages'), languages: otherLanguages },
+		...otherLanguages,
+	]
+})
 </script>
diff --git a/apps/settings/src/components/Users/UserFormManager.vue b/apps/settings/src/components/Users/UserFormManager.vue
index f54e80ab5e3f8..dbb6e8ca5f9ee 100644
--- a/apps/settings/src/components/Users/UserFormManager.vue
+++ b/apps/settings/src/components/Users/UserFormManager.vue
@@ -8,7 +8,7 @@
 		<NcSelectUsers
 			:modelValue="managerModel"
 			class="user-form__select"
-			:input-label="t('settings', 'Manager')"
+			:inputLabel="t('settings', 'Manager')"
 			:placeholder="t('settings', 'Search for a manager…')"
 			:options="managerOptions"
 			:loading="loading"
@@ -17,93 +17,89 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { NcSelectUsersModel } from '@nextcloud/vue/components/NcSelectUsers'
+
+import { translate as t } from '@nextcloud/l10n'
+import { computed, inject, onBeforeUnmount, ref } from 'vue'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import logger from '../../logger.ts'
+import { useStore } from '../../store/index.js'
+import { formDataKey } from './injectionKeys.ts'
 
-export default {
-	name: 'UserFormManager',
-
-	components: {
-		NcSelectUsers,
-	},
-
-	inject: ['formData'],
+const store = useStore()
 
-	data() {
-		return {
-			possibleManagers: [],
-			loading: false,
-			searchTimeout: null,
-		}
-	},
+const formData = inject(formDataKey)!
 
-	computed: {
-		/**
-		 * Map internal formData.manager to NcSelectUsersModel shape.
-		 * Cached to keep object identity stable across reads, so NcSelectUsers
-		 * doesn't see a fresh :modelValue on every parent re-render.
-		 */
+const possibleManagers = ref<Array<{ id: string, displayname?: string, email?: string }>>([])
+const loading = ref(false)
+let searchTimeout: ReturnType<typeof setTimeout> | undefined
+let managerModelCache: NcSelectUsersModel | undefined
 
-		managerModel() {
-			const m = this.formData.manager
-			if (!m) {
-				return null
-			}
-			const id = typeof m === 'object' ? m.id : m
-			const displayName = typeof m === 'object' ? (m.displayname ?? m.id) : m
-			if (this._managerModelCache?.id === id && this._managerModelCache?.displayName === displayName) {
-				return this._managerModelCache
-			}
-			// eslint-disable-next-line vue/no-side-effects-in-computed-properties
-			this._managerModelCache = { id, displayName }
-			return this._managerModelCache
-		},
+// Cache by value so NcSelectUsers keeps a stable modelValue reference across re-renders.
+const managerModel = computed<NcSelectUsersModel | undefined>(() => {
+	const m = formData.manager
+	if (!m) {
+		return undefined
+	}
+	const id = typeof m === 'object' ? m.id : m
+	const displayName = typeof m === 'object' ? (m.displayname ?? m.id) : m
+	if (managerModelCache?.id === id && managerModelCache?.displayName === displayName) {
+		return managerModelCache
+	}
+	managerModelCache = { id, displayName }
+	return managerModelCache
+})
 
-		/** Map API users to NcSelectUsersModel shape */
-		managerOptions() {
-			return this.possibleManagers.map((u) => ({
-				id: u.id,
-				displayName: u.displayname ?? u.id,
-				subname: u.email ?? '',
-			}))
-		},
-	},
+const managerOptions = computed<NcSelectUsersModel[]>(() => possibleManagers.value.map((u) => ({
+	id: u.id,
+	displayName: u.displayname ?? u.id,
+	subname: u.email ?? '',
+})))
 
-	beforeUnmount() {
-		clearTimeout(this.searchTimeout)
-	},
+onBeforeUnmount(() => clearTimeout(searchTimeout))
 
-	methods: {
-		/** Map NcSelectUsersModel back to internal formData shape */
-		onManagerChange(value) {
-			this.formData.manager = value
-				? { id: value.id, displayname: value.displayName }
-				: ''
-		},
+/**
+ * Write the selected manager back to formData.
+ *
+ * @param value The selected model, or null when cleared
+ */
+function onManagerChange(value: NcSelectUsersModel | NcSelectUsersModel[] | null) {
+	const manager = Array.isArray(value) ? value[0] : value
+	formData.manager = manager
+		? { id: manager.id, displayname: manager.displayName }
+		: ''
+}
 
-		/** Debounce keystrokes so a 10-char query produces 1-2 requests, not 10. */
-		searchUserManager(query) {
-			clearTimeout(this.searchTimeout)
-			this.searchTimeout = setTimeout(() => this.fetchManagers(query), 200)
-		},
+/**
+ * Debounce the search so a 10-char query produces 1-2 requests, not 10.
+ *
+ * @param query The current search string
+ */
+function searchUserManager(query: string) {
+	clearTimeout(searchTimeout)
+	searchTimeout = setTimeout(() => fetchManagers(query), 200)
+}
 
-		async fetchManagers(query) {
-			this.loading = true
-			try {
-				const response = await this.$store.dispatch('searchUsers', {
-					offset: 0,
-					limit: 10,
-					search: query,
-				})
-				const users = response?.data ? Object.values(response.data.ocs.data.users) : []
-				this.possibleManagers = users
-			} catch (error) {
-				logger.error('Failed to search user managers', { error })
-			} finally {
-				this.loading = false
-			}
-		},
-	},
+/**
+ * Fetch matching users to populate the manager dropdown.
+ *
+ * @param query The current search string
+ */
+async function fetchManagers(query: string) {
+	loading.value = true
+	try {
+		const response = await store.dispatch('searchUsers', {
+			offset: 0,
+			limit: 10,
+			search: query,
+		})
+		const users = response?.data ? Object.values(response.data.ocs.data.users) : []
+		possibleManagers.value = users as typeof possibleManagers.value
+	} catch (error) {
+		logger.error('Failed to search user managers', { error })
+	} finally {
+		loading.value = false
+	}
 }
 </script>
diff --git a/apps/settings/src/components/Users/UserFormQuota.vue b/apps/settings/src/components/Users/UserFormQuota.vue
index df14cc550e6a1..66dc93d04a3dd 100644
--- a/apps/settings/src/components/Users/UserFormQuota.vue
+++ b/apps/settings/src/components/Users/UserFormQuota.vue
@@ -8,39 +8,36 @@
 		<NcSelect
 			v-model="formData.quota"
 			class="user-form__select"
-			:input-label="t('settings', 'Quota')"
+			:inputLabel="t('settings', 'Quota')"
 			:placeholder="t('settings', 'Set account quota')"
 			:options="quotaOptions"
 			:clearable="false"
 			:taggable="true"
-			:create-option="validateQuota" />
+			:createOption="validateQuota" />
 	</div>
 </template>
 
-<script>
-import NcSelect from '@nextcloud/vue/components/NcSelect'
-import { validateQuota } from './userFormUtils.ts'
-
-export default {
-	name: 'UserFormQuota',
+<script setup lang="ts">
+import type { QuotaOption } from './userFormUtils.ts'
 
-	components: {
-		NcSelect,
-	},
+import { translate as t } from '@nextcloud/l10n'
+import { inject } from 'vue'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import { formDataKey } from './injectionKeys.ts'
+import { validateQuota as validateQuotaOption } from './userFormUtils.ts'
 
-	inject: ['formData'],
+const props = defineProps<{
+	quotaOptions: QuotaOption[]
+}>()
 
-	props: {
-		quotaOptions: {
-			type: Array,
-			required: true,
-		},
-	},
+const formData = inject(formDataKey)!
 
-	methods: {
-		validateQuota(quota) {
-			return validateQuota(quota, this.quotaOptions[0])
-		},
-	},
+/**
+ * Validate a typed quota, falling back to the first preset when unparseable.
+ *
+ * @param quota The raw quota string entered in the select
+ */
+function validateQuota(quota: string) {
+	return validateQuotaOption(quota, props.quotaOptions[0])
 }
 </script>
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index ac4419052afe4..d3a0f0ce009f1 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -14,15 +14,15 @@
 				:size="32" />
 			<NcAvatar
 				v-else-if="visible"
-				disable-menu
-				hide-status
+				disableMenu
+				hideStatus
 				:user="user.id" />
 		</td>
 
 		<td class="row__cell row__cell--displayname" data-cy-user-list-cell-displayname>
 			<strong
 				v-if="!isObfuscated"
-				:title="user.displayname?.length > 20 ? user.displayname : null">
+				:title="user.displayname?.length > 20 ? user.displayname : undefined">
 				{{ user.displayname }}
 			</strong>
 		</td>
@@ -34,7 +34,7 @@
 		<td class="row__cell" data-cy-user-list-cell-email>
 			<span
 				v-if="!isObfuscated"
-				:title="user.email?.length > 20 ? user.email : null">
+				:title="user.email && user.email.length > 20 ? user.email : undefined">
 				{{ user.email }}
 			</span>
 		</td>
@@ -42,7 +42,7 @@
 		<td class="row__cell row__cell--groups row__cell--multiline" data-cy-user-list-cell-groups>
 			<span
 				v-if="!isObfuscated"
-				:title="userGroupsLabels?.length > 40 ? userGroupsLabels : null">
+				:title="userGroupsLabels?.length > 40 ? userGroupsLabels : undefined">
 				{{ userGroupsLabels }}
 			</span>
 		</td>
@@ -53,7 +53,7 @@
 			class="row__cell row__cell--large row__cell--multiline">
 			<span
 				v-if="!isObfuscated"
-				:title="userSubAdminGroupsLabels?.length > 40 ? userSubAdminGroupsLabels : null">
+				:title="userSubAdminGroupsLabels?.length > 40 ? userSubAdminGroupsLabels : undefined">
 				{{ userSubAdminGroupsLabels }}
 			</span>
 		</td>
@@ -127,337 +127,292 @@
 	</tr>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { IUser } from '../../views/user-types.d.ts'
+import type { LanguageOption, QuotaOption } from './userFormUtils.ts'
+
 import { getCurrentUser } from '@nextcloud/auth'
 import { showSuccess } from '@nextcloud/dialogs'
 import { formatFileSize, parseFileSize } from '@nextcloud/files'
+import { translate as t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
-import { useFormatDateTime } from '@nextcloud/vue'
+import { useFormatTime } from '@nextcloud/vue'
+import { computed, reactive } from 'vue'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
 import UserRowActions from './UserRowActions.vue'
-import { isObfuscated } from '../../utils/userUtils.ts'
-
-const productName = window.OC.theme.productName
-
-export default {
-	name: 'UserRow',
-
-	components: {
-		NcAvatar,
-		NcLoadingIcon,
-		NcProgressBar,
-		UserRowActions,
+import { useStore } from '../../store/index.js'
+import { isObfuscated as isObfuscatedUser } from '../../utils/userUtils.ts'
+
+const props = withDefaults(defineProps<{
+	user: IUser
+	visible: boolean
+	users: IUser[]
+	quotaOptions: QuotaOption[]
+	languages: { languages: LanguageOption[] }[]
+	// settings is loose until the store is typed.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	settings: Record<string, any>
+	externalActions?: { icon: string, text: string, action: (...args: unknown[]) => void }[]
+	onEditUser?: ((user: IUser) => void) | null
+}>(), {
+	externalActions: () => [],
+	onEditUser: null,
+})
+const OC = window.OC
+const productName = OC.theme.productName
+
+const store = useStore()
+
+const formattedFullTime = useFormatTime(props.user.firstLoginTimestamp * 1000, {
+	format: {
+		timeStyle: 'short',
+		dateStyle: 'short',
 	},
+})
+
+const rand = Math.random().toString(36).substring(2)
+const loading = reactive({
+	all: false,
+	delete: false,
+	disable: false,
+	wipe: false,
+})
+
+const isObfuscated = computed(() => isObfuscatedUser(props.user))
+
+const usedQuota = computed(() => {
+	let quota = props.user.quota.quota
+	if (quota > 0) {
+		quota = Math.min(100, Math.round(props.user.quota.used / quota * 100))
+	} else {
+		const usedInGB = props.user.quota.used / (10 * Math.pow(2, 30))
+		// asymptotic curve approaching 50% at 10GB to visualize used space with infinite quota
+		quota = 95 * (1 - (1 / (usedInGB + 1)))
+	}
+	return isNaN(quota) ? 0 : quota
+})
+
+const userLanguage = computed(() => {
+	const availableLanguages = props.languages[0].languages.concat(props.languages[1].languages)
+	const userLang = availableLanguages.find((lang) => lang.code === props.user.language)
+	if (userLang) {
+		return userLang
+	}
+	// Unknown or unset language: fall back to the raw code (empty string renders nothing)
+	return { code: props.user.language, name: props.user.language }
+})
 
-	props: {
-		user: {
-			type: Object,
-			required: true,
-		},
-
-		visible: {
-			type: Boolean,
-			required: true,
-		},
+const userFirstLogin = computed(() => {
+	if (props.user.firstLoginTimestamp > 0) {
+		return formattedFullTime.value
+	}
+	if (props.user.firstLoginTimestamp < 0) {
+		return t('settings', 'Unknown')
+	}
+	return t('settings', 'Never')
+})
 
-		users: {
-			type: Array,
-			required: true,
-		},
+const userLastLoginTooltip = computed(() => {
+	if (props.user.lastLoginTimestamp > 0) {
+		return OC.Util.formatDate(props.user.lastLoginTimestamp * 1000)
+	}
+	return ''
+})
 
-		quotaOptions: {
-			type: Array,
-			required: true,
-		},
+const userLastLogin = computed(() => {
+	if (props.user.lastLoginTimestamp > 0) {
+		return OC.Util.relativeModifiedDate(props.user.lastLoginTimestamp * 1000)
+	}
+	return t('settings', 'Never')
+})
 
-		languages: {
-			type: Array,
-			required: true,
-		},
+const showConfig = computed(() => store.getters.getShowConfig)
 
-		settings: {
-			type: Object,
-			required: true,
-		},
+const isLoadingUser = computed(() => loading.delete || loading.disable || loading.wipe)
 
-		externalActions: {
-			type: Array,
-			default: () => [],
-		},
+const isLoadingField = computed(() => loading.delete || loading.disable || loading.all)
 
-		/** Callback from UserList to open the edit dialog */
-		onEditUser: {
-			type: Function,
-			default: null,
-		},
-	},
+const uniqueId = computed(() => encodeURIComponent(props.user.id + rand))
 
-	setup(props) {
-		const { formattedFullTime } = useFormatDateTime(props.user.firstLoginTimestamp * 1000, {
-			relativeTime: false,
-			format: {
-				timeStyle: 'short',
-				dateStyle: 'short',
-			},
+const userGroupsLabels = computed(() => {
+	const allGroups = store.getters.getGroups
+	return props.user.groups
+		.map((id) => {
+			const group = allGroups.find((g) => g.id === id)
+			return group?.name ?? id
 		})
-		return {
-			formattedFullTime,
-		}
-	},
-
-	data() {
-		return {
-			rand: Math.random().toString(36).substring(2),
-			loading: {
-				all: false,
-				delete: false,
-				disable: false,
-				wipe: false,
-			},
-		}
-	},
-
-	computed: {
-		isObfuscated() {
-			return isObfuscated(this.user)
-		},
-
-		usedQuota() {
-			let quota = this.user.quota.quota
-			if (quota > 0) {
-				quota = Math.min(100, Math.round(this.user.quota.used / quota * 100))
-			} else {
-				const usedInGB = this.user.quota.used / (10 * Math.pow(2, 30))
-				// asymptotic curve approaching 50% at 10GB to visualize used space with infinite quota
-				quota = 95 * (1 - (1 / (usedInGB + 1)))
-			}
-			return isNaN(quota) ? 0 : quota
-		},
-
-		userLanguage() {
-			const availableLanguages = this.languages[0].languages.concat(this.languages[1].languages)
-			const userLang = availableLanguages.find((lang) => lang.code === this.user.language)
-			if (typeof userLang !== 'object' && this.user.language !== '') {
-				return {
-					code: this.user.language,
-					name: this.user.language,
-				}
-			} else if (this.user.language === '') {
-				return false
-			}
-			return userLang
-		},
-
-		userFirstLogin() {
-			if (this.user.firstLoginTimestamp > 0) {
-				return this.formattedFullTime
-			}
-			if (this.user.firstLoginTimestamp < 0) {
-				return t('settings', 'Unknown')
-			}
-			return t('settings', 'Never')
-		},
-
-		userLastLoginTooltip() {
-			if (this.user.lastLoginTimestamp > 0) {
-				return OC.Util.formatDate(this.user.lastLoginTimestamp * 1000)
-			}
-			return ''
-		},
-
-		userLastLogin() {
-			if (this.user.lastLoginTimestamp > 0) {
-				return OC.Util.relativeModifiedDate(this.user.lastLoginTimestamp * 1000)
-			}
-			return t('settings', 'Never')
-		},
+		.join(', ')
+})
+
+const userSubAdminGroupsLabels = computed(() => {
+	const allGroups = store.getters.getGroups
+	return (props.user.subadmin ?? [])
+		.map((id) => {
+			const group = allGroups.find((g) => g.id === id)
+			return group?.name ?? id
+		})
+		.join(', ')
+})
 
-		showConfig() {
-			return this.$store.getters.getShowConfig
-		},
+const usedSpace = computed(() => {
+	if (props.user.quota?.used) {
+		return t('settings', '{size} used', { size: formatFileSize(props.user.quota?.used) })
+	}
+	return t('settings', '{size} used', { size: formatFileSize(0) })
+})
 
-		isLoadingUser() {
-			return this.loading.delete || this.loading.disable || this.loading.wipe
-		},
+const canEdit = computed(() => getCurrentUser()?.uid !== props.user.id || props.settings.isAdmin || props.settings.isDelegatedAdmin)
 
-		isLoadingField() {
-			return this.loading.delete || this.loading.disable || this.loading.all
-		},
+const userQuota = computed(() => {
+	let quota = props.user.quota?.quota
 
-		uniqueId() {
-			return encodeURIComponent(this.user.id + this.rand)
-		},
+	if (quota === 'default') {
+		quota = props.settings.defaultQuota
+		if (quota !== 'none') {
+			quota = parseFileSize(quota, true)
+		}
+	}
 
-		userGroupsLabels() {
-			const allGroups = this.$store.getters.getGroups
-			return this.user.groups
-				.map((id) => {
-					const group = allGroups.find((g) => g.id === id)
-					return group?.name ?? id
-				})
-				.join(', ')
+	if (quota === 'none' || quota === -3) {
+		return t('settings', 'Unlimited')
+	} else if (quota >= 0) {
+		return formatFileSize(quota)
+	}
+	return formatFileSize(0)
+})
+
+const userActions = computed(() => {
+	const actions = [
+		{
+			icon: 'icon-delete',
+			text: t('settings', 'Delete account'),
+			action: deleteUser,
 		},
-
-		userSubAdminGroupsLabels() {
-			const allGroups = this.$store.getters.getGroups
-			return (this.user.subadmin ?? [])
-				.map((id) => {
-					const group = allGroups.find((g) => g.id === id)
-					return group?.name ?? id
-				})
-				.join(', ')
+		{
+			icon: 'icon-delete',
+			text: t('settings', 'Disconnect all devices and delete local data'),
+			action: wipeUserDevices,
 		},
-
-		usedSpace() {
-			if (this.user.quota?.used) {
-				return t('settings', '{size} used', { size: formatFileSize(this.user.quota?.used) })
-			}
-			return t('settings', '{size} used', { size: formatFileSize(0) })
+		{
+			icon: props.user.enabled ? 'icon-close' : 'icon-add',
+			text: props.user.enabled ? t('settings', 'Disable account') : t('settings', 'Enable account'),
+			action: enableDisableUser,
 		},
+	]
+	if (props.user.email !== null && props.user.email !== '') {
+		actions.push({
+			icon: 'icon-mail',
+			text: t('settings', 'Resend welcome email'),
+			action: sendWelcomeMail,
+		})
+	}
+	return actions.concat(props.externalActions)
+})
+
+/**
+ * Open the edit dialog via the list-provided callback.
+ */
+function toggleEdit() {
+	if (props.onEditUser) {
+		props.onEditUser(props.user)
+	}
+}
 
-		canEdit() {
-			return getCurrentUser().uid !== this.user.id || this.settings.isAdmin || this.settings.isDelegatedAdmin
+/**
+ * Confirm and remotely wipe the account's devices.
+ */
+async function wipeUserDevices() {
+	const userid = props.user.id
+	await confirmPassword()
+	OC.dialogs.confirmDestructive(
+		t(
+			'settings',
+			'In case of lost device or exiting the organization, this can remotely wipe the {productName} data from all devices associated with {userid}. Only works if the devices are connected to the internet.',
+			{ userid, productName },
+		),
+		t('settings', 'Remote wipe of devices'),
+		{
+			type: OC.dialogs.YES_NO_BUTTONS,
+			confirm: t('settings', 'Wipe {userid}\'s devices', { userid }),
+			confirmClasses: 'error',
+			cancel: t('settings', 'Cancel'),
 		},
-
-		userQuota() {
-			let quota = this.user.quota?.quota
-
-			if (quota === 'default') {
-				quota = this.settings.defaultQuota
-				if (quota !== 'none') {
-					quota = parseFileSize(quota, true)
-				}
+		(result) => {
+			if (result) {
+				loading.wipe = true
+				loading.all = true
+				store.dispatch('wipeUserDevices', userid)
+					.then(() => showSuccess(t('settings', 'Wiped {userid}\'s devices', { userid })), { timeout: 2000 })
+					.finally(() => {
+						loading.wipe = false
+						loading.all = false
+					})
 			}
-
-			if (quota === 'none' || quota === -3) {
-				return t('settings', 'Unlimited')
-			} else if (quota >= 0) {
-				return formatFileSize(quota)
-			}
-			return formatFileSize(0)
 		},
+		true,
+	)
+}
 
-		userActions() {
-			const actions = [
-				{
-					icon: 'icon-delete',
-					text: t('settings', 'Delete account'),
-					action: this.deleteUser,
-				},
-				{
-					icon: 'icon-delete',
-					text: t('settings', 'Disconnect all devices and delete local data'),
-					action: this.wipeUserDevices,
-				},
-				{
-					icon: this.user.enabled ? 'icon-close' : 'icon-add',
-					text: this.user.enabled ? t('settings', 'Disable account') : t('settings', 'Enable account'),
-					action: this.enableDisableUser,
-				},
-			]
-			if (this.user.email !== null && this.user.email !== '') {
-				actions.push({
-					icon: 'icon-mail',
-					text: t('settings', 'Resend welcome email'),
-					action: this.sendWelcomeMail,
-				})
-			}
-			return actions.concat(this.externalActions)
+/**
+ * Confirm and fully delete the account and its data.
+ */
+async function deleteUser() {
+	const userid = props.user.id
+	await confirmPassword()
+	OC.dialogs.confirmDestructive(
+		t('settings', 'Fully delete {userid}\'s account including all their personal files, app data, etc.', { userid }),
+		t('settings', 'Account deletion'),
+		{
+			type: OC.dialogs.YES_NO_BUTTONS,
+			confirm: t('settings', 'Delete {userid}\'s account', { userid }),
+			confirmClasses: 'error',
+			cancel: t('settings', 'Cancel'),
 		},
-	},
-
-	methods: {
-		toggleEdit() {
-			if (this.onEditUser) {
-				this.onEditUser(this.user)
+		(result) => {
+			if (result) {
+				loading.delete = true
+				loading.all = true
+				return store.dispatch('deleteUser', userid)
+					.then(() => {
+						loading.delete = false
+						loading.all = false
+					})
 			}
 		},
+		true,
+	)
+}
 
-		async wipeUserDevices() {
-			const userid = this.user.id
-			await confirmPassword()
-			OC.dialogs.confirmDestructive(
-				t(
-					'settings',
-					'In case of lost device or exiting the organization, this can remotely wipe the {productName} data from all devices associated with {userid}. Only works if the devices are connected to the internet.',
-					{ userid, productName },
-				),
-				t('settings', 'Remote wipe of devices'),
-				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('settings', 'Wipe {userid}\'s devices', { userid }),
-					confirmClasses: 'error',
-					cancel: t('settings', 'Cancel'),
-				},
-				(result) => {
-					if (result) {
-						this.loading.wipe = true
-						this.loading.all = true
-						this.$store.dispatch('wipeUserDevices', userid)
-							.then(() => showSuccess(t('settings', 'Wiped {userid}\'s devices', { userid })), { timeout: 2000 })
-							.finally(() => {
-								this.loading.wipe = false
-								this.loading.all = false
-							})
-					}
-				},
-				true,
-			)
-		},
-
-		async deleteUser() {
-			const userid = this.user.id
-			await confirmPassword()
-			OC.dialogs.confirmDestructive(
-				t('settings', 'Fully delete {userid}\'s account including all their personal files, app data, etc.', { userid }),
-				t('settings', 'Account deletion'),
-				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('settings', 'Delete {userid}\'s account', { userid }),
-					confirmClasses: 'error',
-					cancel: t('settings', 'Cancel'),
-				},
-				(result) => {
-					if (result) {
-						this.loading.delete = true
-						this.loading.all = true
-						return this.$store.dispatch('deleteUser', userid)
-							.then(() => {
-								this.loading.delete = false
-								this.loading.all = false
-							})
-					}
-				},
-				true,
-			)
-		},
-
-		enableDisableUser() {
-			this.loading.delete = true
-			this.loading.all = true
-			const userid = this.user.id
-			const enabled = !this.user.enabled
-			return this.$store.dispatch('enableDisableUser', {
-				userid,
-				enabled,
-			})
-				.then(() => {
-					this.loading.delete = false
-					this.loading.all = false
-				})
-		},
+/**
+ * Toggle the account's enabled state.
+ */
+function enableDisableUser() {
+	loading.delete = true
+	loading.all = true
+	const userid = props.user.id
+	const enabled = !props.user.enabled
+	return store.dispatch('enableDisableUser', {
+		userid,
+		enabled,
+	})
+		.then(() => {
+			loading.delete = false
+			loading.all = false
+		})
+}
 
-		sendWelcomeMail() {
-			this.loading.all = true
-			this.$store.dispatch('sendWelcomeMail', this.user.id)
-				.then(() => showSuccess(t('settings', 'Welcome mail sent!'), { timeout: 2000 }))
-				.finally(() => {
-					this.loading.all = false
-				})
-		},
-	},
+/**
+ * Resend the welcome email to the account.
+ */
+function sendWelcomeMail() {
+	loading.all = true
+	store.dispatch('sendWelcomeMail', props.user.id)
+		.then(() => showSuccess(t('settings', 'Welcome mail sent!'), { timeout: 2000 }))
+		.finally(() => {
+			loading.all = false
+		})
 }
 </script>
 
diff --git a/apps/settings/src/components/Users/UserRowActions.vue b/apps/settings/src/components/Users/UserRowActions.vue
index b905d71acb0a0..e4727a088c6eb 100644
--- a/apps/settings/src/components/Users/UserRowActions.vue
+++ b/apps/settings/src/components/Users/UserRowActions.vue
@@ -23,7 +23,7 @@
 			:disabled="disabled"
 			:aria-label="text"
 			:icon="icon"
-			close-after-click
+			closeAfterClick
 			@click="(event) => action(event, { ...user })">
 			{{ text }}
 			<template v-if="isSvg(icon)" #icon>
@@ -33,12 +33,11 @@
 	</NcActions>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue'
-
+<script setup lang="ts">
 import SvgPencil from '@mdi/svg/svg/pencil-outline.svg?raw'
+import { translate as t } from '@nextcloud/l10n'
 import isSvg from 'is-svg'
-import { defineComponent } from 'vue'
+import { computed } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -50,42 +49,15 @@ interface UserAction {
 	text: string
 }
 
-export default defineComponent({
-	components: {
-		NcActionButton,
-		NcActions,
-		NcIconSvgWrapper,
-	},
-
-	props: {
-		actions: {
-			type: Array as PropType<readonly UserAction[]>,
-			required: true,
-		},
-
-		disabled: {
-			type: Boolean,
-			required: true,
-		},
-
-		user: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	setup() {
-		return { SvgPencil }
-	},
+const props = defineProps<{
+	actions: readonly UserAction[]
+	disabled: boolean
+	user: Record<string, unknown>
+}>()
 
-	computed: {
-		enabledActions(): UserAction[] {
-			return this.actions.filter((action) => typeof action.enabled === 'function' ? action.enabled(this.user) : true)
-		},
-	},
+defineEmits<{
+	'update:edit': [value: boolean]
+}>()
 
-	methods: {
-		isSvg,
-	},
-})
+const enabledActions = computed<UserAction[]>(() => props.actions.filter((action) => typeof action.enabled === 'function' ? action.enabled(props.user) : true))
 </script>
diff --git a/apps/settings/src/components/Users/injectionKeys.ts b/apps/settings/src/components/Users/injectionKeys.ts
new file mode 100644
index 0000000000000..b4af911ddf001
--- /dev/null
+++ b/apps/settings/src/components/Users/injectionKeys.ts
@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { InjectionKey } from 'vue'
+import type { FormData } from './userFormUtils.ts'
+
+// Typed key so a provide/inject mismatch is a compile error, not a silent reactivity loss.
+export const formDataKey: InjectionKey<FormData> = Symbol('userFormData')
diff --git a/apps/settings/src/components/Users/userFormUtils.ts b/apps/settings/src/components/Users/userFormUtils.ts
index ae0a271b03682..47dfa86241fcc 100644
--- a/apps/settings/src/components/Users/userFormUtils.ts
+++ b/apps/settings/src/components/Users/userFormUtils.ts
@@ -8,17 +8,17 @@ import type { IGroup } from '../../views/user-types.d.ts'
 import { formatFileSize, parseFileSize } from '@nextcloud/files'
 import { unlimitedQuota } from '../../utils/userUtils.ts'
 
-interface QuotaOption {
+export interface QuotaOption {
 	id: string
 	label: string
 }
 
-interface LanguageOption {
+export interface LanguageOption {
 	code: string
 	name: string
 }
 
-interface FormData {
+export interface FormData {
 	username: string
 	displayName: string
 	password: string
@@ -152,7 +152,7 @@ export function diffPayload(initial: FormData, current: FormData) {
  * @param fallback.label Fallback option display label
  * @return Normalized quota option with id and label
  */
-export function validateQuota(quota: string, fallback: { id: string, label: string }) {
+export function validateQuota(quota: string, fallback: QuotaOption) {
 	const parsed = parseFileSize(quota, true)
 	if (parsed !== null && parsed >= 0) {
 		const label = formatFileSize(parsed)
diff --git a/apps/settings/src/views/user-types.d.ts b/apps/settings/src/views/user-types.d.ts
index 21c63a13b031e..b23bb345e307a 100644
--- a/apps/settings/src/views/user-types.d.ts
+++ b/apps/settings/src/views/user-types.d.ts
@@ -2,6 +2,39 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+/**
+ * The fields the user-management components read from the (still untyped) users
+ * Vuex store. An explicit assertion of the store shape until the store is typed.
+ */
+export interface IUser {
+	id: string
+	displayname: string
+	email: string | null
+	groups: string[]
+	subadmin: string[]
+	// `quota` is intentionally loose: bytes or a keyword like 'default'/'none'.
+	quota: {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		quota: any
+		used: number
+	}
+	language: string
+	backend: string
+	storageLocation: string
+	// Unix timestamp in seconds; 0 = never, < 0 = unknown.
+	firstLoginTimestamp: number
+	lastLoginTimestamp: number
+	manager: string
+	enabled: boolean
+	backendCapabilities: {
+		setPassword: boolean
+	}
+
+	// The store exposes more fields than enumerated; unknown keys resolve to `unknown`, not `any`.
+	[key: string]: unknown
+}
+
 export interface IGroup {
 	/**
 	 * Id