From cbb2e9ce2ba3de72c2b415714c48033220fa99cd Mon Sep 17 00:00:00 2001
From: Christian Burkhart <1113278+jiblett1000@users.noreply.github.com>
Date: Tue, 8 Mar 2022 10:02:10 -0800
Subject: [PATCH] docs:  example using `useMeta` with `definePageMeta` (#3552)

---
 docs/content/3.docs/1.usage/3.meta-tags.md | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/docs/content/3.docs/1.usage/3.meta-tags.md b/docs/content/3.docs/1.usage/3.meta-tags.md
index 0d18ff1f70..2761c50e63 100644
--- a/docs/content/3.docs/1.usage/3.meta-tags.md
+++ b/docs/content/3.docs/1.usage/3.meta-tags.md
@@ -58,3 +58,29 @@ export default {
 }
 </script>
 ```
+
+## Example: usage with definePageMeta
+
+You can use `definePageMeta` along with `useMeta` to set metadata based on the current route.
+
+For example, to include the page title alongside your app name, first define your page title:
+
+```vue{}[pages/some-page.vue]
+<script setup>
+definePageMeta({
+  title: 'Some Page'
+})
+</script>
+```
+
+And then in your layout file:
+
+```vue{}[layouts/default.vue]
+<script setup>
+const route = useRoute()
+
+useMeta({
+  title: computed(() => `App Name - ${route.meta.title}`)
+})
+</script>
+```