inject $page

lib/app/composables/pageData.js

@@ -1,3 +1,6 @@
-export function usePageData() {
+import { toRef } from 'vue'
+import { useRoute } from './router'
 
+export function usePageData() {
+  return toRef(useRoute(), 'pageData')
 }

lib/app/composables/siteData.js

@@ -9,7 +9,7 @@ const parse = (data) =>
   __DEV__ ? readonly(JSON.parse(data)) : JSON.parse(data)
 
 // site data
-export const siteDataRef = shallowRef(parse(serialized))
+const siteDataRef = shallowRef(parse(serialized))
 
 export function useSiteData() {
   return siteDataRef

lib/app/index.js

@@ -1,7 +1,8 @@
 import { createApp, h } from 'vue'
 import { Content } from './components/Content'
 import { useRouter } from './composables/router'
-import { siteDataRef } from './composables/siteData'
+import { useSiteData } from './composables/siteData'
+import { usePageData } from './composables/pageData'
 import Theme from '/@theme/index'
 
 const App = {
@@ -17,10 +18,21 @@ const App = {
 
 const app = createApp(App)
 
-Object.defineProperty(app.config.globalProperties, '$site', {
-  get: () => siteDataRef.value
-})
-
 app.component('Content', Content)
 
+app.mixin({
+  beforeCreate() {
+    const siteRef = useSiteData()
+    const pageRef = usePageData()
+    Object.defineProperties(this, {
+      $site: {
+        get: () => siteRef.value
+      },
+      $page: {
+        get: () => pageRef.value
+      }
+    })
+  }
+})
+
 app.mount('#app')