Runtime API Examples

Kunjungi aplikasi kami di sini VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

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

{
  "search": {
    "provider": "local"
  },
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Mahasiswa",
      "link": "/mahasiswa/login"
    },
    {
      "text": "Dosen",
      "link": "/dosen/login"
    },
    {
      "text": "Admin",
      "link": "/admin/login"
    }
  ],
  "logo": {
    "light": "/images/logoprim.png"
  },
  "sidebar": [
    {
      "text": "Panduan Admin",
      "items": [
        {
          "text": "Panduan Testing & Pengenalan",
          "link": "/admin/testing"
        },
        {
          "text": "Login",
          "link": "/admin/login"
        },
        {
          "text": "Periode Akademik",
          "link": "/admin/periodeakademik"
        },
        {
          "text": "Update/Tambah Kurikulum",
          "link": "/admin/tambahkurikulum"
        },
        {
          "text": "Menambahkan Materi Kuliah",
          "items": [
            {
              "text": "Menambahkan Mata Kuliah",
              "link": "/admin/buatmatakuliah"
            },
            {
              "text": "Menambahkan Kurikulum Prodi",
              "link": "/admin/kurikulumprodi"
            },
            {
              "text": "Data Prasyarat",
              "link": "/admin/dataprasyarat"
            }
          ]
        },
        {
          "text": "Menambah Kelas",
          "link": "/admin/menambahkelas"
        }
      ]
    }
  ]
}

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.