1---
2category: Browser
3---
4 
5# useTitle
6 
7Reactive document title.
8 
9::: warning
10This composable isn't compatible with SSR.
11:::
12 
13## Usage
14 
15```ts
16import { useTitle } from '@vueuse/core'
17 
18const title = useTitle()
19console.log(title.value) // print current title
20title.value = 'Hello' // change current title
21```
22 
23Set initial title immediately:
24 
25```ts
26import { useTitle } from '@vueuse/core'
27// ---cut---
28const title = useTitle('New Title')
29```
30 
31Pass a `ref` and the title will be updated when the source ref changes:
32 
33```ts
34import { useTitle } from '@vueuse/core'
35import { shallowRef } from 'vue'
36 
37const messages = shallowRef(0)
38 
39const title = computed(() => {
40  return !messages.value ? 'No message' : `${messages.value} new messages`
41})
42 
43useTitle(title) // document title will match with the ref "title"
44```
45 
46Pass an optional template tag [Vue Meta Title Template](https://vue-meta.nuxtjs.org/guide/metainfo.html) to update the title to be injected into this template:
47 
48```ts
49import { useTitle } from '@vueuse/core'
50// ---cut---
51const title = useTitle('New Title', {
52  titleTemplate: '%s | My Awesome Website'
53})
54```
55 
56::: warning
57`observe` is incompatible with `titleTemplate`.
58:::
59 
60## Type Declarations
61 
62```ts
63export type UseTitleOptionsBase = {
64  /**
65   * Restore the original title when unmounted
66   * @param originTitle original title
67   * @returns restored title
68   */
69  restoreOnUnmount?:
70    | false
71    | ((
72        originalTitle: string,
73        currentTitle: string,
74      ) => string | null | undefined)
75} & (
76  | {
77      /**
78       * Observe `document.title` changes using MutationObserve
79       * Cannot be used together with `titleTemplate` option.
80       *
81       * @default false
82       */
83      observe?: boolean
84    }
85  | {
86      /**
87       * The template string to parse the title (e.g., '%s | My Website')
88       * Cannot be used together with `observe` option.
89       *
90       * @default '%s'
91       */
92      titleTemplate?: MaybeRef<string> | ((title: string) => string)
93    }
94)
95export type UseTitleOptions = ConfigurableDocument & UseTitleOptionsBase
96export type UseTitleReturn =
97  | ComputedRef<string | null | undefined>
98  | Ref<string | null | undefined>
99/**
100 * Reactive document title.
101 *
102 * @see https://vueuse.org/useTitle
103 * @param newTitle
104 * @param options
105 * @description It's not SSR compatible. Your value will be applied only on client-side.
106 */
107export declare function useTitle(
108  newTitle: ReadonlyRefOrGetter<string | null | undefined>,
109  options?: UseTitleOptions,
110): ComputedRef<string | null | undefined>
111export declare function useTitle(
112  newTitle?: MaybeRef<string | null | undefined>,
113  options?: UseTitleOptions,
114): Ref<string | null | undefined>
115```
116