fix: fix hydration mismatch with the "last update" feature (#150)

vuejs · Nov 24, 2020 · fc725e7 · fc725e7
1 parent 0b181e7
commit fc725e7
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/client/theme-default/components/LastUpdated.vue b/src/client/theme-default/components/LastUpdated.vue
@@ -6,14 +6,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, ref, computed, onMounted } from 'vue'
 import { useSiteDataByRoute, usePageData } from 'vitepress'
 
 export default defineComponent({
   setup() {
     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 {