4a3ce4cc1d
Add comprehensive reference documentation for: - Vitest: environments, projects/workspaces, type testing, vi utilities - Pinia: HMR, Nuxt integration, SSR setup - Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
116 lines
2.6 KiB
Markdown
116 lines
2.6 KiB
Markdown
---
|
|
category: Browser
|
|
---
|
|
|
|
# useTitle
|
|
|
|
Reactive document title.
|
|
|
|
::: warning
|
|
This composable isn't compatible with SSR.
|
|
:::
|
|
|
|
## 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
|
|
import { useTitle } from '@vueuse/core'
|
|
// ---cut---
|
|
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](https://vue-meta.nuxtjs.org/guide/metainfo.html) to update the title to be injected into this template:
|
|
|
|
```ts
|
|
import { useTitle } from '@vueuse/core'
|
|
// ---cut---
|
|
const title = useTitle('New Title', {
|
|
titleTemplate: '%s | My Awesome Website'
|
|
})
|
|
```
|
|
|
|
::: warning
|
|
`observe` is incompatible with `titleTemplate`.
|
|
:::
|
|
|
|
## 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
|
|
export type UseTitleReturn =
|
|
| ComputedRef<string | null | undefined>
|
|
| Ref<string | null | undefined>
|
|
/**
|
|
* 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>
|
|
```
|