diff --git a/frontend/src/components/Layout/SettingsPage.vue b/frontend/src/components/Layout/SettingsPage.vue
index 6e99943d35d..31c4d7f2a31 100644
--- a/frontend/src/components/Layout/SettingsPage.vue
+++ b/frontend/src/components/Layout/SettingsPage.vue
@@ -17,3 +17,18 @@
+
+
diff --git a/frontend/src/composables/page-title.ts b/frontend/src/composables/page-title.ts
index f3261154d05..1d9b5a93c1b 100644
--- a/frontend/src/composables/page-title.ts
+++ b/frontend/src/composables/page-title.ts
@@ -1,5 +1,5 @@
-import { useTitle as _useTitle, watchImmediate } from '@vueuse/core';
-import { onBeforeUnmount, onMounted, shallowRef, toRef, toValue, type MaybeRefOrGetter } from 'vue';
+import { computed, onBeforeUnmount, onMounted, shallowRef, toRef, toValue } from 'vue';
+import { useTitle as _useTitle, watchImmediate, type ReadonlyRefOrGetter } from '@vueuse/core';
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import { isNil } from '@/utils/validation';
@@ -8,8 +8,9 @@ import { isNil } from '@/utils/validation';
*/
const DEFAULT_PAGE_TITLE = 'Jellyfin Vue';
const _title = shallowRef();
+const _fullTitle = computed(() => _title.value ? `${_title.value.trim()} | ${DEFAULT_PAGE_TITLE}` : DEFAULT_PAGE_TITLE);
-_useTitle(() => _title.value ? `${_title.value.trim()} | ${DEFAULT_PAGE_TITLE}` : DEFAULT_PAGE_TITLE);
+_useTitle(_fullTitle);
/**
* Reactively sets the page title with the following template: **`title` | Jellyfin Vue**. Can be used in 2 ways:
@@ -20,10 +21,10 @@ _useTitle(() => _title.value ? `${_title.value.trim()} | ${DEFAULT_PAGE_TITLE}`
*
* Value will be set to default (undefined) when the component consuming this composable is unmounted.
*/
-export function usePageTitle(title?: MaybeRefOrGetter) {
+export function usePageTitle(title?: ReadonlyRefOrGetter>) {
onMounted(() => {
if (!isNil(title)) {
- watchImmediate(toRef(title), val => _title.value = val);
+ watchImmediate(toRef(title), val => _title.value = val ?? undefined);
}
});
@@ -35,6 +36,6 @@ export function usePageTitle(title?: MaybeRefOrGetter) {
/**
* Same as useTitle, but is a shorthand for items only.
*/
-export function useItemPageTitle(item: MaybeRefOrGetter>) {
- usePageTitle(() => toValue(item)?.Name ?? '');
+export function useItemPageTitle(item: ReadonlyRefOrGetter>) {
+ usePageTitle(() => toValue(item)?.Name);
};
diff --git a/frontend/src/pages/settings/logs-and-activity.vue b/frontend/src/pages/settings/logs-and-activity.vue
index 8d79fa6f188..5e67d00b393 100644
--- a/frontend/src/pages/settings/logs-and-activity.vue
+++ b/frontend/src/pages/settings/logs-and-activity.vue
@@ -112,13 +112,10 @@ import { useTheme } from 'vuetify';
import { remote } from '@/plugins/remote';
import { useDateFns } from '@/composables/use-datefns';
import { useApi } from '@/composables/apis';
-import { usePageTitle } from '@/composables/page-title';
const { t } = useI18n();
const theme = useTheme();
-usePageTitle(() => t('logsAndActivity'));
-
/**
* Return a UI colour given log severity
*/
diff --git a/frontend/src/pages/settings/users/new.vue b/frontend/src/pages/settings/users/new.vue
index ad8ef5419b9..816a29ee16d 100644
--- a/frontend/src/pages/settings/users/new.vue
+++ b/frontend/src/pages/settings/users/new.vue
@@ -135,5 +135,4 @@ async function createUser(): Promise {
loading.value = false;
}
}
-