useTitle
Reactive document title.
TIP
When using with Nuxt 3, this functions 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
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
const title = useTitle('New Title')
const title = useTitle('New Title')
Pass a ref and the title will be updated when the source ref changes
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:
const title = useTitle('New Title', { titleTemplate: '%s | My Awesome Website' })
const title = useTitle('New Title', { titleTemplate: '%s | My Awesome Website' })
Type Declarations
export interface UseTitleOptions extends ConfigurableDocument {
/**
* Observe `document.title` changes using MutationObserve
*
* @default false
*/
observe?: boolean
/**
* The template string to parse the title (e.g., '%s | My Website')
*
* @default '%s'
*/
titleTemplate?: string
}
/**
* Reactive document title.
*
* @see https://vueuse.org/useTitle
* @param newTitle
* @param options
*/
export declare function useTitle(
newTitle?: MaybeRef<string | null | undefined>,
options?: UseTitleOptions
): Ref<string | null | undefined>
export declare type UseTitleReturn = ReturnType<typeof useTitle>
export interface UseTitleOptions extends ConfigurableDocument {
/**
* Observe `document.title` changes using MutationObserve
*
* @default false
*/
observe?: boolean
/**
* The template string to parse the title (e.g., '%s | My Website')
*
* @default '%s'
*/
titleTemplate?: string
}
/**
* Reactive document title.
*
* @see https://vueuse.org/useTitle
* @param newTitle
* @param options
*/
export declare function useTitle(
newTitle?: MaybeRef<string | null | undefined>,
options?: UseTitleOptions
): Ref<string | null | undefined>
export declare type UseTitleReturn = ReturnType<typeof useTitle>
Source
Contributors
Anthony Fu
Alex Kozack
Antério Vieira
Preetesh Jain
Michael Roberts