Skip to content

Runtime API Examples

This page demonstrates usage of some of the runtime APIs provided by VitePress.

The main useData() API can be used to access site, theme, and page data for the current page. It works in both .md and .vue files:

md
<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

Results

Theme Data

{
  "logo": "/logo.png",
  "outline": {
    "level": [
      1,
      3
    ]
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "Quick Start",
      "link": "/quick-start/quick-start"
    },
    {
      "text": "Examples",
      "link": "/examples/markdown-examples"
    },
    {
      "text": "入会",
      "link": "https://club.caigamer.com"
    },
    {
      "text": "返回社区",
      "link": "https://caigamer.cn"
    }
  ],
  "sidebar": [
    {
      "text": "Quick Start",
      "collapsed": true,
      "items": [
        {
          "text": "Overview",
          "link": "/quick-start/quick-start"
        },
        {
          "text": "Installation",
          "link": "/quick-start/quick-start#installation"
        },
        {
          "text": "Basic Setup",
          "link": "/quick-start/quick-start#basic-setup"
        },
        {
          "text": "Configuration",
          "link": "/quick-start/quick-start#configuration"
        }
      ]
    },
    {
      "text": "Advanced",
      "collapsed": true,
      "items": [
        {
          "text": "Custom Theme",
          "link": "/advanced/custom-theme"
        },
        {
          "text": "Markdown Extensions",
          "link": "/advanced/markdown-extensions"
        },
        {
          "text": "Code Highlighting",
          "link": "/advanced/code-highlighting"
        }
      ]
    },
    {
      "text": "Deployment",
      "collapsed": true,
      "items": [
        {
          "text": "Build for Production",
          "link": "/quick-start/quick-start#build-for-production"
        },
        {
          "text": "GitHub Pages",
          "link": "/quick-start/quick-start#deploy-to-github-pages"
        },
        {
          "text": "Netlify",
          "link": "/quick-start/quick-start#netlify-deployment"
        }
      ]
    },
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/examples/api-examples"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M836.8 608 833.6 596.8 832 590.4 830.4 584 828.8 577.6 825.6 571.2 824 564.8 820.8 558.4 816 547.2 811.2 537.6 806.4 529.6 801.6 521.6 798.4 515.2 795.2 508.8 787.2 497.6 779.2 484.8 776 481.6 776 480 776 480 777.6 475.2 779.2 470.4 780.8 464 782.4 459.2 782.4 454.4 782.4 451.2 782.4 448 782.4 444.8 782.4 441.6 780.8 435.2 779.2 428.8 777.6 422.4 774.4 417.6 771.2 412.8 769.6 408 768 404.8 763.2 398.4 761.6 396.8 761.6 393.6 760 382.4 758.4 374.4 758.4 364.8 755.2 355.2 752 344 750.4 337.6 748.8 331.2 747.2 324.8 745.6 318.4 744 312 740.8 305.6 734.4 292.8 731.2 286.4 728 280 723.2 273.6 720 267.2 713.6 260.8 710.4 254.4 704 248 699.2 243.2 692.8 236.8 686.4 232 683.2 228.8 680 225.6 672 220.8 664 216 654.4 211.2 646.4 206.4 636.8 203.2 627.2 198.4 617.6 195.2 608 192 598.4 190.4 588.8 187.2 579.2 185.6 568 184 558.4 184 548.8 182.4 537.6 182.4 528 182.4 518.4 182.4 508.8 182.4 499.2 184 489.6 185.6 480 187.2 470.4 188.8 460.8 190.4 451.2 193.6 443.2 196.8 435.2 200 425.6 203.2 417.6 206.4 411.2 211.2 403.2 214.4 396.8 219.2 390.4 224 384 230.4 376 236.8 369.6 244.8 361.6 252.8 355.2 259.2 350.4 267.2 344 273.6 339.2 281.6 337.6 284.8 334.4 288 329.6 296 326.4 302.4 323.2 308.8 320 315.2 316.8 321.6 315.2 328 313.6 334.4 310.4 340.8 307.2 350.4 305.6 361.6 304 369.6 304 376 304 382.4 304 387.2 304 390.4 300.8 393.6 299.2 396.8 297.6 398.4 296 401.6 294.4 408 292.8 412.8 292.8 419.2 292.8 422.4 292.8 427.2 288 432 284.8 438.4 283.2 443.2 281.6 448 280 452.8 278.4 457.6 278.4 460.8 278.4 465.6 278.4 468.8 280 472 280 476.8 281.6 480 280 481.6 273.6 486.4 265.6 494.4 259.2 499.2 254.4 502.4 251.2 507.2 248 508.8 243.2 515.2 236.8 521.6 232 528 227.2 536 220.8 542.4 216 550.4 212.8 558.4 208 566.4 204.8 574.4 201.6 580.8 198.4 588.8 196.8 595.2 195.2 603.2 192 609.6 192 616 190.4 622.4 188.8 628.8 188.8 641.6 188.8 652.8 188.8 657.6 188.8 664 190.4 672 192 675.2 192 680 193.6 683.2 195.2 686.4 196.8 691.2 198.4 691.2 200 692.8 200 694.4 201.6 694.4 201.6 694.4 206.4 692.8 212.8 692.8 216 691.2 220.8 688 225.6 684.8 228.8 681.6 233.6 678.4 236.8 673.6 240 670.4 243.2 665.6 244.8 662.4 246.4 659.2 249.6 652.8 251.2 651.2 252.8 649.6 252.8 648 252.8 646.4 254.4 646.4 254.4 644.8 256 644.8 256 646.4 256 646.4 257.6 646.4 259.2 654.4 260.8 660.8 264 667.2 267.2 673.6 268.8 680 272 686.4 275.2 691.2 278.4 696 281.6 700.8 284.8 705.6 291.2 713.6 297.6 721.6 302.4 726.4 308.8 731.2 313.6 736 321.6 742.4 323.2 742.4 324.8 744 324.8 745.6 324.8 745.6 323.2 745.6 321.6 745.6 316.8 747.2 312 747.2 307.2 748.8 302.4 748.8 299.2 750.4 294.4 752 291.2 753.6 288 755.2 284.8 755.2 283.2 758.4 280 758.4 278.4 761.6 275.2 764.8 273.6 766.4 272 768 270.4 772.8 268.8 776 268.8 779.2 267.2 782.4 267.2 785.6 267.2 787.2 267.2 790.4 267.2 793.6 267.2 795.2 267.2 798.4 267.2 801.6 267.2 803.2 268.8 808 270.4 809.6 272 812.8 273.6 814.4 275.2 816 276.8 817.6 278.4 820.8 284.8 824 289.6 827.2 294.4 830.4 300.8 832 307.2 835.2 315.2 836.8 321.6 838.4 329.6 840 337.6 841.6 345.6 843.2 355.2 843.2 371.2 846.4 388.8 846.4 403.2 846.4 411.2 846.4 417.6 846.4 425.6 846.4 432 844.8 438.4 844.8 443.2 843.2 452.8 841.6 459.2 840 465.6 838.4 476.8 833.6 483.2 832 488 830.4 496 825.6 504 820.8 508.8 817.6 513.6 814.4 520 814.4 524.8 816 534.4 816 539.2 816 542.4 816 545.6 817.6 548.8 817.6 553.6 819.2 558.4 820.8 568 824 579.2 828.8 588.8 830.4 598.4 833.6 609.6 835.2 619.2 836.8 630.4 838.4 640 840 649.6 840 659.2 841.6 668.8 841.6 678.4 841.6 688 841.6 697.6 840 705.6 840 713.6 838.4 721.6 836.8 729.6 835.2 737.6 833.6 740.8 832 744 830.4 750.4 828.8 756.8 825.6 761.6 822.4 768 820.8 771.2 817.6 774.4 814.4 776 812.8 779.2 809.6 782.4 804.8 782.4 803.2 784 801.6 784 800 785.6 796.8 785.6 795.2 785.6 792 785.6 788.8 784 785.6 784 782.4 782.4 780.8 780.8 777.6 777.6 774.4 776 771.2 772.8 769.6 766.4 763.2 760 758.4 753.6 755.2 745.6 750.4 729.6 742.4 726.4 740.8 724.8 739.2 723.2 739.2 731.2 731.2 736 726.4 737.6 723.2 744 715.2 748.8 707.2 753.6 700.8 756.8 694.4 763.2 680 768 668.8 769.6 660.8 771.2 657.6 772.8 656 774.4 654.4 776 654.4 776 654.4 780.8 664 784 672 787.2 675.2 788.8 680 792 684.8 795.2 689.6 798.4 692.8 800 694.4 801.6 696 803.2 696 804.8 697.6 808 699.2 809.6 699.2 811.2 699.2 812.8 699.2 814.4 699.2 817.6 697.6 819.2 697.6 820.8 696 824 692.8 825.6 691.2 827.2 689.6 828.8 686.4 830.4 683.2 832 680 833.6 676.8 835.2 668.8 836.8 660.8 838.4 651.2 838.4 646.4 838.4 641.6 838.4 636.8 838.4 630.4 838.4 620.8Z\"/><path d=\"M513.6 20.8c-272 0-494.4 222.4-494.4 494.4S241.6 1008 513.6 1008 1008 785.6 1008 513.6 785.6 20.8 513.6 20.8zM513.6 976C259.2 976 52.8 768 52.8 513.6s208-462.4 462.4-462.4S976 259.2 976 513.6 768 976 513.6 976z\"/></svg>"
      },
      "link": "https://qm.qq.com/cgi-bin/qm/qr?k=qLW9It9CpheQ0njp4XC9FJGjxgLaTKHh&jump_from=webapi&authKey=uT6u1/lgVpPV9cSHsDHiq8c+hnRux+LAgt0HgHO3q5OvEKm+exJFFTTBob8BnO02"
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "examples/api-examples.md",
  "filePath": "examples/api-examples.md"
}

Page Frontmatter

{
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.