How to set dynamic page title?

[sharpchen]

I'd like to set title for pages [docName].md by the data imported. But it does not work.
I am new to vue and vite, I may misunderstand something, thank you for any help!

---
title: Document
page: true
description: Document
aside: false
---

<script lang="ts" setup>
import { data } from "../data/Document.data";
import { useData } from "vitepress";
import { ref, onMounted } from 'vue';
const { params, frontmatter } = useData();
const docTitle: string = ref(getDocTitle(data));

onMounted(() => {
    frontmatter.title = docTitle.value;
})

function getDocTitle(data: unknown) {
    // ...filter a title from data
}
</script>

[brc-dd]

You can simply do document.title = docTitle.value

But note that this might not work with some search engines. If SEO is a priority, use transformPageData hook instead.

[sharpchen]

document.title = docTitle.value and transformPageData both overrides ${frontmatter.title}|${title_in_siteconfig}. And I can't import my data in config to filter

import { PageData, defineConfig } from 'vitepress';
import { data as documentInfos } from '../data/Document.data'; // Build-time error

export default defineConfig({
    transformPageData(pageData: PageData, { siteConfig }): void {
        pageData.title = documentInfos.filter(
            x => x.docRoute === pageData.frontmatter.params!.docRoute
        )[0].docName;
    },//...

docs/.vitepress/config.mts:2:9: ERROR: No matching export in "docs/data/Document.data.ts" for import "data"