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()
</script>

## Results

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

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

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

Results

Theme Data

{
  "logo": "https://bantool.net/images/favicon.ico",
  "nav": [
    {
      "text": "DevOps",
      "items": [
        {
          "text": "Initial Setup",
          "link": "/devops/initial"
        },
        {
          "text": "PostgreSQL",
          "link": "/devops/pgsql"
        }
      ]
    },
    {
      "text": "Nexus",
      "items": [
        {
          "text": "Environment Setup",
          "link": "/nexus/environment-setup"
        },
        {
          "text": "OpenIddict Setup",
          "link": "/nexus/openiddict"
        }
      ]
    },
    {
      "text": "Env Setup",
      "items": [
        {
          "text": "Git Convention",
          "link": "/env-setup/git-convention"
        },
        {
          "text": "MCP",
          "link": "/env-setup/mcp"
        },
        {
          "text": "SSH & GPG",
          "link": "/env-setup/ssh-gpg"
        }
      ]
    },
    {
      "text": "Examples",
      "items": [
        {
          "text": "API Examples",
          "link": "/examples/api-examples"
        },
        {
          "text": "Markdown Examples",
          "link": "/examples/markdown-examples"
        }
      ]
    },
    {
      "text": "Optimization",
      "items": [
        {
          "text": "ASP.NET",
          "link": "/optimization/asp/intro"
        },
        {
          "text": "Blog Design",
          "link": "/optimization/blog-design/database-design"
        },
        {
          "text": "C#",
          "link": "/optimization/csharp/memory-management"
        },
        {
          "text": "Dart",
          "link": "/optimization/dart/null-safety-performance"
        },
        {
          "text": "DDD & CQRS",
          "link": "/optimization/ddd-cqrs/anemic-domain-model"
        },
        {
          "text": "Flutter",
          "link": "/optimization/flutter/rebuild-stateless-stateful"
        },
        {
          "text": "Nuxt",
          "link": "/optimization/nuxt/ssg-data-fetching"
        },
        {
          "text": "PostgreSQL",
          "link": "/optimization/postgresql/index-basics"
        }
      ]
    }
  ],
  "sidebar": {
    "/devops/": [
      {
        "text": "DevOps",
        "items": [
          {
            "text": "Initial Setup",
            "link": "/devops/initial"
          },
          {
            "text": "PostgreSQL",
            "link": "/devops/pgsql"
          }
        ]
      }
    ],
    "/nexus/": [
      {
        "text": "Nexus",
        "items": [
          {
            "text": "Environment Setup",
            "link": "/nexus/environment-setup"
          },
          {
            "text": "OpenIddict Setup",
            "link": "/nexus/openiddict"
          }
        ]
      }
    ],
    "/env-setup/": [
      {
        "text": "Environment Setup",
        "items": [
          {
            "text": "Git Convention",
            "link": "/env-setup/git-convention"
          },
          {
            "text": "MCP",
            "link": "/env-setup/mcp"
          },
          {
            "text": "SSH & GPG",
            "link": "/env-setup/ssh-gpg"
          }
        ]
      }
    ],
    "/examples/": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "API Examples",
            "link": "/examples/api-examples"
          },
          {
            "text": "Markdown Examples",
            "link": "/examples/markdown-examples"
          }
        ]
      }
    ],
    "/optimization/asp/": [
      {
        "text": "ASP.NET Optimization",
        "collapsed": false,
        "items": [
          {
            "text": "Introduction",
            "link": "/optimization/asp/intro"
          },
          {
            "text": "Sync vs Async",
            "link": "/optimization/asp/sync-vs-async"
          },
          {
            "text": "Over-fetching & Projections",
            "link": "/optimization/asp/over-fetching-projections"
          },
          {
            "text": "Lazy Loading N+1",
            "link": "/optimization/asp/lazy-loading-n-plus-one"
          },
          {
            "text": "Deadlock Async Blocking",
            "link": "/optimization/asp/deadlock-async-blocking"
          },
          {
            "text": "IEnumerable Trap",
            "link": "/optimization/asp/ienumerable-trap"
          },
          {
            "text": "String Building Loops",
            "link": "/optimization/asp/string-building-loops"
          },
          {
            "text": "Caching IMemoryCache",
            "link": "/optimization/asp/caching-imemorycache"
          },
          {
            "text": "DI Scope Dangers",
            "link": "/optimization/asp/di-scope-dangers"
          },
          {
            "text": "HttpClient Socket Exhaustion",
            "link": "/optimization/asp/httpclient-socket-exhaustion"
          },
          {
            "text": "Inefficient Middleware",
            "link": "/optimization/asp/inefficient-middleware"
          },
          {
            "text": "ValueTask vs Task",
            "link": "/optimization/asp/valuetask-vs-task"
          },
          {
            "text": "Count vs Any",
            "link": "/optimization/asp/count-vs-any"
          },
          {
            "text": "Batch Updates Deletes",
            "link": "/optimization/asp/batch-updates-deletes"
          },
          {
            "text": "Cancellation Token",
            "link": "/optimization/asp/cancellation-token"
          },
          {
            "text": "Response Caching",
            "link": "/optimization/asp/response-caching"
          },
          {
            "text": "Logging Cost",
            "link": "/optimization/asp/logging-cost"
          },
          {
            "text": "GC Pressure Hot Paths",
            "link": "/optimization/asp/gc-pressure-hot-paths"
          },
          {
            "text": "Connection Pooling",
            "link": "/optimization/asp/connection-pooling"
          },
          {
            "text": "Background Jobs",
            "link": "/optimization/asp/background-jobs"
          }
        ]
      }
    ],
    "/optimization/blog-design/": [
      {
        "text": "Blog Design",
        "collapsed": false,
        "items": [
          {
            "text": "Database Design",
            "link": "/optimization/blog-design/database-design"
          },
          {
            "text": "Backend API",
            "link": "/optimization/blog-design/backend-api"
          },
          {
            "text": "Frontend Nuxt",
            "link": "/optimization/blog-design/frontend-nuxt"
          }
        ]
      }
    ],
    "/optimization/csharp/": [
      {
        "text": "C# Optimization",
        "collapsed": false,
        "items": [
          {
            "text": "Memory Management",
            "link": "/optimization/csharp/memory-management"
          },
          {
            "text": "Collections & Data Structures",
            "link": "/optimization/csharp/collections-data-structures"
          },
          {
            "text": "Exception Cost",
            "link": "/optimization/csharp/exception-cost"
          },
          {
            "text": "Boxing & Unboxing",
            "link": "/optimization/csharp/boxing-unboxing"
          },
          {
            "text": "Generational GC",
            "link": "/optimization/csharp/generational-gc"
          },
          {
            "text": "LINQ & Lambda Cost",
            "link": "/optimization/csharp/linq-lambda-cost"
          },
          {
            "text": "When to Optimize",
            "link": "/optimization/csharp/when-to-optimize"
          }
        ]
      }
    ],
    "/optimization/dart/": [
      {
        "text": "Dart Optimization",
        "collapsed": false,
        "items": [
          {
            "text": "Null Safety Performance",
            "link": "/optimization/dart/null-safety-performance"
          },
          {
            "text": "Const Compile Time",
            "link": "/optimization/dart/const-compile-time"
          },
          {
            "text": "String Concatenation",
            "link": "/optimization/dart/string-concatenation"
          },
          {
            "text": "Collection For If",
            "link": "/optimization/dart/collection-for-if"
          },
          {
            "text": "Generators Memory",
            "link": "/optimization/dart/generators-memory"
          },
          {
            "text": "Event Loop",
            "link": "/optimization/dart/event-loop"
          },
          {
            "text": "Optimization Mindset",
            "link": "/optimization/dart/optimization-mindset"
          }
        ]
      }
    ],
    "/optimization/ddd-cqrs/": [
      {
        "text": "DDD & CQRS",
        "collapsed": false,
        "items": [
          {
            "text": "Anemic Domain Model",
            "link": "/optimization/ddd-cqrs/anemic-domain-model"
          },
          {
            "text": "Value Objects",
            "link": "/optimization/ddd-cqrs/value-objects"
          },
          {
            "text": "Aggregates",
            "link": "/optimization/ddd-cqrs/aggregates"
          },
          {
            "text": "Repository Pattern",
            "link": "/optimization/ddd-cqrs/repository-pattern"
          },
          {
            "text": "CQRS Introduction",
            "link": "/optimization/ddd-cqrs/cqrs-intro"
          },
          {
            "text": "Domain Events",
            "link": "/optimization/ddd-cqrs/domain-events"
          },
          {
            "text": "Database Separation",
            "link": "/optimization/ddd-cqrs/database-separation"
          }
        ]
      }
    ],
    "/optimization/flutter/": [
      {
        "text": "Flutter Optimization",
        "collapsed": false,
        "items": [
          {
            "text": "Rebuild Stateless Stateful",
            "link": "/optimization/flutter/rebuild-stateless-stateful"
          },
          {
            "text": "Const Widgets",
            "link": "/optimization/flutter/const-widgets"
          },
          {
            "text": "ListView Builder",
            "link": "/optimization/flutter/listview-builder"
          },
          {
            "text": "Network Images",
            "link": "/optimization/flutter/network-images"
          },
          {
            "text": "Isolates Heavy Computation",
            "link": "/optimization/flutter/isolates-heavy-computation"
          },
          {
            "text": "Repaint Boundary",
            "link": "/optimization/flutter/repaint-boundary"
          },
          {
            "text": "State Management",
            "link": "/optimization/flutter/state-management"
          },
          {
            "text": "Shader Compilation Jank",
            "link": "/optimization/flutter/shader-compilation-jank"
          },
          {
            "text": "Opacity & Clipping",
            "link": "/optimization/flutter/opacity-clipping"
          },
          {
            "text": "App Size",
            "link": "/optimization/flutter/app-size"
          }
        ]
      }
    ],
    "/optimization/nuxt/": [
      {
        "text": "Nuxt Optimization",
        "collapsed": false,
        "items": [
          {
            "text": "SSG Data Fetching",
            "link": "/optimization/nuxt/ssg-data-fetching"
          },
          {
            "text": "Code Splitting",
            "link": "/optimization/nuxt/code-splitting"
          },
          {
            "text": "Lazy Loading Components",
            "link": "/optimization/nuxt/lazy-loading-components"
          },
          {
            "text": "Image Optimization",
            "link": "/optimization/nuxt/image-optimization"
          },
          {
            "text": "Minification & Compression",
            "link": "/optimization/nuxt/minification-compression"
          },
          {
            "text": "Browser Cache",
            "link": "/optimization/nuxt/browser-cache"
          },
          {
            "text": "Tree Shaking",
            "link": "/optimization/nuxt/tree-shaking"
          },
          {
            "text": "Web Font Loading",
            "link": "/optimization/nuxt/web-font-loading"
          },
          {
            "text": "Prefetch & Preload",
            "link": "/optimization/nuxt/prefetch-preload"
          },
          {
            "text": "Debounce & Throttle",
            "link": "/optimization/nuxt/debounce-throttle"
          },
          {
            "text": "Critical CSS",
            "link": "/optimization/nuxt/critical-css"
          },
          {
            "text": "List Virtualization",
            "link": "/optimization/nuxt/list-virtualization"
          },
          {
            "text": "Web Workers",
            "link": "/optimization/nuxt/web-workers"
          },
          {
            "text": "Performance Budget",
            "link": "/optimization/nuxt/performance-budget"
          }
        ]
      }
    ],
    "/optimization/postgresql/": [
      {
        "text": "PostgreSQL Optimization",
        "collapsed": false,
        "items": [
          {
            "text": "Index Basics",
            "link": "/optimization/postgresql/index-basics"
          },
          {
            "text": "Leading Wildcard",
            "link": "/optimization/postgresql/leading-wildcard"
          },
          {
            "text": "Join Before Filter",
            "link": "/optimization/postgresql/join-before-filter"
          },
          {
            "text": "N+1 Counts",
            "link": "/optimization/postgresql/n-plus-one-counts"
          },
          {
            "text": "Function in WHERE",
            "link": "/optimization/postgresql/function-in-where"
          },
          {
            "text": "Deep Pagination Offset",
            "link": "/optimization/postgresql/deep-pagination-offset"
          },
          {
            "text": "OR vs UNION ALL",
            "link": "/optimization/postgresql/or-vs-union-all"
          },
          {
            "text": "Index Only Scan",
            "link": "/optimization/postgresql/index-only-scan"
          },
          {
            "text": "Partial Index",
            "link": "/optimization/postgresql/partial-index"
          },
          {
            "text": "Large WHERE IN",
            "link": "/optimization/postgresql/large-where-in"
          },
          {
            "text": "Data Type Mismatch",
            "link": "/optimization/postgresql/data-type-mismatch"
          },
          {
            "text": "EXISTS IN JOIN",
            "link": "/optimization/postgresql/exists-in-join"
          },
          {
            "text": "NULL Trap",
            "link": "/optimization/postgresql/null-trap"
          },
          {
            "text": "Bloat Update Delete",
            "link": "/optimization/postgresql/bloat-update-delete"
          },
          {
            "text": "Denormalization",
            "link": "/optimization/postgresql/denormalization"
          },
          {
            "text": "Materialized Views",
            "link": "/optimization/postgresql/materialized-views"
          },
          {
            "text": "Deadlocks",
            "link": "/optimization/postgresql/deadlocks"
          },
          {
            "text": "Hierarchical Data",
            "link": "/optimization/postgresql/hierarchical-data"
          },
          {
            "text": "pg_stat_statements",
            "link": "/optimization/postgresql/pg-stat-statements"
          },
          {
            "text": "Search Optimization",
            "link": "/optimization/postgresql/search-optimization"
          },
          {
            "text": "Unnecessary JOIN",
            "link": "/optimization/postgresql/unnecessary-join"
          },
          {
            "text": "COUNT Variations",
            "link": "/optimization/postgresql/count-variations"
          },
          {
            "text": "Dynamic WHERE Clauses",
            "link": "/optimization/postgresql/dynamic-where-clauses"
          },
          {
            "text": "Data Types",
            "link": "/optimization/postgresql/data-types"
          },
          {
            "text": "CTE Reuse",
            "link": "/optimization/postgresql/cte-reuse"
          },
          {
            "text": "BRIN Index",
            "link": "/optimization/postgresql/brin-index"
          },
          {
            "text": "Skip Scan Distinct",
            "link": "/optimization/postgresql/skip-scan-distinct"
          },
          {
            "text": "CQRS Architecture",
            "link": "/optimization/postgresql/cqrs-architecture"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "gitlab",
      "link": "https://gitlab.com/bantool/docs"
    }
  ]
}

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.