Access Extended Page Data in Enhance Client App

[drewcook]

Title sums it up. I am extending the page data via a plugin. Let's say I add a new field meta to the Page object. I can access that just fine at runtime at the Vue layer, say in Layout.vue without issue. However, I need to also access this meta data I've created when I enhance the client app. Since there's no feature built into VuePress that allows us to customize the document.title format, I'm going this route as a solution.

I want to use the metadata that I've put into meta via extendsPageData in a plugin to achieve this, however, on initial load, this is undefined. The second time it is called, it is defined. What is the sequence of events that is happening to where it is undefined at first but then defined. At what point is my plugin's extendsPageData completing and at what point is defineClientAppEnhance being called? Is there a race condition occurring?

// plugin.ts
const myPlugin = {
  name: 'myPlugin',
  extendsPageData: (page) => {
  const meta = 'foobar'
    return { meta }
  },
};

// Layout.vue
import { usePageData } from '@vuepress/client'

const { value: { meta } } = usePageData()
console.log(meta) // 'foobar'

// enhanceClientApp.ts
import { usePageData } from '@vuepress/client'

// ideally, I'd like to do something like the following, since there's no easy way to do this via any API in VuePress
function generateDynamicTitle(meta) {
  if (document) document.title = `${meta} - My Site Name | ${otherMeta.foo}`
}

export default defineClientAppEnhance(({ app, router, siteData }) => {
  const { value: { meta } } = usePageData()
  console.log(meta) // undefined
  generateDynamicTitle(meta)

  router.afterEach(() => {
    console.log(meta) // 'foobar'
    generateDynamicTitle(meta)
  }
}

[laoergege]

Oh, I also meet. Because the data is async load. In my mind, the pageData should be tracked, which is only read.

[laoergege]

I commit an issue, but nobody respond.

#477 (comment)

[meteorlxy]

There is a previous discussion related to that: #72

[laoergege]

Thank you. I finally got my reason:hand_over_mouth:

[laoergege]

I use @vuepress/client in another project in which I write a vuepress plugin. The webpack finally bundled two different @vuepress/client codes. The correct way is to use the $page on the app instance.

[laoergege]

But I still think usePageData should return a computed value so that it can be tracked.