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,11 +15,16 @@ const control = usePrevNext()
 
 <template>
   <footer v-if="control.prev || control.next" class="VPDocFooter">
-    <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 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">
@@ -29,7 +35,7 @@ const control = usePrevNext()
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
-        <a v-if="control.next"  class="pager-link next" :href="normalizeLink(control.next.link)">
+        <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
           <span class="desc">Next page</span>
           <span class="title">{{ control.next.text }}</span>
         </a>
@@ -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.