useTitle

v0.0.15testeddemo

Reactive `document.title`. Pass a getter to derive the title from other reactive state (returns a read-only ref), or a plain value/ref for two-way binding.

Source Tests

Examples

const title = useTitle();
title.value = 'New title';

useTitle('Dashboard', { titleTemplate: '%s | My App' });

// Derive from reactive state (read-only result)
useTitle(() => `Inbox (${count.value})`);

// Restore the previous title when the component unmounts
useTitle('Checkout', { restoreOnUnmount: (original) => original });

Demo

Loading demo…

Signatures

export function useTitle(
  newTitle: () => string | null | undefined,
  options?: UseTitleOptions,
): ComputedRef<string | null | undefined>;

export function useTitle(
  newTitle?: MaybeRef<string | null | undefined>,
  options?: UseTitleOptions,
): Ref<string | null | undefined>;

Parameters

Parameter	Type	Default	Description
`newTitle`?	`MaybeRefOrGetter<string \| null \| undefined>`	`null`	Initial title (getter source returns a read-only ref)
`options`?	`UseTitleOptionsBase`	`{}`	Options

Returns

UseTitleReturnA ref bound to the document title (read-only when a getter source is passed)