Skip to content

useTitle

Category
Export Size
912 B
Last Changed
8 months ago

Reactive document title.

WARNING

This composable isn't compatible with SSR.

Demo

Usage

ts
import { 
useTitle
} from '@vueuse/core'
const
title
=
useTitle
()
console
.
log
(
title
.
value
) // print current title
title
.
value
= 'Hello' // change current title

Set initial title immediately:

ts
const 
title
=
useTitle
('New Title')

Pass a ref and the title will be updated when the source ref changes:

ts
import { 
useTitle
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
messages
=
shallowRef
(0)
const
title
=
computed
(() => {
return !
messages
.
value
? 'No message' : `${
messages
.
value
} new messages`
})
useTitle
(
title
) // document title will match with the ref "title"

Pass an optional template tag Vue Meta Title Template to update the title to be injected into this template:

ts
const 
title
=
useTitle
('New Title', {
titleTemplate
: '%s | My Awesome Website'
})

WARNING

observe is incompatible with titleTemplate.

Type Declarations

Show Type Declarations
ts
export type 
UseTitleOptionsBase
= {
/** * Restore the original title when unmounted * @param originTitle original title * @returns restored title */
restoreOnUnmount
?:
| false | ((
originalTitle
: string,
currentTitle
: string,
) => string | null | undefined) } & ( | { /** * Observe `document.title` changes using MutationObserve * Cannot be used together with `titleTemplate` option. * * @default false */
observe
?: boolean
} | { /** * The template string to parse the title (e.g., '%s | My Website') * Cannot be used together with `observe` option. * * @default '%s' */
titleTemplate
?:
MaybeRef
<string> | ((
title
: string) => string)
} ) export type
UseTitleOptions
=
ConfigurableDocument
&
UseTitleOptionsBase
/** * Reactive document title. * * @see https://vueuse.org/useTitle * @param newTitle * @param options * @description It's not SSR compatible. Your value will be applied only on client-side. */ export declare function
useTitle
(
newTitle
:
ReadonlyRefOrGetter
<string | null | undefined>,
options
?:
UseTitleOptions
,
):
ComputedRef
<string | null | undefined>
export declare function
useTitle
(
newTitle
?:
MaybeRef
<string | null | undefined>,
options
?:
UseTitleOptions
,
):
Ref
<string | null | undefined>
export type
UseTitleReturn
=
ReturnType
<typeof
useTitle
>

Source

SourceDemoDocs

Contributors

Anthony Fu
IlyaL
Anthony Fu
Alex Kozack
Antério Vieira
NoiseFan
SerKo
Yauheni Vasiukevich
Robin
Doctorwu
ClemDee
Eugen Istoc
Levi (Nguyễn Lương Huy)
Preetesh Jain
Michael Roberts

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.7.0 on
0ab76 - feat: restore title on unmounted (#3570)

Released under the MIT License.

Turn AI into a coding partner
Claim 40% off for AIDD Masterclass.
Get discount