Use title for feed, resource and document / segment

src/components/Resources/Feed.vue

@@ -3,10 +3,15 @@
 </template>
 
 <script>
+import { useTitle } from "@vueuse/core"
 import FeedGroup from '@/components/Resources/FeedGroup.vue'
 
 export default {
   components: { FeedGroup },
   props: ['feed'],
+  mounted () {
+    const title = useTitle()
+    title.value = `${this.feed.title}`
+  },
 }
 </script>

src/views/Document.vue

@@ -104,6 +104,7 @@ import TableOfContents from '@/components/Resources/TableOfContents.vue'
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import { useTitle } from "@vueuse/core"
 
 export default {
   components: {
@@ -160,7 +161,10 @@ export default {
     this.emitter.on('segment-click', async (v) => {
       this.hiddenSegmentIndex = v
       this.hiddenSegmentOpen = true
-    });
+    })
+
+    const title = useTitle()
+    title.value = `${this.selectedSegment.title} - ${this.resource.title}`
   },
   methods: {
     loadFont (font) {

src/views/Resource.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { useTitle } from "@vueuse/core"
 import { authStore } from '@/stores/auth'
 import ResourceItem from '../components/Resources/ResourceItem.vue'
 import LoadingDetail from '@/components/Shimmer/LoadingDetail.vue'
@@ -58,6 +59,9 @@ export default {
     await this.getResourceProgress()
     await this.setRecent()
     this.emitter.on('update-document-progress', this.updateDocumentProgress)
+
+    const title = useTitle()
+    title.value = `${this.resource.title}`
   },
 }
 </script>