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
{
"search": {
"provider": "local"
},
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "Guide",
"link": "/overview"
},
{
"text": "API",
"link": "/api/view-model"
},
{
"text": "Code API",
"link": "/capi/"
}
],
"sidebar": [
{
"items": [
{
"text": "Overview",
"link": "/overview"
},
{
"text": "Getting Started",
"link": "/getting-started"
},
{
"text": "Core Concept",
"link": "/core-concept"
}
]
},
{
"text": "API",
"items": [
{
"text": "ViewModel",
"link": "/api/view-model"
},
{
"text": "UserControl",
"link": "/api/user-control"
},
{
"text": "Action",
"link": "/api/action"
},
{
"text": "Dependency Injection",
"link": "/api/dependency-injection"
},
{
"text": "Reactivity",
"link": "/api/reactivity"
},
{
"text": "Delegate",
"link": "/api/delegate"
},
{
"text": "Syncio",
"link": "/api/syncio"
}
]
},
{
"text": "Extensions",
"items": [
{
"text": "Router",
"link": "/extensions/router"
},
{
"text": "Dialog",
"link": "/extensions/dialog"
},
{
"text": "Alert",
"link": "/extensions/alert"
},
{
"text": "Toast",
"link": "/extensions/toast"
}
]
},
{
"text": "Examples",
"items": [
{
"text": "Markdown Examples",
"link": "/markdown-examples"
},
{
"text": "Runtime API Examples",
"link": "/api-examples"
}
]
},
{
"text": "Code API",
"items": [
{
"text": "alert",
"link": "/capi/alert/",
"collapsed": true,
"items": [
{
"text": "Classes",
"collapsed": true,
"items": [
{
"text": "AlertComponentNotFoundError",
"link": "/capi/alert/classes/AlertComponentNotFoundError.md"
},
{
"text": "AlertControl",
"link": "/capi/alert/classes/AlertControl.md"
},
{
"text": "AlertService",
"link": "/capi/alert/classes/AlertService.md"
},
{
"text": "ConfirmComponentNotFoundError",
"link": "/capi/alert/classes/ConfirmComponentNotFoundError.md"
},
{
"text": "ConfirmControl",
"link": "/capi/alert/classes/ConfirmControl.md"
}
]
},
{
"text": "Interfaces",
"collapsed": true,
"items": [
{
"text": "AlertOptions",
"link": "/capi/alert/interfaces/AlertOptions.md"
},
{
"text": "ConfirmOptions",
"link": "/capi/alert/interfaces/ConfirmOptions.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "AlertControlConstructor",
"link": "/capi/alert/type-aliases/AlertControlConstructor.md"
},
{
"text": "ConfirmControlConstructor",
"link": "/capi/alert/type-aliases/ConfirmControlConstructor.md"
}
]
}
]
},
{
"text": "core",
"link": "/capi/core/",
"collapsed": true,
"items": [
{
"text": "Namespaces",
"collapsed": true,
"items": [
{
"text": "AppShell",
"link": "/capi/core/namespaces/AppShell/",
"collapsed": true,
"items": [
{
"text": "Interfaces",
"collapsed": true,
"items": [
{
"text": "AlertConfig",
"link": "/capi/core/namespaces/AppShell/interfaces/AlertConfig.md"
},
{
"text": "RouterConfig",
"link": "/capi/core/namespaces/AppShell/interfaces/RouterConfig.md"
},
{
"text": "ToastConfig",
"link": "/capi/core/namespaces/AppShell/interfaces/ToastConfig.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "LazyRoutableViewModel",
"link": "/capi/core/namespaces/AppShell/type-aliases/LazyRoutableViewModel.md"
}
]
}
]
},
{
"text": "reactive",
"link": "/capi/core/namespaces/reactive/",
"collapsed": true,
"items": [
{
"text": "Interfaces",
"collapsed": true,
"items": [
{
"text": "ComputedMarker",
"link": "/capi/core/namespaces/reactive/interfaces/ComputedMarker.md"
},
{
"text": "RefMarker",
"link": "/capi/core/namespaces/reactive/interfaces/RefMarker.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "ReactiveField",
"link": "/capi/core/namespaces/reactive/type-aliases/ReactiveField.md"
},
{
"text": "ReactiveMarker",
"link": "/capi/core/namespaces/reactive/type-aliases/ReactiveMarker.md"
}
]
},
{
"text": "Functions",
"collapsed": true,
"items": [
{
"text": "applyReactivity",
"link": "/capi/core/namespaces/reactive/functions/applyReactivity.md"
},
{
"text": "computed",
"link": "/capi/core/namespaces/reactive/functions/computed.md"
},
{
"text": "ref",
"link": "/capi/core/namespaces/reactive/functions/ref.md"
}
]
}
]
},
{
"text": "syncio",
"link": "/capi/core/namespaces/syncio/",
"collapsed": true,
"items": [
{
"text": "Functions",
"collapsed": true,
"items": [
{
"text": "ensureSync",
"link": "/capi/core/namespaces/syncio/functions/ensureSync.md"
}
]
}
]
}
]
},
{
"text": "Enumerations",
"collapsed": true,
"items": [
{
"text": "DelegateMode",
"link": "/capi/core/enumerations/DelegateMode.md"
}
]
},
{
"text": "Classes",
"collapsed": true,
"items": [
{
"text": "ActionContext",
"link": "/capi/core/classes/ActionContext.md"
},
{
"text": "AsyncServiceKey",
"link": "/capi/core/classes/AsyncServiceKey.md"
},
{
"text": "Delegate",
"link": "/capi/core/classes/Delegate.md"
},
{
"text": "DialogControlMismatchError",
"link": "/capi/core/classes/DialogControlMismatchError.md"
},
{
"text": "HookUsageError",
"link": "/capi/core/classes/HookUsageError.md"
},
{
"text": "InvalidServiceInstanceError",
"link": "/capi/core/classes/InvalidServiceInstanceError.md"
},
{
"text": "MissingComponentMetadataError",
"link": "/capi/core/classes/MissingComponentMetadataError.md"
},
{
"text": "MVVMError",
"link": "/capi/core/classes/MVVMError.md"
},
{
"text": "ServiceAlreadyRegisteredError",
"link": "/capi/core/classes/ServiceAlreadyRegisteredError.md"
},
{
"text": "ServiceKey",
"link": "/capi/core/classes/ServiceKey.md"
},
{
"text": "ServiceNotRegisteredError",
"link": "/capi/core/classes/ServiceNotRegisteredError.md"
},
{
"text": "UserControl",
"link": "/capi/core/classes/UserControl.md"
},
{
"text": "ViewModel",
"link": "/capi/core/classes/ViewModel.md"
}
]
},
{
"text": "Interfaces",
"collapsed": true,
"items": [
{
"text": "Action",
"link": "/capi/core/interfaces/Action.md"
},
{
"text": "AppShell",
"link": "/capi/core/interfaces/AppShell.md"
},
{
"text": "ReadableGlobalContext",
"link": "/capi/core/interfaces/ReadableGlobalContext.md"
},
{
"text": "WatchHandle",
"link": "/capi/core/interfaces/WatchHandle.md"
},
{
"text": "WritableGlobalContext",
"link": "/capi/core/interfaces/WritableGlobalContext.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "ActionResult",
"link": "/capi/core/type-aliases/ActionResult.md"
},
{
"text": "AsyncFactoryFunction",
"link": "/capi/core/type-aliases/AsyncFactoryFunction.md"
},
{
"text": "DelegateCallback",
"link": "/capi/core/type-aliases/DelegateCallback.md"
},
{
"text": "DelegateRevoke",
"link": "/capi/core/type-aliases/DelegateRevoke.md"
},
{
"text": "FactoryFunction",
"link": "/capi/core/type-aliases/FactoryFunction.md"
},
{
"text": "UserControlConstructor",
"link": "/capi/core/type-aliases/UserControlConstructor.md"
},
{
"text": "ViewModelConstructor",
"link": "/capi/core/type-aliases/ViewModelConstructor.md"
}
]
},
{
"text": "Variables",
"collapsed": true,
"items": [
{
"text": "MVVMApp",
"link": "/capi/core/variables/MVVMApp.md"
}
]
},
{
"text": "Functions",
"collapsed": true,
"items": [
{
"text": "createMVVM",
"link": "/capi/core/functions/createMVVM.md"
},
{
"text": "getGlobalContext",
"link": "/capi/core/functions/getGlobalContext.md"
},
{
"text": "useUserControl",
"link": "/capi/core/functions/useUserControl.md"
},
{
"text": "useViewModel",
"link": "/capi/core/functions/useViewModel.md"
}
]
}
]
},
{
"text": "dialog",
"link": "/capi/dialog/",
"collapsed": true,
"items": [
{
"text": "Classes",
"collapsed": true,
"items": [
{
"text": "DialogControl",
"link": "/capi/dialog/classes/DialogControl.md"
},
{
"text": "DialogService",
"link": "/capi/dialog/classes/DialogService.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "DialogControlConstructor",
"link": "/capi/dialog/type-aliases/DialogControlConstructor.md"
}
]
},
{
"text": "Variables",
"collapsed": true,
"items": [
{
"text": "DialogProvider",
"link": "/capi/dialog/variables/DialogProvider.md"
}
]
},
{
"text": "Functions",
"collapsed": true,
"items": [
{
"text": "useDialogControl",
"link": "/capi/dialog/functions/useDialogControl.md"
}
]
}
]
},
{
"text": "router",
"link": "/capi/router/",
"collapsed": true,
"items": [
{
"text": "Classes",
"collapsed": true,
"items": [
{
"text": "RouterParams",
"link": "/capi/router/classes/RouterParams.md"
},
{
"text": "RouterQuery",
"link": "/capi/router/classes/RouterQuery.md"
},
{
"text": "RouterService",
"link": "/capi/router/classes/RouterService.md"
}
]
},
{
"text": "Interfaces",
"collapsed": true,
"items": [
{
"text": "RouteAdapter",
"link": "/capi/router/interfaces/RouteAdapter.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "RoutableViewModel",
"link": "/capi/router/type-aliases/RoutableViewModel.md"
}
]
},
{
"text": "Variables",
"collapsed": true,
"items": [
{
"text": "RouterProvider",
"link": "/capi/router/variables/RouterProvider.md"
}
]
}
]
},
{
"text": "toast",
"link": "/capi/toast/",
"collapsed": true,
"items": [
{
"text": "Classes",
"collapsed": true,
"items": [
{
"text": "InfoToastControl",
"link": "/capi/toast/classes/InfoToastControl.md"
},
{
"text": "ProgressToastControl",
"link": "/capi/toast/classes/ProgressToastControl.md"
},
{
"text": "ToastControl",
"link": "/capi/toast/classes/ToastControl.md"
},
{
"text": "ToastService",
"link": "/capi/toast/classes/ToastService.md"
}
]
},
{
"text": "Type Aliases",
"collapsed": true,
"items": [
{
"text": "InfoToastConstructor",
"link": "/capi/toast/type-aliases/InfoToastConstructor.md"
},
{
"text": "ProgressToastConstructor",
"link": "/capi/toast/type-aliases/ProgressToastConstructor.md"
},
{
"text": "ToastControlConstructor",
"link": "/capi/toast/type-aliases/ToastControlConstructor.md"
}
]
},
{
"text": "Variables",
"collapsed": true,
"items": [
{
"text": "ToastProvider",
"link": "/capi/toast/variables/ToastProvider.md"
}
]
},
{
"text": "Functions",
"collapsed": true,
"items": [
{
"text": "useToastControl",
"link": "/capi/toast/functions/useToastControl.md"
}
]
}
]
}
]
}
],
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/bytelab-studio/vue-mvvm"
}
]
}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.