Default Theme: Last Updated

Learn how to configure and customize the "Last Updated" feature in the VitePress default theme.

Basic Configuration

Enable Last Updated

Enable the last updated feature in your config:

javascript

// .vitepress/config.js
export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Updated at',
      formatOptions: {
        dateStyle: 'full',
        timeStyle: 'medium'
      }
    }
  }
}

Simple Configuration

javascript

export default {
  lastUpdated: true
}

This will show the last updated timestamp using the default format and text.

Configuration Options

Custom Text

Customize the "Last Updated" label:

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Last modified'
    }
  }
}

Date Format Options

Configure how the date is displayed:

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Updated at',
      formatOptions: {
        dateStyle: 'short',    // 'full', 'long', 'medium', 'short'
        timeStyle: 'short'     // 'full', 'long', 'medium', 'short'
      }
    }
  }
}

Locale-specific Formatting

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Updated at',
      formatOptions: {
        dateStyle: 'medium',
        timeStyle: 'short',
        locale: 'en-US'
      }
    }
  }
}

Advanced Configuration

Custom Formatter Function

Use a custom function to format the date:

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Updated',
      formatOptions: (timestamp) => {
        const date = new Date(timestamp)
        const now = new Date()
        const diffTime = Math.abs(now - date)
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
        
        if (diffDays === 1) {
          return 'yesterday'
        } else if (diffDays < 7) {
          return `${diffDays} days ago`
        } else {
          return date.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          })
        }
      }
    }
  }
}

Conditional Display

Show last updated only for specific pages:

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Updated at',
      formatOptions: {
        dateStyle: 'medium',
        timeStyle: 'short'
      },
      // Custom function to determine if last updated should be shown
      shouldShow: (page) => {
        // Only show for guide and API pages
        return page.relativePath.startsWith('guide/') || 
               page.relativePath.startsWith('api/')
      }
    }
  }
}

Multi-language Configuration

Localized Last Updated

Configure different text for different languages:

javascript

export default {
  lastUpdated: true,
  
  locales: {
    root: {
      themeConfig: {
        lastUpdated: {
          text: 'Last updated',
          formatOptions: {
            dateStyle: 'medium',
            timeStyle: 'short'
          }
        }
      }
    },
    zh: {
      themeConfig: {
        lastUpdated: {
          text: '最后更新于',
          formatOptions: {
            dateStyle: 'medium',
            timeStyle: 'short',
            locale: 'zh-CN'
          }
        }
      }
    },
    es: {
      themeConfig: {
        lastUpdated: {
          text: 'Última actualización',
          formatOptions: {
            dateStyle: 'medium',
            timeStyle: 'short',
            locale: 'es-ES'
          }
        }
      }
    }
  }
}

Styling

Default Last Updated Styling

The default last updated element uses these CSS classes:

css

.vp-doc-footer .last-updated {
  font-size: 14px;
  color: var(--vp-c-text-2);
  margin-top: 16px;
}

.vp-doc-footer .last-updated-text {
  font-weight: 500;
}

Custom Styling

Customize the appearance of the last updated information:

css

/* Custom last updated styles */
.vp-doc-footer .last-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
  border: 1px solid var(--vp-c-border);
  font-size: 13px;
  color: var(--vp-c-text-2);
  margin-top: 24px;
}

.vp-doc-footer .last-updated::before {
  content: "📅";
  font-size: 16px;
}

.vp-doc-footer .last-updated-text {
  font-weight: 600;
  color: var(--vp-c-text-1);
}

.vp-doc-footer .last-updated-time {
  color: var(--vp-c-brand-1);
  font-weight: 500;
}

Icon-based Styling

Add icons to the last updated information:

css

.vp-doc-footer .last-updated {
  position: relative;
  padding-left: 32px;
}

.vp-doc-footer .last-updated::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0.6;
}

Git Integration

Automatic Last Updated from Git

VitePress automatically extracts the last updated time from Git commits. Ensure your Git history is preserved:

bash

# When deploying, preserve Git history
git clone --depth 1 https://github.com/username/repo.git

# Or fetch full history if needed
git fetch --unshallow

Custom Git Command

Override the Git command used to get the last updated time:

javascript

// .vitepress/config.js
export default {
  lastUpdated: true,
  
  // Custom git command to get last updated time
  transformPageData(pageData) {
    const { execSync } = require('child_process')
    
    try {
      const timestamp = execSync(
        `git log -1 --format=%ct "${pageData.filePath}"`,
        { encoding: 'utf-8' }
      ).trim()
      
      if (timestamp) {
        pageData.lastUpdated = parseInt(timestamp) * 1000
      }
    } catch (error) {
      console.warn(`Failed to get last updated time for ${pageData.filePath}`)
    }
    
    return pageData
  }
}

