vitepress-plugin-page-meta

Two independent VitePress components for document page metadata:

• PageDates — displays published and revised dates from frontmatter, just above the page title
• ShareButtons — adds print and copy-link buttons, styled to the right edge of the content area

Installation

npm install vitepress-plugin-page-meta

Setup

// .vitepress/theme/index.js
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import { PageDates, ShareButtons } from 'vitepress-plugin-page-meta'

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      'doc-before':        () => [h(ShareButtons, { bordered: false }), h(PageDates)],
      'doc-footer-before': () => h(ShareButtons),
    })
  },
}

Frontmatter

PageDates reads the following frontmatter keys:

---
published: 2026-04-05
revised: 2026-04-12          # optional; also accepts an array of dates
---

ISO datetime strings (e.g. 2026-04-05T00:00:00.000Z) are automatically trimmed to the date part.

CSS Customization

All visual properties are exposed as CSS custom properties. Set them in your own stylesheet:

:root {
  /* Shared */
  --vp-page-meta-text-color: var(--vp-c-text-2);

  /* PageDates */
  --vp-page-meta-dates-font-size:    0.85rem;
  --vp-page-meta-dates-margin-top:   0;
  --vp-page-meta-dates-margin-bottom: 0.5rem;

  /* ShareButtons */
  --vp-page-meta-share-gap:          0.5rem;
  --vp-page-meta-share-padding-top:  1.5rem;
  --vp-page-meta-share-margin-bottom: 1.5rem;
  --vp-page-meta-share-border-top:   1px solid var(--vp-c-divider); /* only when bordered=true */
}

bordered prop

ShareButtons accepts a bordered prop (default: true) that adds a top border. Use bordered: false for the top placement where a border is not needed:

h(ShareButtons, { bordered: false })  // top — no border
h(ShareButtons)                       // bottom — bordered

Print

ShareButtons is automatically hidden in print output via @media print.

License

MIT © 2026 Rino, eMotionGraphics Inc.