useTitle

反应式文档标题。

¥Reactive document title.

警告

此可组合项与 SSR 不兼容。

¥This composable isn't compatible with SSR.

示例

源代码演练场

Title

用法

¥Usage

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')

通过 ref，标题将在源引用更改时更新：

¥Pass a ref and the title will be updated when the source ref changes:

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"

传递一个可选的模板标签 Vue 元标题模板 来更新要注入到该模板中的标题：

¥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'
})

警告

observe 与 titleTemplate 不兼容。

¥observe is incompatible with titleTemplate.