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
{
"logo": "/apostrophe-primary-mark.svg",
"lastUpdated": true,
"docsRepo": "https://github.com/apostrophecms/docs",
"docsBranch": "main",
"docsDir": "docs",
"lastUpdatedText": "Last updated",
"ignoreDeadLinks": "localhostLinks",
"editLinkText": "Edit this page on GitHub",
"nav": [
{
"text": "Guide",
"link": "/",
"activeMatch": "^/(?!tutorials)"
},
{
"text": "Tutorials",
"link": "/tutorials/",
"activeMatch": "/tutorials/"
},
{
"text": "More",
"items": [
{
"text": "Extensions",
"link": "https://apostrophecms.com/extensions"
},
{
"text": "Starter Kits",
"link": "https://apostrophecms.com/starter-kits"
},
{
"text": "Community",
"link": "https://discord.com/invite/XkbRNq7"
},
{
"text": "Enterprise Solutions",
"link": "https://apostrophecms.com/pricing"
}
]
}
],
"sidebar": {
"/": {
"items": [
{
"text": "Getting Started",
"collapsed": false,
"items": [
{
"text": "Introduction",
"link": "guide/introduction.md"
},
{
"text": "Why Apostrophe",
"link": "guide/why-apostrophe.md"
},
{
"text": "Technical Overview",
"link": "guide/technical-overview.md"
},
{
"text": "Core Concepts",
"link": "guide/core-concepts.md"
},
{
"text": "Development Setup",
"link": "guide/development-setup.md"
},
{
"text": "Windows Development",
"link": "cookbook/windows-development.md"
},
{
"text": "Dockerized MongoDB",
"link": "guide/dockerized-mongodb.md"
},
{
"text": "Migrating",
"collapsed": true,
"items": [
{
"text": "Overview",
"link": "guide/migration/overview.md"
},
{
"text": "Upgrade From Apostrophe 2",
"link": "guide/migration/upgrading.md"
},
{
"text": "Upgrade From Apostrophe 3",
"link": "guide/migration/upgrading-3-to-4.md"
}
]
}
]
},
{
"text": "Learn Apostrophe with a tutorial project →",
"link": "/tutorials/",
"style": "cta"
},
{
"text": "Essentials",
"collapsed": false,
"items": [
{
"text": "Module Configuration",
"link": "/guide/module-configuration-patterns.md"
},
{
"text": "Code Organization",
"collapsed": true,
"items": [
{
"text": "Modules",
"link": "guide/modules.md"
},
{
"text": "Nesting Modules",
"link": "guide/nested-module-subdirs.md"
},
{
"text": "Front End",
"collapsed": true,
"items": [
{
"text": "CSS and JS",
"link": "guide/front-end-assets.md"
},
{
"text": "Front End Tips",
"link": "guide/front-end-tips.md"
},
{
"text": "Front End Helpers",
"link": "guide/front-end-helpers.md"
},
{
"text": "Static Assets",
"link": "guide/static-module-assets.md"
}
]
}
]
},
{
"text": "Schemas",
"collapsed": true,
"items": [
{
"text": "Content Fields",
"link": "guide/content-schema.md"
},
{
"text": "Conditional Fields",
"link": "guide/conditional-fields.md"
},
{
"text": "Content Relationships",
"link": "guide/relationships.md"
},
{
"text": "Images and Media",
"link": "guide/media.md"
}
]
},
{
"text": "Pages and Pieces",
"collapsed": true,
"items": [
{
"text": "Pages",
"link": "guide/pages.md"
},
{
"text": "Pieces",
"link": "guide/pieces.md"
},
{
"text": "Piece Pages",
"link": "guide/piece-pages.md"
}
]
},
{
"text": "Areas and Widgets",
"collapsed": true,
"items": [
{
"text": "Areas",
"link": "guide/areas-and-widgets.md"
},
{
"text": "Core Widgets",
"link": "guide/core-widgets.md"
},
{
"text": "Custom Widgets",
"link": "guide/custom-widgets.md"
}
]
},
{
"text": "Templating",
"collapsed": true,
"items": [
{
"text": "Working with Templates",
"link": "guide/templating.md"
},
{
"text": "Layout Templates",
"link": "guide/layout-template.md"
},
{
"text": "Template Data",
"link": "guide/template-data.md"
},
{
"text": "Template Filters",
"link": "guide/template-filters.md"
},
{
"text": "Template Fragments",
"link": "guide/fragments.md"
},
{
"text": "Async Components",
"link": "guide/async-components.md"
},
{
"text": "Custom Nunjucks Tags",
"link": "reference/template-tags.md"
}
]
},
{
"text": "Styling",
"collapsed": true,
"items": [
{
"text": "Global Styles",
"link": "guide/global-styles.md"
},
{
"text": "Widget Styles",
"link": "guide/widget-styles.md"
}
]
},
{
"text": "Headless",
"link": "guide/headless-cms.md"
},
{
"text": "Users and Roles",
"link": "guide/users.md"
},
{
"text": "Permissions and Workflow",
"link": "guide/permissions-and-workflow.md"
},
{
"text": "Site Settings",
"link": "guide/global.md"
}
]
},
{
"text": "Scaling Up",
"collapsed": false,
"items": [
{
"text": "Localization",
"collapsed": true,
"items": [
{
"text": "Overview",
"link": "guide/localization/overview.md"
},
{
"text": "Static i10n",
"link": "guide/localization/static.md"
},
{
"text": "Dynamic i10n",
"link": "guide/localization/dynamic.md"
}
]
},
{
"text": "Caching",
"link": "guide/caching.md"
},
{
"text": "Logging",
"link": "guide/logging.md"
},
{
"text": "Profiling",
"link": "cookbook/opentelemetry.md"
},
{
"text": "Sending Email",
"link": "guide/sending-email.md"
},
{
"text": "Writing Migrations",
"link": "guide/writing-migrations.md"
}
]
},
{
"text": "Customizing & Extending",
"collapsed": false,
"items": [
{
"text": "The Database",
"collapsed": true,
"items": [
{
"text": "Database Queries",
"link": "guide/database-queries.md"
},
{
"text": "Inserting and Updating Docs",
"link": "guide/database-insert-update.md"
},
{
"text": "Accessing the Database Directly",
"link": "guide/database-access.md"
}
]
},
{
"text": "Keyboard Shortcuts",
"link": "guide/command-menu.md"
},
{
"text": "Breakpoint Preview",
"link": "guide/breakpoint-preview.md"
},
{
"text": "Custom Admin UI",
"link": "guide/custom-ui.md"
},
{
"text": "Custom Field Types",
"link": "guide/custom-schema-field-types.md"
},
{
"text": "Adding Batch Operations",
"link": "guide/batch-operations.md"
},
{
"text": "In-context Custom Widgets",
"link": "guide/editing-custom-widgets-in-context.md"
},
{
"text": "Custom Widget Placeholders",
"link": "guide/adding-custom-widget-placeholder-content.md"
},
{
"text": "Custom Auth Requirements",
"link": "guide/custom-login-requirements.md"
},
{
"text": "Webpack Configuration",
"link": "guide/webpack.md"
},
{
"text": "Vite Configuration",
"link": "guide/vite.md"
},
{
"text": "Using pnpm",
"link": "guide/using-pnpm.md"
},
{
"text": "Webhooks",
"link": "cookbook/creating-webhooks.md"
},
{
"text": "Server-side errors for fields",
"link": "guide/server-side-field-errors.md"
},
{
"text": "Migrating to ESM",
"link": "guide/migrating-to-esm.md"
}
]
},
{
"text": "Hosting & DevOps",
"collapsed": false,
"items": [
{
"text": "Hosting in Production",
"link": "guide/hosting.md"
},
{
"text": "Docker",
"link": "cookbook/using-docker.md"
},
{
"text": "Ubuntu",
"link": "cookbook/ubuntu-hosting.md"
},
{
"text": "Heroku",
"link": "cookbook/deploying-to-heroku.md"
},
{
"text": "Amazon S3",
"link": "cookbook/using-s3-storage.md"
}
]
},
{
"text": "Config & API Reference",
"collapsed": false,
"items": [
{
"icon": "core",
"text": "Core Modules",
"collapsed": true,
"items": [
{
"text": "@apostrophecms/admin-bar",
"link": "reference/modules/admin-bar.md"
},
{
"text": "@apostrophecms/asset",
"link": "reference/modules/asset.md"
},
{
"text": "@apostrophecms/attachment",
"link": "reference/modules/attachment.md"
},
{
"text": "@apostrophecms/cache",
"link": "reference/modules/cache.md"
},
{
"text": "@apostrophecms/db",
"link": "reference/modules/db.md"
},
{
"text": "@apostrophecms/doc-type",
"link": "reference/modules/doc-type.md"
},
{
"text": "@apostrophecms/doc",
"link": "reference/modules/doc.md"
},
{
"text": "@apostrophecms/email",
"link": "reference/modules/email.md"
},
{
"text": "@apostrophecms/error",
"link": "reference/modules/error.md"
},
{
"text": "@apostrophecms/express",
"link": "reference/modules/express.md"
},
{
"text": "@apostrophecms/file",
"link": "reference/modules/file.md"
},
{
"text": "@apostrophecms/global",
"link": "reference/modules/global.md"
},
{
"text": "@apostrophecms/home-page",
"link": "reference/modules/home-page.md"
},
{
"text": "@apostrophecms/http",
"link": "reference/modules/http.md"
},
{
"text": "@apostrophecms/i18n",
"link": "reference/modules/i18n.md"
},
{
"text": "@apostrophecms/image",
"link": "reference/modules/image.md"
},
{
"text": "@apostrophecms/log",
"link": "reference/modules/log.md"
},
{
"text": "@apostrophecms/login",
"link": "reference/modules/login.md"
},
{
"text": "@apostrophecms/migration",
"link": "reference/modules/migration.md"
},
{
"text": "@apostrophecms/module",
"link": "reference/modules/module.md"
},
{
"text": "@apostrophecms/notification",
"link": "reference/modules/notification.md"
},
{
"text": "@apostrophecms/page-type",
"link": "reference/modules/page-type.md"
},
{
"text": "@apostrophecms/page",
"link": "reference/modules/page.md"
},
{
"text": "@apostrophecms/pager",
"link": "reference/modules/pager.md"
},
{
"text": "@apostrophecms/piece-page-type",
"link": "reference/modules/piece-page-type.md"
},
{
"text": "@apostrophecms/piece-type",
"link": "reference/modules/piece-type.md"
},
{
"text": "@apostrophecms/search",
"link": "reference/modules/search.md"
},
{
"text": "@apostrophecms/settings",
"link": "reference/modules/settings.md"
},
{
"text": "@apostrophecms/styles",
"link": "reference/modules/styles.md"
},
{
"text": "@apostrophecms/task",
"link": "reference/modules/task.md"
},
{
"text": "@apostrophecms/ui",
"link": "reference/modules/ui.md"
},
{
"text": "@apostrophecms/uploadfs",
"link": "reference/modules/uploadfs.md"
},
{
"text": "@apostrophecms/url",
"link": "reference/modules/url.md"
},
{
"text": "@apostrophecms/util",
"link": "reference/modules/util.md"
},
{
"text": "@apostrophecms/widget-type",
"link": "reference/modules/widget-type.md"
}
]
},
{
"icon": "field",
"text": "Field Types",
"collapsed": true,
"link": "reference/field-types/index.md",
"items": [
{
"text": "area",
"link": "reference/field-types/area.md"
},
{
"text": "array",
"link": "reference/field-types/array.md"
},
{
"text": "attachment",
"link": "reference/field-types/attachment.md"
},
{
"text": "boolean",
"link": "reference/field-types/boolean.md"
},
{
"text": "box",
"link": "reference/field-types/box.md"
},
{
"text": "checkboxes",
"link": "reference/field-types/checkboxes.md"
},
{
"text": "color",
"link": "reference/field-types/color.md"
},
{
"text": "date",
"link": "reference/field-types/date.md"
},
{
"text": "dateAndTime",
"link": "reference/field-types/dateAndTime.md"
},
{
"text": "email",
"link": "reference/field-types/email.md"
},
{
"text": "float",
"link": "reference/field-types/float.md"
},
{
"text": "integer",
"link": "reference/field-types/integer.md"
},
{
"text": "object",
"link": "reference/field-types/object.md"
},
{
"text": "oembed",
"link": "reference/field-types/oembed.md"
},
{
"text": "password",
"link": "reference/field-types/password.md"
},
{
"text": "radio",
"link": "reference/field-types/radio.md"
},
{
"text": "range",
"link": "reference/field-types/range.md"
},
{
"text": "relationshipReverse",
"link": "reference/field-types/relationship-reverse.md"
},
{
"text": "relationship",
"link": "reference/field-types/relationship.md"
},
{
"text": "select",
"link": "reference/field-types/select.md"
},
{
"text": "slug",
"link": "reference/field-types/slug.md"
},
{
"text": "string",
"link": "reference/field-types/string.md"
},
{
"text": "time",
"link": "reference/field-types/time.md"
},
{
"text": "url",
"link": "reference/field-types/url.md"
}
]
},
{
"icon": "cog",
"text": "Module Configuration",
"collapsed": true,
"items": [
{
"text": "Module Overview",
"link": "reference/module-api/module-overview.md"
},
{
"text": "Module Options",
"link": "reference/module-api/module-options.md"
},
{
"text": "Server Events",
"link": "reference/server-events.md"
},
{
"text": "Query Builders",
"link": "reference/query-builders.md"
}
]
},
{
"icon": "brain-circuit",
"text": "REST API Reference",
"collapsed": true,
"link": "reference/api/rest-api-reference.md",
"items": [
{
"text": "api-explorer",
"link": "reference/api/api-explorer.md"
},
{
"text": "authentication",
"link": "reference/api/authentication.md"
},
{
"text": "field-formats",
"link": "reference/api/field-formats.md"
},
{
"text": "i18n",
"link": "reference/api/i18n.md"
},
{
"text": "media",
"link": "reference/api/media.md"
},
{
"text": "pages",
"link": "reference/api/pages.md"
},
{
"text": "pieces",
"link": "reference/api/pieces.md"
},
{
"text": "rich-text",
"link": "reference/api/rich-text.md"
}
]
},
{
"icon": "open-book",
"text": "Glossary",
"link": "reference/glossary.md"
}
]
},
{
"text": "Starter Kits",
"collapsed": false,
"items": [
{
"text": "Essentials Starter Kit",
"link": "starters/essentials.md"
},
{
"text": "Pro Essentials Starter Kit",
"link": "starters/pro-essentials.md"
},
{
"text": " Pro Assembly Starter Kit",
"link": "starters/assembly.md"
}
]
},
{
"text": "Pro Extensions",
"collapsed": false,
"items": [
{
"text": "Multisite",
"link": "https://apostrophecms.com/extensions/multisite-apostrophe-assembly"
},
{
"text": "Advanced Permissions",
"link": "https://apostrophecms.com/extensions/advanced-permission"
},
{
"text": "Document Versions",
"link": "https://apostrophecms.com/extensions/document-version"
},
{
"text": "Template Library",
"link": "https://apostrophecms.com/extensions/template-library"
},
{
"text": "Apostrophe Basics",
"link": "https://apostrophecms.com/extensions/apostrophe-basics"
},
{
"text": "Data Set",
"link": "https://apostrophecms.com/extensions/data-set"
},
{
"text": "Account Signup",
"link": "https://apostrophecms.com/extensions/account-signup"
},
{
"text": "Automated Testing Tools",
"link": "https://apostrophecms.com/extensions/automated-testing-tools"
},
{
"text": "Automatic Translation",
"link": "https://apostrophecms.com/extensions/automatic-translation"
},
{
"text": "SEO Assistant",
"link": "https://apostrophecms.com/extensions/seo-assistant"
}
]
}
]
},
"/tutorials/": {
"items": [
{
"text": "Tutorials Home",
"link": "/tutorials/",
"icon": "home",
"customClass": "reduce-bottom-margin"
},
{
"text": "Intro to ApostropheCMS",
"collapsed": "fixed",
"link": "tutorials/introduction.md",
"items": [
{
"text": "Organizing Your Code",
"link": "tutorials/code-organization.md"
},
{
"text": "Creating Pages",
"link": "tutorials/pages.md"
},
{
"text": "Adding CSS and JS Assets",
"link": "tutorials/assets.md"
},
{
"text": "Creating Widgets",
"link": "tutorials/widgets.md"
},
{
"text": "Creating Pieces",
"link": "tutorials/pieces.md"
},
{
"text": "Building Navigation",
"link": "tutorials/navigation.md"
},
{
"text": "Configuring the Admin Bar",
"link": "tutorials/admin-ui.md"
},
{
"text": "Adding Extensions",
"link": "tutorials/adding-extensions.md"
}
]
},
{
"text": "ApostropheCMS & Astro",
"collapsed": "fixed",
"link": "tutorials/astro/apostrophecms-and-astro.md",
"items": [
{
"text": "Introducing Apollo",
"link": "tutorials/astro/introducing-apollo.md"
},
{
"text": "Creating Pages",
"link": "tutorials/astro/creating-pages.md"
},
{
"text": "Creating Widgets",
"link": "tutorials/astro/creating-widgets.md"
},
{
"text": "Creating Pieces",
"link": "tutorials/astro/creating-pieces.md"
},
{
"text": "Deploying With Astro",
"link": "tutorials/astro/deploying-hybrid-projects.md"
},
{
"text": "Static Builds with ApostropheCMS + Astro",
"link": "tutorials/astro/static-builds-with-apostrophecms-astro.md"
},
{
"text": "Full Static Deployment with Railway and Vercel",
"link": "tutorials/astro/full-apostrophecms-astro-static-deployment.md"
}
]
},
{
"text": "Recipes",
"collapsed": "fixed",
"link": "tutorials/recipes.md",
"items": [
{
"text": "Customizing Rich Text",
"collapsed": "true",
"link": "tutorials/introduction-to-rich-text-extensions.md",
"items": [
{
"text": "Installing Extensions",
"link": "tutorials/using-tiptap-extensions.md"
},
{
"text": "Creating an Extension",
"link": "tutorials/creating-a-text-replacement-extension.md"
},
{
"text": "Extending the Toolbar",
"link": "tutorials/rich-text-extension-deep-dive.md"
}
]
},
{
"text": "Adding a support desk button",
"link": "tutorials/adding-a-support-desk-button.md"
},
{
"text": "Adding an Admin Bar External Link",
"link": "tutorials/adding-admin-bar-external-links.md"
},
{
"text": "Admir Bar Best Practices",
"link": "tutorials/admin-bar-best-practices.md"
},
{
"text": "Building Navigation",
"link": "tutorials/building-navigation.md"
},
{
"text": "Harnessing Dynamic Routing",
"link": "tutorials/dynamic-routing.md"
},
{
"text": "Creating Better Help Text",
"link": "tutorials/help-and-placeholder-text-best-practices.md"
},
{
"text": "Converting a Static Template",
"link": "tutorials/html-conversion.md"
},
{
"text": "Managing Brand Colors",
"link": "tutorials/managing-brand-colors.md"
},
{
"text": "Responsive Widget Visibility",
"link": "/tutorials/responsive-widget-visibility.md"
},
{
"text": "Composing Custom Fields",
"link": "tutorials/reusing-standard-fields.md"
},
{
"text": "Building a JSX Widget",
"link": "tutorials/using-jsx-in-apostrophe.md"
},
{
"text": "Local Extension Development",
"link": "tutorials/local-extension-development.md"
},
{
"text": "Creating Command Line Tasks",
"link": "tutorials/creating-command-line-tasks.md"
}
]
},
{
"text": "Pro Topics",
"collapsed": "fixed",
"link": "tutorials/pro.md",
"items": [
{
"text": "Using Advanced Permissions",
"link": "tutorials/setting-up-the-advanced-permission-pro-extension.md"
},
{
"text": "Passing Site Data in Multisite",
"link": "/tutorials/passing-site-data-in-multisite.md"
}
]
},
{
"text": "Return to the guide →",
"link": "/",
"icon": "book-marked",
"style": "cta"
}
]
}
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/apostrophecms"
}
],
"search": {
"provider": "local"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md",
"lastUpdated": 1715201107000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.