Exclude Files from Last Updated

Exclude certain files from showing last updated:

javascript

export default {
  lastUpdated: true,
  
  transformPageData(pageData) {
    // Don't show last updated for index pages
    if (pageData.relativePath.endsWith('index.md')) {
      pageData.lastUpdated = null
    }
    
    // Don't show for specific directories
    if (pageData.relativePath.startsWith('examples/')) {
      pageData.lastUpdated = null
    }
    
    return pageData
  }
}

Best Practices

Content Guidelines

Consistent formatting - Use the same date format across all pages
Clear labeling - Use descriptive text for the last updated label
Timezone awareness - Consider your audience's timezone
Relative time - Show relative time for recent updates

Performance Guidelines

Cache Git operations - Cache last updated information
Optimize Git commands - Use efficient Git commands
Lazy loading - Load last updated information when needed
Batch operations - Process multiple files together

Accessibility Guidelines

Semantic markup - Use proper HTML elements
Screen reader support - Provide appropriate ARIA labels
High contrast - Ensure visibility in high contrast mode
Keyboard navigation - Support keyboard-only users

SEO Guidelines

Structured data - Include last modified date in structured data
Meta tags - Add last modified meta tags
Sitemap - Include last modified dates in sitemap
Search engines - Help search engines understand content freshness

Examples

Basic Setup

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Last updated',
      formatOptions: {
        dateStyle: 'medium',
        timeStyle: 'short'
      }
    }
  }
}

Advanced Setup with Custom Formatting

javascript

export default {
  lastUpdated: true,
  
  themeConfig: {
    lastUpdated: {
      text: 'Updated',
      formatOptions: (timestamp) => {
        const date = new Date(timestamp)
        const now = new Date()
        const diffTime = Math.abs(now - date)
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
        
        if (diffDays === 1) {
          return 'yesterday'
        } else if (diffDays < 7) {
          return `${diffDays} days ago`
        } else if (diffDays < 30) {
          const weeks = Math.floor(diffDays / 7)
          return `${weeks} week${weeks > 1 ? 's' : ''} ago`
        } else {
          return date.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          })
        }
      }
    }
  }
}

Multi-language Setup

javascript

export default {
  lastUpdated: true,
  
  locales: {
    root: {
      themeConfig: {
        lastUpdated: {
          text: 'Last updated',
          formatOptions: {
            dateStyle: 'medium',
            timeStyle: 'short',
            locale: 'en-US'
          }
        }
      }
    },
    zh: {
      themeConfig: {
        lastUpdated: {
          text: '最后更新于',
          formatOptions: {
            dateStyle: 'medium',
            timeStyle: 'short',
            locale: 'zh-CN'
          }
        }
      }
    }
  }
}

Default Theme: Last Updated ​

Basic Configuration ​

Enable Last Updated ​

Simple Configuration ​

Configuration Options ​

Custom Text ​

Date Format Options ​

Locale-specific Formatting ​

Advanced Configuration ​

Custom Formatter Function ​

Conditional Display ​

Multi-language Configuration ​

Localized Last Updated ​

Styling ​

Default Last Updated Styling ​

Custom Styling ​

Icon-based Styling ​

Git Integration ​

Automatic Last Updated from Git ​

Custom Git Command ​

Exclude Files from Last Updated ​

Best Practices ​

Content Guidelines ​

Performance Guidelines ​

Accessibility Guidelines ​

SEO Guidelines ​

Examples ​

Basic Setup ​

Advanced Setup with Custom Formatting ​

Multi-language Setup ​

Default Theme: Last Updated

Basic Configuration

Enable Last Updated

Simple Configuration

Configuration Options

Custom Text

Date Format Options

Locale-specific Formatting

Advanced Configuration

Custom Formatter Function

Conditional Display

Multi-language Configuration

Localized Last Updated

Styling

Default Last Updated Styling

Custom Styling

Icon-based Styling

Git Integration

Automatic Last Updated from Git

Custom Git Command

Exclude Files from Last Updated

Best Practices

Content Guidelines

Performance Guidelines

Accessibility Guidelines

SEO Guidelines

Examples

Basic Setup

Advanced Setup with Custom Formatting

Multi-language Setup