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>
<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": "/wings-phoenix.svg",
  "nav": [
    {
      "text": "Adapters",
      "link": "/adapters/"
    },
    {
      "text": "Databases",
      "link": "/databases/"
    },
    {
      "text": "Frameworks",
      "link": "/frameworks/"
    }
  ],
  "sidebar": {
    "/adapters/": [
      {
        "text": "Adapters Overview",
        "link": "/adapters/"
      },
      {
        "text": "Database Adapter Consulting",
        "link": "/adapters/consulting"
      },
      {
        "text": "Database Adapters",
        "items": [
          {
            "text": "Sequelize",
            "link": "/adapters/sequelize"
          },
          {
            "text": "Knex",
            "link": "/adapters/knex"
          },
          {
            "text": "Kysely",
            "link": "/adapters/kysely"
          },
          {
            "text": "Cassandra",
            "link": "/adapters/cassandra"
          },
          {
            "text": "Memory",
            "link": "/adapters/memory"
          },
          {
            "text": "Elastic Search",
            "link": "/adapters/elastic-search"
          },
          {
            "text": "RethinkDB",
            "link": "/adapters/rethinkdb"
          },
          {
            "text": "NeDB",
            "link": "/adapters/nedb"
          },
          {
            "text": "Objection",
            "link": "/adapters/objection"
          },
          {
            "text": "Prisma",
            "link": "/adapters/prisma"
          },
          {
            "text": "Mongoose",
            "link": "/adapters/mongoose"
          },
          {
            "text": "MongoDB",
            "link": "/adapters/mongodb"
          }
        ]
      },
      {
        "text": "Mail Adapters",
        "items": [
          {
            "text": "Mailer",
            "link": "/adapters/mailer"
          },
          {
            "text": "Postmark",
            "link": "/adapters/postmark"
          }
        ]
      },
      {
        "text": "API Adapters",
        "items": [
          {
            "text": "LocalStorage",
            "link": "/adapters/localstorage"
          },
          {
            "text": "MessageBird",
            "link": "/adapters/messagebird"
          },
          {
            "text": "Stripe",
            "link": "/adapters/stripe"
          },
          {
            "text": "Unsplash",
            "link": "/adapters/unsplash"
          }
        ]
      },
      {
        "text": "Community Adapters",
        "items": [
          {
            "text": "Community Maintained",
            "link": "/adapters/community-maintained"
          }
        ]
      }
    ],
    "/databases/": [
      {
        "text": "Databases Overview",
        "link": "/databases/"
      },
      {
        "text": "Database Consulting",
        "link": "/databases/consulting"
      },
      {
        "text": "Databases",
        "items": [
          {
            "text": "MySQL",
            "link": "/databases/mysql"
          },
          {
            "text": "PostgreSQL",
            "link": "/databases/postgresql"
          },
          {
            "text": "SQLite",
            "link": "/databases/sqlite"
          },
          {
            "text": "MsSQL",
            "link": "/databases/mssql"
          },
          {
            "text": "Cassandra",
            "link": "/databases/cassandra"
          },
          {
            "text": "Memory",
            "link": "/databases/memory"
          },
          {
            "text": "Elastic Search",
            "link": "/databases/elastic-search"
          },
          {
            "text": "Couchbase",
            "link": "/databases/couchbase"
          },
          {
            "text": "DynamoDB",
            "link": "/databases/dynamodb"
          },
          {
            "text": "NeDB",
            "link": "/databases/nedb"
          },
          {
            "text": "RethinkDB",
            "link": "/databases/rethinkdb"
          },
          {
            "text": "MongoDB",
            "link": "/databases/mongodb"
          }
        ]
      },
      {
        "text": "Serverless Databases",
        "items": [
          {
            "text": "Cloudflare D1",
            "link": "/databases/cloudflare-d1"
          },
          {
            "text": "Neon",
            "link": "/databases/neon"
          },
          {
            "text": "PlanetScale",
            "link": "/databases/planetscale"
          },
          {
            "text": "AWS RDS - Aurora",
            "link": "/databases/aws-rds-data-api"
          },
          {
            "text": "AWS S3 Select",
            "link": "/databases/aws-s3-select"
          },
          {
            "text": "SurrealDB",
            "link": "/databases/surreal"
          },
          {
            "text": "libSQL/sqld",
            "link": "/databases/libsql-sqld"
          },
          {
            "text": "SingleStore Data API",
            "link": "/databases/singlestore-data-api"
          }
        ]
      }
    ],
    "/frameworks/": [
      {
        "text": "Frameworks Overview",
        "link": "/frameworks/"
      },
      {
        "text": "Framework Consulting",
        "link": "/frameworks/consulting"
      },
      {
        "text": "Node Frameworks",
        "items": [
          {
            "text": "FeathersJS",
            "link": "/frameworks/feathers"
          },
          {
            "text": "Nest",
            "link": "/frameworks/nest"
          },
          {
            "text": "Express",
            "link": "/frameworks/express"
          },
          {
            "text": "Koa",
            "link": "/frameworks/koa"
          },
          {
            "text": "Fastify",
            "link": "/frameworks/fastify"
          },
          {
            "text": "Hatchify",
            "link": "/frameworks/hatchify"
          },
          {
            "text": "Hapi",
            "link": "/frameworks/hapi"
          },
          {
            "text": "Socket.io",
            "link": "/frameworks/socketio"
          },
          {
            "text": "Total.js",
            "link": "/frameworks/total"
          },
          {
            "text": "Loopback",
            "link": "/frameworks/loopback"
          },
          {
            "text": "Adonis",
            "link": "/frameworks/adonis"
          },
          {
            "text": "Derby",
            "link": "/frameworks/derby"
          },
          {
            "text": "Strapi",
            "link": "/frameworks/strapi"
          }
        ]
      },
      {
        "text": "Deno Frameworks",
        "items": [
          {
            "text": "Oak",
            "link": "/frameworks/oak"
          },
          {
            "text": "Drash",
            "link": "/frameworks/drash"
          }
        ]
      },
      {
        "text": "Web Frameworks",
        "items": [
          {
            "text": "Nuxt",
            "link": "/frameworks/nuxt"
          },
          {
            "text": "Next",
            "link": "/frameworks/next"
          },
          {
            "text": "Solid Start",
            "link": "/frameworks/solidstart"
          }
        ]
      },
      {
        "text": "Edge Platforms",
        "items": [
          {
            "text": "Cloudflare Workers",
            "link": "/frameworks/cloudflare-workers"
          },
          {
            "text": "Hono",
            "link": "/frameworks/hono"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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