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://img.icons8.com/?size=100&id=NkdlSUR5LFuw&format=png&color=000000",
  "siteTitle": "GrinTic",
  "outlineTitle": "Contendo",
  "nav": [
    {
      "text": "Inicio",
      "link": "/"
    },
    {
      "text": "Desarrollo",
      "items": [
        {
          "text": "Frontend",
          "link": "/Frontend/"
        },
        {
          "text": "Backend",
          "link": "/backend/"
        },
        {
          "text": "Database",
          "link": "/backend/database"
        }
      ]
    },
    {
      "text": "Operaciones",
      "items": [
        {
          "text": "Infraestructura",
          "link": "/operations/docker"
        },
        {
          "text": "Contenedores",
          "link": "/operaciones/contenedores/info"
        }
      ]
    },
    {
      "text": "Metodologías",
      "items": [
        {
          "text": "SRE",
          "link": "/methodology/sre"
        },
        {
          "text": "DevOps",
          "link": "/methodology/devops"
        }
      ]
    },
    {
      "text": "Herramientas",
      "items": [
        {
          "text": "Control de versiones",
          "link": "/tools/docker"
        },
        {
          "text": "IDEs",
          "link": "/tools/kubernetes"
        },
        {
          "text": "Colaboration Tools",
          "link": "/tools/git"
        }
      ]
    },
    {
      "text": "Cloud",
      "items": [
        {
          "text": "GCP",
          "link": "/cloud/gcp"
        },
        {
          "text": "AWS",
          "link": "/cloud/aws"
        },
        {
          "text": "Azure",
          "link": "/cloud/azure"
        }
      ]
    }
  ],
  "sidebar": {
    "/guide/": [
      {
        "text": "Guide",
        "items": [
          {
            "text": "Introduction",
            "link": "/guide/introduction"
          },
          {
            "text": "Installation",
            "link": "/guide/installation"
          }
        ]
      }
    ],
    "/Frontend/": [
      {
        "text": "Frontend",
        "items": [
          {
            "text": "Html",
            "link": "/Frontend/markdown-examples"
          },
          {
            "text": "Css",
            "link": "/Frontend/api-examples"
          },
          {
            "text": "Javascript",
            "link": "/Frontend/javascript-examples"
          },
          {
            "text": "Java",
            "collapsed": true,
            "items": [
              {
                "text": "Introduction",
                "link": "/backend/java/introduction"
              },
              {
                "text": "Installation",
                "link": "/backend/java/installation"
              }
            ]
          }
        ]
      }
    ],
    "/backend/": [
      {
        "text": "Backend",
        "items": [
          {
            "text": "API Examples",
            "link": "/backend/api"
          },
          {
            "text": "Database Examples",
            "link": "/backend/database"
          }
        ]
      }
    ],
    "/operaciones/contenedores": [
      {
        "text": "Contenedores",
        "items": [
          {
            "text": "Docker",
            "collapsed": false,
            "items": [
              {
                "text": "Instalación",
                "link": "/operaciones/contenedores/docker/instalacion"
              },
              {
                "text": "Comandos",
                "link": "/operaciones/contenedores/docker/comandos"
              },
              {
                "text": "Configurar Logs",
                "link": "/operaciones/contenedores/docker/configuraciones/logs"
              },
              {
                "text": "Limitar Recursos",
                "link": "/operaciones/contenedores/docker/configuraciones/recursos"
              }
            ]
          },
          {
            "text": "Docker Compose",
            "collapsed": false,
            "items": [
              {
                "text": "Instalación",
                "link": "/operaciones/docker-compose/instalacion"
              },
              {
                "text": "Configuraciones",
                "link": "/operaciones/docker-compose/configuracion"
              }
            ]
          },
          {
            "text": "Docker Swarm",
            "link": "/operaciones/docker-swarm"
          },
          {
            "text": "Kubernets",
            "link": "/operaciones/kubernets"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    },
    {
      "icon": "linkedin",
      "link": "https://www.linkedin.com/in/vuejs-vitepress/"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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