useTitle ​
Reactive document title.
TIP
When using with Nuxt 3, this function will NOT be auto imported in favor of Nuxt's built-in useTitle()
. Use explicit import if you want to use the function from VueUse.
Demo ​
Title
Usage ​
js
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:
js
const title = useTitle('New Title')
Pass a ref
and the title will be updated when the source ref changes:
js
import { useTitle } from '@vueuse/core'
const messages = ref(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:
js
const title = useTitle('New Title', { titleTemplate: '%s | My Awesome Website' })
WARNING
observe
is incompatible with titleTemplate
.
Type Declarations ​
Show Type Declarations
typescript
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
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 ​
Contributors ​
Anthony Fu
Alex Kozack
Antério Vieira
Anthony Fu
Doctorwu
ClemDee
Eugen Istoc
Levi (Nguyá»…n LÆ°Æ¡ng Huy)
Preetesh Jain
Michael Roberts
Changelog ​
v10.7.0
on 12/5/2023v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: remove isFunction
and isString
utilsv10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
10e98
- feat(toRef)!: rename resolveRef
to toRef
v9.3.1
on 10/17/2022