CommitChangelog

GitHubView source
CommitChangelog automatically fetches the Git commit history of a specific component or file from a GitHub repository and displays it as timeline cards. It supports filtering by filename, path, and author, as well as path inference via commitPath, suffix, and casing. Requires the NUXT_GITHUB_TOKEN environment variable.

Overview

Fetches the commit history of a specified file path from a GitHub repository and displays it as a timeline.

Prerequisites

  • GitHub configuration: configure your GitHub information in app/app.config.ts. See GitHub integration configuration for details.
  • Environment variable: configure your GitHub Token in the .env file: 
    NUXT_GITHUB_TOKEN=ghp_your_personal_access_token_here
The GitHub Token needs permission to read the repository's commit history (the repo or public_repo scope). You can create a new token in GitHub Settings > Developer settings > Personal access tokens.
If NUXT_GITHUB_TOKEN is not configured, the component will not error; instead it displays "No recent changes".

Usage

Basic usage

Use the following syntax in your Markdown documentation:

md
:commit-changelog

The component automatically infers the component name from the current page route and fetches the commit history of the corresponding file.

Displaying a Vue component's commit history

md
:commit-changelog{name="Accordion"}

Example output:

  • a1b2c — fix: resolve the collapse animation delay #45
  • d4e5f — feat: add disabled prop support

Displaying a TypeScript file's commit history

md
:commit-changelog{suffix="ts" name="useColorMode"}

Filtering commits by author

Add author to the URL query parameters to show only a specific author's commits:

md
:commit-changelog{author="user@example.com"}
The author parameter can be a GitHub username or email address. For example: ?author=octocat or ?author=user@example.com

Files named in kebab-case

For composables or utils files named in kebab-case:

md
:commit-changelog{suffix="ts" name="use-user" casing="kebab" commitPath="composables"}

This looks for the commit history of composables/use-user.ts.

If the files in your project are consistently named in kebab-case, it is recommended to configure github.casing: 'kebab' globally in app/app.config.ts so you do not need to repeat it for every component.
app/app.config.ts
export default defineAppConfig({
  github: {
    casing: 'kebab', // Use kebab-case as the global default
    // Other configuration...
  }
})

Full configuration example

md
::commit-changelog
---
commitPath: 'packages/core/src'
prefix: 'components'
suffix: 'ts'
name: 'useUser'
author: 'user@example.com'
---

API

Props

Prop Default Type
namestring

要获取更新日志的组件或文件名

commitPath'src'string

仓库中的文件路径

prefixstring

文件路径的前缀

suffix'vue'string

文件扩展名

authorstring

按作者筛选提交

casing'auto'"auto" | "kebab" | "camel" | "pascal"

文件名的命名格式

  • 'auto': Vue 文件使用 PascalCase，其他使用 camelCase（默认）
  • 'kebab': 保持 kebab-case（如 use-user.ts）
  • 'camel': 转换为 camelCase（如 useUser.ts）
  • 'pascal': 转换为 PascalCase（如 UseUser.ts）

Related

Changelog

No recent changes

ComponentCode

ComponentCode lets authors drive the live rendering of any registered Vue component from a declarative property matrix in Markdown, while synthesizing a copy-paste Vue snippet in sync.

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.

Copyright © 2024 - 2026