f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
114 lines
2.6 KiB
Markdown
114 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
|
|
/**
|
|
* 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>
|
|
```
|