feat: add `LastUpdated` support

close https://github.com/vuejs/vitepress/issues/668 https://github.com/vuejs/vitepress/issues/669

docs/.vitepress/config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   lang: 'en-US',
   title: 'VitePress',
   description: 'Vite & Vue powered static site generator.',
+  lastUpdated: true,
 
   themeConfig: {
     nav: nav(),

src/client/theme-default/components/VPDocFooter.vue

@@ -5,8 +5,9 @@ import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
 import VPIconEdit from './icons/VPIconEdit.vue'
 import VPLink from './VPLink.vue'
+import VPLastUpdated from './VPLastUpdated.vue'
 
-const { theme, frontmatter } = useData()
+const { theme, page, frontmatter } = useData()
 
 const editLink = useEditLink()
 const control = usePrevNext()
@@ -14,12 +15,17 @@ const control = usePrevNext()
 
 <template>
   <footer v-if="control.prev || control.next" class="VPDocFooter">
+    <div class="edit-info">
       <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
         <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
           <VPIconEdit class="edit-link-icon" />
           {{ editLink.text }}
         </VPLink>
       </div>
+      <div v-if="page.lastUpdated">
+        <VPLastUpdated />
+      </div>
+    </div>
 
     <div class="prev-next">
       <div class="pager">
@@ -43,6 +49,15 @@ const control = usePrevNext()
   margin-top: 64px;
 }
 
+.edit-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
 .edit-link {
   padding-bottom: 14px;
 }
@@ -52,9 +67,6 @@ const control = usePrevNext()
   align-items: center;
   border: 0;
   padding: 10px 0;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
   color: var(--vp-c-brand);
   transition: color 0.25s;
 }

src/client/theme-default/components/VPLastUpdated.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref, onMounted, watchEffect } from 'vue'
+import { useData } from 'vitepress'
+
+const { theme, page } = useData()
+
+const datetime = ref('')
+onMounted(() => {
+  watchEffect(() => {
+    // locale string might be different based on end user
+    // and will lead to potential hydration mismatch if calculated at build time
+    datetime.value = new Date(page.value.lastUpdated!).toLocaleString(window.navigator.language)
+  })
+})
+</script>
+
+<template>
+  <div>
+    {{ theme.lastUpdated ?? 'Edit this page' }}: {{ datetime }}
+  </div>
+</template>

types/default-theme.d.ts

@@ -23,6 +23,13 @@ export namespace DefaultTheme {
      */
     editLink?: EditLink
 
+    /**
+     * Show last updated time at the bottom of the page. Defaults to `false`.
+     * If given a string, it will be displayed as a prefix (default value:
+     * "Last Updated").
+     */
+    lastUpdated?: string | boolean
+
     /**
      * The social links to be displayed at the end of the nav bar. Perfect for
      * placing links to social services such as GitHub, Twitter, Facebook, etc.