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": "/logo.png",
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "开发记录",
      "items": [
        {
          "text": "Vue 开发问题",
          "link": "/problem/vue"
        },
        {
          "text": "Vitepress 开发问题",
          "link": "/problem/vitepress"
        },
        {
          "text": "Css 开发问题",
          "link": "/problem/css"
        },
        {
          "text": "ReactNative 开发问题",
          "link": "/problem/react-native"
        },
        {
          "text": "Github 问题记录",
          "link": "/problem/github"
        },
        {
          "text": "Git 开发问题",
          "link": "/problem/git"
        },
        {
          "text": "Vscode 开发问题",
          "link": "/problem/vscode"
        },
        {
          "text": "Node 开发问题",
          "link": "/problem/node"
        },
        {
          "text": "Shell 开发问题",
          "link": "/problem/shell"
        },
        {
          "text": "React 开发问题",
          "link": "/problem/react"
        },
        {
          "text": "Javascript 开发问题",
          "link": "/problem/javascript"
        },
        {
          "text": "Typescript",
          "items": [
            {
              "text": "Typescript（tsconfig详解)",
              "link": "/problem/typescript-config"
            },
            {
              "text": "Typescript 开发问题记录",
              "link": "/problem/typescript"
            }
          ]
        },
        {
          "text": "工程化记录",
          "items": [
            {
              "text": "Vite 开发问题",
              "link": "/project/vite"
            },
            {
              "text": "AST 学习记录",
              "link": "/project/ast"
            },
            {
              "text": "Eslint 配置",
              "link": "/project/eslint"
            }
          ]
        },
        {
          "text": "系统问题记录",
          "items": [
            {
              "text": "Mac 开发问题",
              "link": "/systems/mac"
            },
            {
              "text": "Win 开发问题",
              "link": "/systems/win"
            },
            {
              "text": "Chrome 开发记录",
              "link": "/systems/chrome"
            }
          ]
        }
      ],
      "activeMatch": "problem|example|project"
    },
    {
      "text": "学习资料推荐",
      "items": [
        {
          "text": "AI 推荐",
          "items": [
            {
              "text": "AI 网站推荐",
              "link": "/study/site"
            },
            {
              "text": "AI 生图示例",
              "link": "/study/picture"
            }
          ]
        },
        {
          "text": "AI 学习",
          "items": [
            {
              "text": "Prompt 优化工程",
              "link": "/study/prompt"
            },
            {
              "text": "LangChain 知识库",
              "link": "/study/lang-chain"
            }
          ]
        },
        {
          "text": "Css 设计网站推荐",
          "items": [
            {
              "text": "Css 设计网站推荐",
              "link": "/study/css-site"
            },
            {
              "text": "渐变色网站推荐",
              "link": "/study/gradients"
            }
          ]
        },
        {
          "text": "日常学习",
          "items": [
            {
              "text": "日常学习资料",
              "link": "/study/daily"
            }
          ]
        },
        {
          "text": "Mobile 移动端记录",
          "items": [
            {
              "text": "Mobile 移动端记录",
              "link": "/study/mobile"
            }
          ]
        }
      ],
      "activeMatch": "ai"
    },
    {
      "text": "DX 开发者体验",
      "items": [
        {
          "text": "DX 开发者体验",
          "items": [
            {
              "text": "自动化部署",
              "link": "/feature/deploy"
            },
            {
              "text": "Vscode 特性配置",
              "link": "/feature/vscode"
            },
            {
              "text": "Vscode 插件开发",
              "link": "/feature/vscode-plugin"
            },
            {
              "text": "Webstorm 特性配置",
              "link": "/feature/webstorm"
            },
            {
              "text": "正则表达式技巧",
              "link": "/feature/regexp"
            },
            {
              "text": "正则通用功能函数",
              "link": "/feature/regexp-fn"
            },
            {
              "text": "Node CLI 开发",
              "link": "/feature/node-cli"
            }
          ]
        },
        {
          "text": "css 开发框架知识",
          "items": [
            {
              "text": "Scss 常用知识点",
              "link": "/css-library/knowledge"
            },
            {
              "text": "Scss 开发技巧",
              "link": "/css-library/dev-skill"
            },
            {
              "text": "Scss 封装函数",
              "link": "/css-library/function"
            },
            {
              "text": "Tailwind 开发技巧",
              "link": "/css-library/tailwind-skill"
            }
          ]
        },
        {
          "text": "摸鱼工具",
          "items": [
            {
              "text": "阅读器",
              "link": "/play/epub-reader"
            }
          ]
        }
      ],
      "activeMatch": "feature|play"
    },
    {
      "text": "个人记录",
      "items": [
        {
          "text": "个人记录",
          "items": [
            {
              "text": "个人经历",
              "link": "/author/myself"
            },
            {
              "text": "个人作品",
              "link": "/author/works"
            },
            {
              "text": "面试反问",
              "link": "/author/interview"
            },
            {
              "text": "面试算法",
              "link": "/author/algorithm"
            },
            {
              "text": "面试知识",
              "link": "/author/interview-knowledge"
            }
          ]
        }
      ],
      "activeMatch": "author"
    }
  ],
  "sidebar": {
    "/study": [
      {
        "text": "学习资料推荐",
        "items": [
          {
            "text": "AI 推荐",
            "items": [
              {
                "text": "AI 网站推荐",
                "link": "/study/site"
              },
              {
                "text": "AI 生图示例",
                "link": "/study/picture"
              }
            ]
          },
          {
            "text": "AI 学习",
            "items": [
              {
                "text": "Prompt 优化工程",
                "link": "/study/prompt"
              },
              {
                "text": "LangChain 知识库",
                "link": "/study/lang-chain"
              }
            ]
          },
          {
            "text": "Css 设计网站推荐",
            "items": [
              {
                "text": "Css 设计网站推荐",
                "link": "/study/css-site"
              },
              {
                "text": "渐变色网站推荐",
                "link": "/study/gradients"
              }
            ]
          },
          {
            "text": "日常学习",
            "items": [
              {
                "text": "日常学习资料",
                "link": "/study/daily"
              }
            ]
          },
          {
            "text": "Mobile 移动端记录",
            "items": [
              {
                "text": "Mobile 移动端记录",
                "link": "/study/mobile"
              }
            ]
          }
        ]
      }
    ],
    "/problem": [
      {
        "text": "日常开发记录",
        "items": [
          {
            "text": "Vue 开发问题",
            "link": "/problem/vue"
          },
          {
            "text": "Vitepress 开发问题",
            "link": "/problem/vitepress"
          },
          {
            "text": "Css 开发问题",
            "link": "/problem/css"
          },
          {
            "text": "ReactNative 开发问题",
            "link": "/problem/react-native"
          },
          {
            "text": "Github 问题记录",
            "link": "/problem/github"
          },
          {
            "text": "Git 开发问题",
            "link": "/problem/git"
          },
          {
            "text": "Vscode 开发问题",
            "link": "/problem/vscode"
          },
          {
            "text": "Node 开发问题",
            "link": "/problem/node"
          },
          {
            "text": "Shell 开发问题",
            "link": "/problem/shell"
          },
          {
            "text": "React 开发问题",
            "link": "/problem/react"
          },
          {
            "text": "Javascript 开发问题",
            "link": "/problem/javascript"
          },
          {
            "text": "Markdown Examples",
            "link": "/problem/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/problem/api-examples"
          }
        ]
      },
      {
        "text": "Typescript",
        "items": [
          {
            "text": "Typescript（tsconfig详解)",
            "link": "/problem/typescript-config"
          },
          {
            "text": "Typescript 开发问题记录",
            "link": "/problem/typescript"
          }
        ]
      },
      {
        "text": "工程化记录",
        "items": [
          {
            "text": "Vite 开发问题",
            "link": "/project/vite"
          },
          {
            "text": "AST 学习记录",
            "link": "/project/ast"
          },
          {
            "text": "Eslint 配置",
            "link": "/project/eslint"
          }
        ]
      },
      {
        "text": "系统问题记录",
        "items": [
          {
            "text": "Mac 开发问题",
            "link": "/systems/mac"
          },
          {
            "text": "Win 开发问题",
            "link": "/systems/win"
          },
          {
            "text": "Chrome 开发记录",
            "link": "/systems/chrome"
          }
        ]
      }
    ],
    "/project": [
      {
        "text": "日常开发记录",
        "items": [
          {
            "text": "Vue 开发问题",
            "link": "/problem/vue"
          },
          {
            "text": "Vitepress 开发问题",
            "link": "/problem/vitepress"
          },
          {
            "text": "Css 开发问题",
            "link": "/problem/css"
          },
          {
            "text": "ReactNative 开发问题",
            "link": "/problem/react-native"
          },
          {
            "text": "Github 问题记录",
            "link": "/problem/github"
          },
          {
            "text": "Git 开发问题",
            "link": "/problem/git"
          },
          {
            "text": "Vscode 开发问题",
            "link": "/problem/vscode"
          },
          {
            "text": "Node 开发问题",
            "link": "/problem/node"
          },
          {
            "text": "Shell 开发问题",
            "link": "/problem/shell"
          },
          {
            "text": "React 开发问题",
            "link": "/problem/react"
          },
          {
            "text": "Javascript 开发问题",
            "link": "/problem/javascript"
          },
          {
            "text": "Markdown Examples",
            "link": "/problem/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/problem/api-examples"
          }
        ]
      },
      {
        "text": "Typescript",
        "items": [
          {
            "text": "Typescript（tsconfig详解)",
            "link": "/problem/typescript-config"
          },
          {
            "text": "Typescript 开发问题记录",
            "link": "/problem/typescript"
          }
        ]
      },
      {
        "text": "工程化记录",
        "items": [
          {
            "text": "Vite 开发问题",
            "link": "/project/vite"
          },
          {
            "text": "AST 学习记录",
            "link": "/project/ast"
          },
          {
            "text": "Eslint 配置",
            "link": "/project/eslint"
          }
        ]
      },
      {
        "text": "系统问题记录",
        "items": [
          {
            "text": "Mac 开发问题",
            "link": "/systems/mac"
          },
          {
            "text": "Win 开发问题",
            "link": "/systems/win"
          },
          {
            "text": "Chrome 开发记录",
            "link": "/systems/chrome"
          }
        ]
      }
    ],
    "/systems": [
      {
        "text": "日常开发记录",
        "items": [
          {
            "text": "Vue 开发问题",
            "link": "/problem/vue"
          },
          {
            "text": "Vitepress 开发问题",
            "link": "/problem/vitepress"
          },
          {
            "text": "Css 开发问题",
            "link": "/problem/css"
          },
          {
            "text": "ReactNative 开发问题",
            "link": "/problem/react-native"
          },
          {
            "text": "Github 问题记录",
            "link": "/problem/github"
          },
          {
            "text": "Git 开发问题",
            "link": "/problem/git"
          },
          {
            "text": "Vscode 开发问题",
            "link": "/problem/vscode"
          },
          {
            "text": "Node 开发问题",
            "link": "/problem/node"
          },
          {
            "text": "Shell 开发问题",
            "link": "/problem/shell"
          },
          {
            "text": "React 开发问题",
            "link": "/problem/react"
          },
          {
            "text": "Javascript 开发问题",
            "link": "/problem/javascript"
          },
          {
            "text": "Markdown Examples",
            "link": "/problem/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/problem/api-examples"
          }
        ]
      },
      {
        "text": "Typescript",
        "items": [
          {
            "text": "Typescript（tsconfig详解)",
            "link": "/problem/typescript-config"
          },
          {
            "text": "Typescript 开发问题记录",
            "link": "/problem/typescript"
          }
        ]
      },
      {
        "text": "工程化记录",
        "items": [
          {
            "text": "Vite 开发问题",
            "link": "/project/vite"
          },
          {
            "text": "AST 学习记录",
            "link": "/project/ast"
          },
          {
            "text": "Eslint 配置",
            "link": "/project/eslint"
          }
        ]
      },
      {
        "text": "系统问题记录",
        "items": [
          {
            "text": "Mac 开发问题",
            "link": "/systems/mac"
          },
          {
            "text": "Win 开发问题",
            "link": "/systems/win"
          },
          {
            "text": "Chrome 开发记录",
            "link": "/systems/chrome"
          }
        ]
      }
    ],
    "/feature": [
      {
        "text": "DX 开发者体验",
        "items": [
          {
            "text": "自动化部署",
            "link": "/feature/deploy"
          },
          {
            "text": "Vscode 特性配置",
            "link": "/feature/vscode"
          },
          {
            "text": "Vscode 插件开发",
            "link": "/feature/vscode-plugin"
          },
          {
            "text": "Webstorm 特性配置",
            "link": "/feature/webstorm"
          },
          {
            "text": "正则表达式技巧",
            "link": "/feature/regexp"
          },
          {
            "text": "正则通用功能函数",
            "link": "/feature/regexp-fn"
          },
          {
            "text": "Node CLI 开发",
            "link": "/feature/node-cli"
          }
        ]
      },
      {
        "text": "css 开发框架知识",
        "items": [
          {
            "text": "Scss 常用知识点",
            "link": "/css-library/knowledge"
          },
          {
            "text": "Scss 开发技巧",
            "link": "/css-library/dev-skill"
          },
          {
            "text": "Scss 封装函数",
            "link": "/css-library/function"
          },
          {
            "text": "Tailwind 开发技巧",
            "link": "/css-library/tailwind-skill"
          }
        ]
      },
      {
        "text": "摸鱼工具",
        "items": [
          {
            "text": "阅读器",
            "link": "/play/epub-reader"
          }
        ]
      }
    ],
    "/play": [
      {
        "text": "DX 开发者体验",
        "items": [
          {
            "text": "自动化部署",
            "link": "/feature/deploy"
          },
          {
            "text": "Vscode 特性配置",
            "link": "/feature/vscode"
          },
          {
            "text": "Vscode 插件开发",
            "link": "/feature/vscode-plugin"
          },
          {
            "text": "Webstorm 特性配置",
            "link": "/feature/webstorm"
          },
          {
            "text": "正则表达式技巧",
            "link": "/feature/regexp"
          },
          {
            "text": "正则通用功能函数",
            "link": "/feature/regexp-fn"
          },
          {
            "text": "Node CLI 开发",
            "link": "/feature/node-cli"
          }
        ]
      },
      {
        "text": "css 开发框架知识",
        "items": [
          {
            "text": "Scss 常用知识点",
            "link": "/css-library/knowledge"
          },
          {
            "text": "Scss 开发技巧",
            "link": "/css-library/dev-skill"
          },
          {
            "text": "Scss 封装函数",
            "link": "/css-library/function"
          },
          {
            "text": "Tailwind 开发技巧",
            "link": "/css-library/tailwind-skill"
          }
        ]
      },
      {
        "text": "摸鱼工具",
        "items": [
          {
            "text": "阅读器",
            "link": "/play/epub-reader"
          }
        ]
      }
    ],
    "/css-library": [
      {
        "text": "DX 开发者体验",
        "items": [
          {
            "text": "自动化部署",
            "link": "/feature/deploy"
          },
          {
            "text": "Vscode 特性配置",
            "link": "/feature/vscode"
          },
          {
            "text": "Vscode 插件开发",
            "link": "/feature/vscode-plugin"
          },
          {
            "text": "Webstorm 特性配置",
            "link": "/feature/webstorm"
          },
          {
            "text": "正则表达式技巧",
            "link": "/feature/regexp"
          },
          {
            "text": "正则通用功能函数",
            "link": "/feature/regexp-fn"
          },
          {
            "text": "Node CLI 开发",
            "link": "/feature/node-cli"
          }
        ]
      },
      {
        "text": "css 开发框架知识",
        "items": [
          {
            "text": "Scss 常用知识点",
            "link": "/css-library/knowledge"
          },
          {
            "text": "Scss 开发技巧",
            "link": "/css-library/dev-skill"
          },
          {
            "text": "Scss 封装函数",
            "link": "/css-library/function"
          },
          {
            "text": "Tailwind 开发技巧",
            "link": "/css-library/tailwind-skill"
          }
        ]
      },
      {
        "text": "摸鱼工具",
        "items": [
          {
            "text": "阅读器",
            "link": "/play/epub-reader"
          }
        ]
      }
    ],
    "/author": [
      {
        "text": "个人记录",
        "items": [
          {
            "text": "个人经历",
            "link": "/author/myself"
          },
          {
            "text": "个人作品",
            "link": "/author/works"
          },
          {
            "text": "面试反问",
            "link": "/author/interview"
          },
          {
            "text": "面试算法",
            "link": "/author/algorithm"
          },
          {
            "text": "面试知识",
            "link": "/author/interview-knowledge"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/code-jbrc/Awesome-15docs"
    }
  ],
  "editLink": {
    "pattern": "https://github.com/code-jbrc/Awesome-15docs/tree/main/docs/src/:path",
    "text": "在 GitHub 编辑此页"
  },
  "lastUpdatedText": "最后更新于",
  "footer": {
    "message": "Made with ❤️",
    "copyright": "MIT License © 2023 <a href=\"https://github.com/winchesHe\">winchesHe</a>"
  },
  "outline": [
    2,
    3
  ],
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "noResultsText": "无法找到相关结果",
          "resetButtonTitle": "清除查询条件",
          "footer": {
            "selectText": "选择",
            "navigateText": "切换",
            "closeText": "关闭"
          }
        }
      }
    }
  }
}

Page Data ​

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

Page Frontmatter ​

{
  "outline": "deep"
}

More ​

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