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": {
"src": "/logo.svg",
"alt": "402x Logo"
},
"search": {
"provider": "local"
},
"nav": [
{
"text": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1.5em\" height=\"1.5em\" viewBox=\"0 0 24 24\" style=\"display:inline-block;vertical-align:middle;margin-right:4px\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.5 10.5L21 3m-5 0h5v5m0 6v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5\"/></svg>402x.io",
"link": "https://402x.io"
}
],
"sidebar": [
{
"text": "Getting Started",
"link": "/getting-started"
},
{
"text": "Coinbase x402 Protocol",
"collapsed": false,
"items": [
{
"text": "Protocol Overview",
"link": "/protocol/overview"
},
{
"text": "Why x402 Matters",
"link": "/protocol/why-x402-matters"
},
{
"text": "Architecture",
"link": "/protocol/architecture"
},
{
"text": "Security Model",
"link": "/protocol/security"
}
]
},
{
"text": "The 402x Platform",
"collapsed": false,
"items": [
{
"text": "What is 402x?",
"link": "/402x/about"
},
{
"text": "x402 & 402x Explained",
"link": "/402x/comparison"
}
]
},
{
"text": "402x Ecosystem",
"collapsed": false,
"items": [
{
"text": "Paywalls",
"link": "/use-cases/paywalls"
},
{
"text": "APIs",
"link": "/use-cases/apis"
},
{
"text": "Tasks",
"link": "/use-cases/tasks"
},
{
"text": "Communities",
"link": "/use-cases/communities"
},
{
"text": "Research",
"link": "/use-cases/research"
},
{
"text": "Widgets",
"link": "/use-cases/widgets"
}
]
},
{
"text": "Platform & Tools",
"collapsed": true,
"items": [
{
"text": "Dashboard Overview",
"link": "/platform/dashboard"
},
{
"text": "Testing & Sandbox",
"link": "/tools/testing"
}
]
},
{
"text": "Resources & Support",
"collapsed": true,
"items": [
{
"text": "FAQ",
"link": "/resources/faq"
},
{
"text": "Troubleshooting",
"link": "/resources/troubleshooting"
},
{
"text": "Glossary",
"link": "/resources/glossary"
}
]
}
],
"socialLinks": [
{
"icon": {
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1.5em\" height=\"1.5em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M13.808 10.469L20.88 2h-1.676l-6.142 7.353L8.158 2H2.5l7.418 11.12L2.5 22h1.676l6.486-7.765L15.842 22H21.5zm-2.296 2.748l-.752-1.107L4.78 3.3h2.575l4.826 7.11l.751 1.107l6.273 9.242h-2.574z\"/></svg>"
},
"link": "https://x.com/402x"
},
{
"icon": {
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1.5em\" height=\"1.5em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.6 18.6 0 0 0-5.487 0a12 12 0 0 0-.617-1.23A.08.08 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.1.1 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055a20 20 0 0 0 5.993 2.98a.08.08 0 0 0 .084-.026a14 14 0 0 0 1.226-1.963a.074.074 0 0 0-.041-.104a13 13 0 0 1-1.872-.878a.075.075 0 0 1-.008-.125q.19-.14.372-.287a.08.08 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.08.08 0 0 1 .079.009q.18.148.372.288a.075.075 0 0 1-.006.125q-.895.515-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.08.08 0 0 0 .084.028a20 20 0 0 0 6.002-2.981a.08.08 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028M8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38c0-1.312.956-2.38 2.157-2.38c1.21 0 2.176 1.077 2.157 2.38c0 1.312-.956 2.38-2.157 2.38m7.975 0c-1.183 0-2.157-1.069-2.157-2.38c0-1.312.955-2.38 2.157-2.38c1.21 0 2.176 1.077 2.157 2.38c0 1.312-.946 2.38-2.157 2.38\"/></svg>"
},
"link": "https://discord.com/402x"
},
{
"icon": {
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1.5em\" height=\"1.5em\" viewBox=\"0 0 24 24\"><g fill=\"none\"><g clip-path=\"url(#SVGXv8lpc2Y)\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12\" clip-rule=\"evenodd\"/></g><defs><clipPath id=\"SVGXv8lpc2Y\"><path fill=\"#fff\" d=\"M0 0h24v24H0z\"/></clipPath></defs></g></svg>"
},
"link": "https://github.com/402x"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "templates/api-examples.md",
"filePath": "templates/api-examples.md",
"lastUpdated": 1761937391000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.