VueUseuseTitle
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
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')
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"
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' })
const title = useTitle('New Title', { titleTemplate: '%s | My Awesome Website' })
WARNING
observe is incompatible with titleTemplate.
Type Declarations
typescript
export type UseTitleOptionsBase =
| {
/**
* 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: MaybeReadonlyRef<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>
export type UseTitleOptionsBase =
| {
/**
* 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: MaybeReadonlyRef<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
ClemDee
Eugen Istoc
Levi (Nguyễn Lương Huy)
Preetesh Jain
Michael Roberts