---
title: "PageLastCommit"
description: "PageLastCommit automatically displays the last update time, commit author, and commit message below a documentation page's title, with automatic author detection in PR squash-merge scenarios. Requires NUXT_GITHUB_TOKEN and github.rootDir, and supports custom date formats via Intl.DateTimeFormatOptions."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/components/page-last-commit"
---
# PageLastCommit

> PageLastCommit automatically displays the last update time, commit author, and commit message below a documentation page's title, with automatic author detection in PR squash-merge scenarios. Requires NUXT_GITHUB_TOKEN and github.rootDir, and supports custom date formats via Intl.DateTimeFormatOptions.

## Overview

The `PageLastCommit` component displays the last update information for the current documentation page, including:

- **Update time**: the time of the file's most recent commit
- **Author info**: the committer's GitHub username (clickable)
- **Commit message**: the message of the most recent commit (clickable to jump to the specific commit)

This component is built into the header area of documentation pages, with no need to add it manually.

## Demonstration

The component displays something like the following below the page description:

> Last updated on **2025/11/26 14:37** by `mhaibaraai` with `docs: refine documentation content and add template notes`

## Prerequisites

### 1. GitHub Token configuration

Configure your GitHub Personal Access Token in the `.env` file:

```bash [.env]
NUXT_GITHUB_TOKEN=ghp_your_personal_access_token_here
```

> [!WARNING]
> See: https://github.com/settings/tokens
> 
> The GitHub Token needs permission to read the repository's commit history (the 
> 
> repo
> 
>  or 
> 
> public_repo
> 
>  scope).

### 2. GitHub configuration

Make sure your GitHub information is configured correctly in `app/app.config.ts`:

```ts [app/app.config.ts]
export default defineAppConfig({
  github: {
    rootDir: 'docs', // The directory where the docs live
  }
})
```

## Customizing the date format

You can customize the date display format via the `dateFormat` configuration:

```ts [app/app.config.ts]
export default defineAppConfig({
  github: {
    rootDir: 'docs',
    dateFormat: {
      locale: 'zh-CN',
      options: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      }
    }
  }
})
```

### Common date format examples

<table>
<thead>
  <tr>
    <th>
      Configuration
    </th>
    
    <th>
      Example output
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        { year: 'numeric', month: 'short', day: 'numeric' }
      </code>
    </td>
    
    <td>
      Nov 26, 2025
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        { year: 'numeric', month: 'numeric', day: 'numeric' }
      </code>
    </td>
    
    <td>
      11/26/2025
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }
      </code>
    </td>
    
    <td>
      11/26/2025 14:37
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        { dateStyle: 'full' }
      </code>
    </td>
    
    <td>
      Wednesday, November 26, 2025
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        { dateStyle: 'medium', timeStyle: 'short' }
      </code>
    </td>
    
    <td>
      Nov 26, 2025, 14:37
    </td>
  </tr>
</tbody>
</table>

> [!TIP]
> 
> dateFormat.options
> 
>  uses the standard 
> 
> Intl.DateTimeFormatOptions
> 
>  configuration.

## PR squash merge support

The component intelligently handles GitHub's PR squash-merge scenario:

- When it detects that the committer is `web-flow` (GitHub's automatic merge bot)
- It automatically parses the PR number from the commit message (such as `#123`)
- It fetches and displays the actual PR author's information

## API

### Props

```ts
/**
 * Props for the PageLastCommit component
 */
interface PageLastCommitProps {
  /**
   * 文件路径（不含扩展名），通常由页面自动传入
   */
  stem: string;
  /**
   * 文件扩展名，通常由页面自动传入
   */
  extension: string;
  /**
   * 是否显示提交信息。
   * @default "true"
   */
  showMessage?: boolean | undefined;
  /**
   * 是否显示作者头像。
   * @default "true"
   */
  showAvatar?: boolean | undefined;
}
```

## Related

- [CommitChangelog](https://docs.mhaibaraai.cn/en/docs/components/commit-changelog) — display the complete Git commit timeline for a component

## Changelog

See commit history for [layer/app/components/content/PageLastCommit.vue](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/components/content/PageLastCommit.vue).

---

- [GitHub](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/content/PageLastCommit.vue)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.