diff --git a/apps/settings/src/main-settings.ts b/apps/settings/src/main-settings.ts
index b47dc9062c198..9cd32138e05af 100644
--- a/apps/settings/src/main-settings.ts
+++ b/apps/settings/src/main-settings.ts
@@ -5,9 +5,9 @@
import { getCSPNonce } from '@nextcloud/auth'
import Vue from 'vue'
-import SettingsNavigation from './views/SettingsNavigation.vue'
+import SettingsApp from './views/SettingsApp.vue'
__webpack_nonce__ = getCSPNonce()
-const app = new Vue(SettingsNavigation)
-app.$mount('#app-navigation')
+const app = new Vue(SettingsApp)
+app.$mount('#settings-app')
diff --git a/apps/settings/src/main-users-management.ts b/apps/settings/src/main-users-management.ts
index 95c84bc1ca07a..efbde800482dd 100644
--- a/apps/settings/src/main-users-management.ts
+++ b/apps/settings/src/main-users-management.ts
@@ -12,7 +12,7 @@ import VTooltipPlugin from 'v-tooltip'
import Vue from 'vue'
import Vuex from 'vuex'
import { sync } from 'vuex-router-sync'
-import SettingsApp from './views/SettingsApp.vue'
+import UserManagement from './views/UserManagement.vue'
import router from './router/index.ts'
import { useStore } from './store/index.js'
@@ -37,10 +37,10 @@ const pinia = createPinia()
// Migrate legacy local storage settings to the database
store.dispatch('migrateLocalStorage')
-export default new Vue({
+const App = Vue.extend(UserManagement)
+const app = new App({
router,
store,
pinia,
- render: (h) => h(SettingsApp),
- el: '#content',
})
+app.$mount('#content')
diff --git a/apps/settings/src/router/routes.ts b/apps/settings/src/router/routes.ts
index 0742553220ab0..6be6c4b11b326 100644
--- a/apps/settings/src/router/routes.ts
+++ b/apps/settings/src/router/routes.ts
@@ -1,21 +1,14 @@
-/**
+/*
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import type { RouteConfig } from 'vue-router'
-const UserManagement = () => import(/* webpackChunkName: 'settings-users' */'../views/UserManagement.vue')
-const UserManagementNavigation = () => import(/* webpackChunkName: 'settings-users' */'../views/UserManagementNavigation.vue')
-
const routes: RouteConfig[] = [
{
name: 'users',
path: '/:index(index.php/)?settings/users',
- components: {
- default: UserManagement,
- navigation: UserManagementNavigation,
- },
props: true,
children: [
{
diff --git a/apps/settings/src/views/SettingsApp.vue b/apps/settings/src/views/SettingsApp.vue
index 7e135175ef6bb..a1a6e2df700ec 100644
--- a/apps/settings/src/views/SettingsApp.vue
+++ b/apps/settings/src/views/SettingsApp.vue
@@ -4,13 +4,22 @@
-->
-
-
-
-
+
+
+
+
+
diff --git a/apps/settings/src/views/SettingsContentWrapper.vue b/apps/settings/src/views/SettingsContentWrapper.vue
new file mode 100644
index 0000000000000..6ad0123936693
--- /dev/null
+++ b/apps/settings/src/views/SettingsContentWrapper.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
diff --git a/apps/settings/src/views/UserManagement.vue b/apps/settings/src/views/UserManagement.vue
index 7d4545e72f211..c4aebd9363009 100644
--- a/apps/settings/src/views/UserManagement.vue
+++ b/apps/settings/src/views/UserManagement.vue
@@ -4,11 +4,14 @@
-->
-
-
-
+
+
+
+
+
+