feat(useTitle): accept ref as argument

antfu · Nov 1, 2020 · b658303 · b658303
1 parent 5ac0d59
commit b658303
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/core/useTitle/index.md b/packages/core/useTitle/index.md
@@ -11,3 +11,23 @@ const title = useTitle()
 console.log(title.value) // print current title
 title.value = 'Hello' // change current title
 ```
+
+Set initial title immediately 
+
+```js
+const title = useTitle()
+```
+
+It's also possible to pass a ref
+
+```js
+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"
+```
diff --git a/packages/core/useTitle/index.ts b/packages/core/useTitle/index.ts
@@ -1,11 +1,17 @@
 import { isClient, isString } from '@vueuse/shared'
-import { ref, watch } from 'vue-demi'
+import { ref, watch, Ref, ComputedRef, isRef } from 'vue-demi'
 
 export function useTitle(
-  override: string | null = null,
+  newTitle: Ref<string> | ComputedRef<string> | string | null = null,
   document = isClient ? window.document : null,
 ) {
-  const title = ref<string | null>(isString(override) ? override : document?.title || null)
+  const title = isRef(newTitle)
+    ? newTitle
+    : ref<string | null>(
+      isString(newTitle)
+        ? newTitle
+        : document?.title || null,
+    )
 
   watch(
     title,