# Runtime API Examples | DreamFreely Library
Community Conscious Creations

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>

## Results ​

### Theme Data ​

    {
      "nav": [
        {
          "text": "Welcome",
          "link": "/welcome/"
        },
        {
          "text": "Support",
          "link": "/welcome/support"
        }
      ],
      "sidebar": [
        {
          "text": "Welcome",
          "items": [
            {
              "text": "Chibu / Hola / Hello",
              "link": "/welcome/"
            },
            {
              "text": "About DreamFreely",
              "link": "/welcome/dreamfreely"
            },
            {
              "text": "About Canin Carlos",
              "link": "/welcome/canin"
            }
          ]
        },
        {
          "text": "EXO-CTO",
          "items": [
            {
              "text": "Welcome",
              "link": "/exocto/"
            },
            {
              "text": "Computers",
              "link": "/exocto/puters"
            },
            {
              "text": "OSes",
              "link": "/exocto/oses"
            },
            {
              "text": "Websites",
              "link": "/exocto/websites"
            },
            {
              "text": "Social Media",
              "link": "/exocto/socialmedia"
            },
            {
              "text": "Automation",
              "link": "/exocto/automation"
            },
            {
              "text": "Appendices",
              "link": "/exocto/appendices"
            }
          ]
        },
        {
          "text": "Rebel Coding 101",
          "items": [
            {
              "text": "Intro to Coding",
              "link": "/rebel_coding/"
            },
            {
              "text": "Orientation",
              "link": "/rebel_coding/orientation"
            },
            {
              "text": "Intro to CLI",
              "link": "/rebel_coding/termintro"
            },
            {
              "text": "Step 1: HTML & CSS",
              "link": "/rebel_coding/step1"
            },
            {
              "text": "Step 2: JavaScript",
              "link": "/rebel_coding/step2"
            },
            {
              "text": "Step 3: Python Scrapers",
              "link": "/rebel_coding/step3"
            },
            {
              "text": "Step 4: The Full Stack",
              "link": "/rebel_coding/step4"
            },
            {
              "text": "Appendices",
              "link": "/rebel_coding/appendices"
            }
          ]
        },
        {
          "text": "Rebel Coding 102",
          "items": [
            {
              "text": "Reviewing the Full-Stack",
              "link": "/rebel_coding/v2"
            },
            {
              "text": "Planning Our App",
              "link": "/rebel_coding/v2Orient"
            },
            {
              "text": "Step 1: Server",
              "link": "/rebel_coding/step5"
            },
            {
              "text": "Step 2: Client",
              "link": "/rebel_coding/step6"
            },
            {
              "text": "Step 3: Deployment",
              "link": "/rebel_coding/step7"
            },
            {
              "text": "Step 4: Scaling, etc",
              "link": "/rebel_coding/step8"
            },
            {
              "text": "More Appendices",
              "link": "/rebel_coding/more-appendices"
            }
          ]
        },
        {
          "text": "Manifesting Empathy",
          "items": [
            {
              "text": "Welcome",
              "link": "/mempath/"
            },
            {
              "text": "The Egg (0-5)",
              "link": "/mempath/egg"
            },
            {
              "text": "The Hatchling (5-12)",
              "link": "/mempath/hatchling"
            },
            {
              "text": "Flight (12-18)",
              "link": "/mempath/flight"
            },
            {
              "text": "Flying (18-25)",
              "link": "/mempath/flying"
            },
            {
              "text": "Learning (25-35)",
              "link": "/mempath/learning"
            },
            {
              "text": "Building (35-45)",
              "link": "/mempath/building"
            },
            {
              "text": "Helping (45-60)",
              "link": "/mempath/helping"
            },
            {
              "text": "Enjoying (60+)",
              "link": "/mempath/enjoying"
            },
            {
              "text": "Outro",
              "link": "/mempath/onward"
            },
            {
              "text": "Appendices",
              "link": "/mempath/appendices"
            }
          ]
        },
        {
          "text": "Diversity Inverted",
          "items": [
            {
              "text": "Welcome",
              "link": "/divinv/"
            },
            {
              "text": "Whiteness",
              "link": "/divinv/1-whiteness"
            },
            {
              "text": "Indigeneity",
              "link": "/divinv/2-native"
            },
            {
              "text": "Latinx",
              "link": "/divinv/3-latinx"
            },
            {
              "text": "Blackness",
              "link": "/divinv/4-Black"
            },
            {
              "text": "Onwards",
              "link": "/divinv/5-onward"
            },
            {
              "text": "Appendices",
              "link": "/divinv/appendices"
            }
          ]
        },
        {
          "text": "The Guidebook"
        },
        {
          "text": "Manifesting Empathy (archived)",
          "items": [
            {
              "text": "Welcome",
              "link": "/mempath.bak/"
            },
            {
              "text": "Sexism",
              "link": "/mempath.bak/sexism"
            },
            {
              "text": "Racism",
              "link": "/mempath.bak/racism"
            },
            {
              "text": "Able-ism",
              "link": "/mempath.bak/able-ism"
            },
            {
              "text": "Power Dynamics",
              "link": "/mempath.bak/power-dynamics"
            },
            {
              "text": "Onwards",
              "link": "/mempath.bak/onward"
            },
            {
              "text": "Appendices",
              "link": "/mempath.bak/appendices"
            }
          ]
        }
      ],
      "socialLinks": [
        {
          "icon": "org",
          "link": "https://canin.dreamfreely.org"
        },
        {
          "icon": "kitsu",
          "link": "https://shop.dreamfreely.org"
        },
        {
          "icon": "zcool",
          "link": "https://appdeveloperone.com/DreamFreely"
        }
      ]
    }

### 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.