From 131a07704d3b5e98347d2c89cef6c41e8348f40c Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Wed, 25 Nov 2020 01:12:01 +0900
Subject: [PATCH] fix: hydration mismatch with the "last update" feature

---
 src/client/theme-default/components/LastUpdated.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/LastUpdated.vue b/src/client/theme-default/components/LastUpdated.vue
index 0244f7ce..c46b4da9 100644
--- a/src/client/theme-default/components/LastUpdated.vue
+++ b/src/client/theme-default/components/LastUpdated.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, ref, computed, onMounted } from 'vue'
 import { useSiteDataByRoute, usePageData } from 'vitepress'
 
 export default defineComponent({
@@ -14,6 +14,8 @@ export default defineComponent({
     const site = useSiteDataByRoute()
     const page = usePageData()
 
+    const datetime = ref('')
+
     const hasLastUpdated = computed(() => {
       const lu = site.value.themeConfig.lastUpdated
 
@@ -26,8 +28,8 @@ export default defineComponent({
       return p === true ? 'Last Updated' : p
     })
 
-    const datetime = computed(() => {
-      return new Date(page.value.lastUpdated).toLocaleString('en-US')
+    onMounted(() => {
+      datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
     })
 
     return {