diff --git a/src/composables/useTitle.ts b/src/composables/useTitle.ts
index 62d30623..981e4d59 100644
--- a/src/composables/useTitle.ts
+++ b/src/composables/useTitle.ts
@@ -1,12 +1,21 @@
-import { computed, watchEffect } from 'vue'
-import type { ComputedGetter } from 'vue'
+import { computed } from 'vue'
+import type { Ref } from 'vue'
 
-import { setTitle } from '@/helpers/setTitle'
+import {useTitle as useTitleVueUse, resolveRef} from '@vueuse/core'
 
-export function useTitle(titleGetter: ComputedGetter<string>) {
-	const titleRef = computed(titleGetter)
+type UseTitleParameters = Parameters<typeof useTitleVueUse>
 
-	watchEffect(() => setTitle(titleRef.value))
+export function useTitle(...args: UseTitleParameters) {
 
-	return titleRef
+	const [newTitle, ...restArgs] = args
+
+  const pageTitle = resolveRef(newTitle) as Ref<string>
+
+	const completeTitle = computed(() => 
+		(typeof pageTitle.value === 'undefined' || pageTitle.value === '')
+		? 'Vikunja'
+		: `${pageTitle.value} | Vikunja`,
+	)
+
+	return useTitleVueUse(completeTitle, ...restArgs)
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 2b3e6304..b69ea366 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -238,6 +238,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ namespaceId: parseInt(route.params.id as string) }),
 		},
 		{
 			path: '/namespaces/:id/settings/delete',
diff --git a/src/views/namespaces/settings/archive.vue b/src/views/namespaces/settings/archive.vue
index 7903ef61..950c1c12 100644
--- a/src/views/namespaces/settings/archive.vue
+++ b/src/views/namespaces/settings/archive.vue
@@ -7,50 +7,79 @@
 
 		<template #text>
 			<p>
-				{{ namespace.isArchived ? $t('namespace.archive.unarchiveText') : $t('namespace.archive.archiveText')}}
+				{{
+					namespace.isArchived
+						? $t('namespace.archive.unarchiveText')
+						: $t('namespace.archive.archiveText')
+				}}
 			</p>
 		</template>
 	</modal>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default { name: 'namespace-setting-archive' }
+</script>
+
+<script setup lang="ts">
+import {watch, reactive, ref, shallowReactive} from 'vue'
+import {useRouter} from 'vue-router'
+import {useStore} from '@/store'
+import {useI18n} from 'vue-i18n'
+
+import {success} from '@/message'
+import {useTitle} from '@/composables/useTitle'
 
 import NamespaceService from '@/services/namespace'
-import { setTitle } from '@/helpers/setTitle'
+import type {INamespace} from '@/modelTypes/INamespace'
+import NamespaceModel from '@/models/namespace'
 
-export default defineComponent({
-	name: 'namespace-setting-archive',
-	data() {
-		return {
-			namespaceService: new NamespaceService(),
-			namespace: null,
-			title: '',
-		}
-	},
-
-	created() {
-		this.namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
-		this.title = this.namespace.isArchived ?
-			this.$t('namespace.archive.titleUnarchive', {namespace: this.namespace.title}) :
-			this.$t('namespace.archive.titleArchive', {namespace: this.namespace.title})
-		setTitle(this.title)
-	},
-
-	methods: {
-		async archiveNamespace() {
-			try {
-				const isArchived = !this.namespace.isArchived
-				const namespace = await this.namespaceService.update({
-					...this.namespace,
-					isArchived,
-				})
-				this.$store.commit('namespaces/setNamespaceById', namespace)
-				this.$message.success({message: this.$t(isArchived ? 'namespace.archive.success' : 'namespace.archive.unarchiveSuccess')})
-			} finally {
-				this.$router.back()
-			}
-		},
+const props = defineProps({
+	namespaceId: {
+		type: Number,
+		required: true,
 	},
 })
+
+const store = useStore()
+const router = useRouter()
+const {t} = useI18n({useScope: 'global'})
+
+const title = ref('')
+useTitle(title)
+
+const namespaceService = shallowReactive(new NamespaceService())
+const namespace : INamespace = reactive(new NamespaceModel())
+
+watch(
+	() => props.namespaceId,
+	async () => {
+		Object.assign(namespace, store.getters['namespaces/getNamespaceById'](props.namespaceId))
+
+		// FIXME: ressouce should be loaded in store
+		Object.assign(namespace, await namespaceService.get({id: props.namespaceId}))
+		title.value = namespace.isArchived ?
+				t('namespace.archive.titleUnarchive', {namespace: namespace.title}) :
+				t('namespace.archive.titleArchive', {namespace: namespace.title})
+	},
+	{ immediate: true },
+)
+
+async function archiveNamespace() {
+	try {
+		const isArchived = !namespace.isArchived
+		const archivedNamespace = await namespaceService.update({
+			...namespace,
+			isArchived,
+		})
+		store.commit('namespaces/setNamespaceById', archivedNamespace)
+		success({
+			message: isArchived
+				? t('namespace.archive.success')
+				: t('namespace.archive.unarchiveSuccess'),
+		})
+	} finally {
+		router.back()
+	}
+}
 </script>