useTitle

リアクティブなドキュメントタイトル。

::: warning このコンポーザブルはSSRと互換性がありません。 :::

使用方法

import { useTitle } from '@vueuse/core'

const title = useTitle()
console.log(title.value) // 現在のタイトルを出力
title.value = 'Hello' // 現在のタイトルを変更

初期タイトルを即座に設定する:

import { useTitle } from '@vueuse/core'
// ---cut---
const title = useTitle('New Title')

ref を渡すと、ソースの ref が変更されたときにタイトルが更新されます:

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) // ドキュメントタイトルは "title" の ref と一致します

オプションのテンプレートタグ Vue Meta Title Template を渡して、このテンプレートに注入されるタイトルを更新します:

import { useTitle } from '@vueuse/core'
// ---cut---
const title = useTitle('New Title', {
  titleTemplate: '%s | My Awesome Website'
})

::: warning observe は titleTemplate と互換性がありません。 :::