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:

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

const { theme, page, frontmatter } = useData();

var fruits = ['apple', 'banana', 'orange'];

</script>

## Results

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

### Theme Data - Loop: v-for JSON array 
<ul>
  <li v-for="item in theme.nav">
      {{ item.text }}
  </li>
</ul>

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

### Page Frontmatter - Single Item
<pre>{{ frontmatter.name }}</pre>

### Page Frontmatter - Loop: v-for
<ul>
    <li v-for="(value, key) in frontmatter">
      {{ key }}: {{ value }}
    </li>
</ul>

### Simple JS Array - Loop: v-for w index
<div>
    <p v-for="(x, index) in fruits">
      {{ index }}:  {{ x }} <br>
    </p>
</div>

Results

Theme Data

{
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Examples",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "More MD Examples",
          "link": "/markdown"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        },
        {
          "text": "Pinboard Topics",
          "link": "/pinboard"
        },
        {
          "text": "Javascript Links",
          "link": "/javascript"
        },
        {
          "text": "Node Links",
          "link": "/node"
        },
        {
          "text": "CSS/HTML Links",
          "link": "/csshtml"
        },
        {
          "text": "Reports List",
          "link": "/reports_index.md"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "footer": {
    "message": "Vitepress Powered Site",
    "copyright": "Copyright © 2025"
  }
}

Theme Data - Loop: v-for JSON array

• Home
• Examples

Page Data

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

Page Frontmatter - Single Item

rick

Page Frontmatter - Loop: v-for

• outline: deep
• name: rick
• date: 06/01/25

Simple JS Array - Loop: v-for w index

0: apple

1: banana

2: orange

More

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

Table - Included MD File

Flag	Date	Description	Link
	02/20/25	javascript google get tomorrow's date	????
	02/20/25	websocket vs socket.o guide web server javascript python	jsdev.space
	02/19/25	node.js streams javascript	medium.com
	02/19/25	http polling vs websockets vs sse servers javascript	javascript.plainenglish.io
	02/19/25	una ui components for vue html javascript	unaui.com
	02/18/25	replicad javascript 3d cad library	replicad.xyz
◼	02/18/25	fixi small version of htmx javascript	github.com
◼	02/18/25	vue is easy vue.js good detailed overview javascript	fadamakis.com
	02/17/25	ways to abort javascript execution	www.geeksforgeeks.org
	02/17/25	javascript generators guide to yield and iterators	jsdev.space
◼	02/16/25	comprehensive list of 500 javascript project ideas for developers	github.com
	02/16/25	simple web components demo of javascript html components	github.com
◼	02/10/25	flatpickr lightweight javascript datetimepicker html	github.com
	02/10/25	var let and const review javascript	www.freecodecamp.org
	02/04/25	html javascript get the filename and extension from input type file	stackoverflow.com
	02/04/25	arrow functions in javascript	ui.dev
	02/04/25	qr code html web component javascript	scottjehl.com
◼	02/04/25	jscanify javascript mobile document scanner	colonelparrot.github.io
	02/04/25	typescript cheatsheet javascript	devhints.io
	02/04/25	javascript arrow functions cheatsheet	dev.to