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": "/logo.svg",
"search": {
"provider": "local"
},
"nav": [
{
"text": "Guide",
"link": "/guide/"
},
{
"text": "Components",
"link": "/component-list/"
},
{
"text": "Examples",
"link": "https://lab.tresjs.org/"
}
],
"sidebar": [
{
"text": "Guide",
"items": [
{
"text": "Introduction",
"link": "/guide/"
},
{
"text": "Migration from v3",
"link": "/guide/migrating-from-v3"
}
]
},
{
"text": "Abstractions",
"items": [
{
"text": "AnimatedSprite",
"link": "/guide/abstractions/animated-sprite"
},
{
"text": "Edges",
"link": "/guide/abstractions/edges"
},
{
"text": "Text3D",
"link": "/guide/abstractions/text-3d"
},
{
"text": "Levioso (Float)",
"link": "/guide/abstractions/levioso"
},
{
"text": "useAnimations",
"link": "/guide/abstractions/use-animations"
},
{
"text": "MouseParallax",
"link": "/guide/abstractions/mouse-parallax"
},
{
"text": "Lensflare",
"link": "/guide/abstractions/lensflare"
},
{
"text": "Reflector",
"link": "/guide/abstractions/reflector"
},
{
"text": "GlobalAudio",
"link": "/guide/abstractions/global-audio"
},
{
"text": "Fbo",
"link": "/guide/abstractions/fbo"
},
{
"text": "useFBO",
"link": "/guide/abstractions/use-fbo"
},
{
"text": "useSurfaceSampler",
"link": "/guide/abstractions/use-surface-sampler"
},
{
"text": "Sampler",
"link": "/guide/abstractions/sampler"
},
{
"text": "PositionalAudio",
"link": "/guide/abstractions/positional-audio"
},
{
"text": "MarchingCubes",
"link": "/guide/abstractions/marching-cubes"
},
{
"text": "Mask",
"link": "/guide/abstractions/mask"
},
{
"text": "CubeCamera",
"link": "/guide/abstractions/cube-camera"
},
{
"text": "GradientTexture",
"link": "/guide/abstractions/gradient-texture"
},
{
"text": "ScreenSizer",
"link": "/guide/abstractions/screen-sizer"
},
{
"text": "ScreenSpace",
"link": "/guide/abstractions/screen-space"
},
{
"text": "Outline",
"link": "/guide/abstractions/outline"
},
{
"text": "Image",
"link": "/guide/abstractions/image"
},
{
"text": "Billboard",
"link": "/guide/abstractions/billboard"
}
]
},
{
"text": "Controls",
"items": [
{
"text": "OrbitControls",
"link": "/guide/controls/orbit-controls"
},
{
"text": "CameraControls",
"link": "/guide/controls/camera-controls"
},
{
"text": "TransformControls",
"link": "/guide/controls/transform-controls"
},
{
"text": "PointerLockControls",
"link": "/guide/controls/pointer-lock-controls"
},
{
"text": "KeyboardControls",
"link": "/guide/controls/keyboard-controls"
},
{
"text": "ScrollControls",
"link": "/guide/controls/scroll-controls"
},
{
"text": "MapControls",
"link": "/guide/controls/map-controls"
},
{
"text": "Helper",
"link": "/guide/controls/helper"
}
]
},
{
"text": "Loaders",
"items": [
{
"text": "useProgress",
"link": "/guide/loaders/use-progress"
},
{
"text": "useGLTF",
"link": "/guide/loaders/use-gltf"
},
{
"text": "GLTFModel",
"link": "/guide/loaders/gltf-model"
},
{
"text": "useTexture",
"link": "/guide/loaders/use-texture"
},
{
"text": "useTextures",
"link": "/guide/loaders/use-textures"
},
{
"text": "useFBX",
"link": "/guide/loaders/use-fbx"
},
{
"text": "FBXModel",
"link": "/guide/loaders/fbx-model"
},
{
"text": "useVideoTexture",
"link": "/guide/loaders/use-video-texture"
},
{
"text": "useSVG",
"link": "/guide/loaders/use-svg"
}
]
},
{
"text": "Materials",
"collapsed": true,
"items": [
{
"text": "MeshReflectionMaterial",
"link": "/guide/materials/mesh-reflection-material"
},
{
"text": "WobbleMaterial",
"link": "/guide/materials/wobble-material"
},
{
"text": "MeshGlassMaterial",
"link": "/guide/materials/glass-material"
},
{
"text": "CustomShaderMaterial",
"link": "/guide/materials/custom-shader-material"
},
{
"text": "HolographicMaterial",
"link": "/guide/materials/holographic-material"
},
{
"text": "PointMaterial",
"link": "/guide/materials/point-material"
},
{
"text": "MeshDiscardMaterial",
"link": "/guide/materials/mesh-discard-material"
}
]
},
{
"text": "Shapes",
"collapsed": true,
"items": [
{
"text": "Box",
"link": "/guide/shapes/box"
},
{
"text": "CatmullRomCurve3",
"link": "/guide/shapes/catmullromcurve3"
},
{
"text": "Circle",
"link": "/guide/shapes/circle"
},
{
"text": "Cone",
"link": "/guide/shapes/cone"
},
{
"text": "CubicBezierLine",
"link": "/guide/shapes/cubic-bezier-line"
},
{
"text": "Cylinder",
"link": "/guide/shapes/cylinder"
},
{
"text": "Dodecahedron",
"link": "/guide/shapes/dodecahedron"
},
{
"text": "Icosahedron",
"link": "/guide/shapes/icosahedron"
},
{
"text": "Line2",
"link": "/guide/shapes/line2"
},
{
"text": "Octahedron",
"link": "/guide/shapes/octahedron"
},
{
"text": "Plane",
"link": "/guide/shapes/plane"
},
{
"text": "QuadraticBezierLine",
"link": "/guide/shapes/quadratic-bezier-line"
},
{
"text": "Ring",
"link": "/guide/shapes/ring"
},
{
"text": "RoundedBox",
"link": "/guide/shapes/rounded-box"
},
{
"text": "ScreenQuad",
"link": "/guide/shapes/screen-quad"
},
{
"text": "Sphere",
"link": "/guide/shapes/sphere"
},
{
"text": "Superformula",
"link": "/guide/shapes/superformula"
},
{
"text": "Tetrahedron",
"link": "/guide/shapes/tetrahedron"
},
{
"text": "Torus",
"link": "/guide/shapes/torus"
},
{
"text": "TorusKnot",
"link": "/guide/shapes/torus-knot"
},
{
"text": "Tube",
"link": "/guide/shapes/tube"
}
]
},
{
"text": "Staging",
"items": [
{
"text": "Backdrop",
"link": "/guide/staging/backdrop"
},
{
"text": "Environment",
"link": "/guide/staging/environment"
},
{
"text": "useEnvironment",
"link": "/guide/staging/use-environment"
},
{
"text": "Sky",
"link": "/guide/staging/sky"
},
{
"text": "Stars",
"link": "/guide/staging/stars"
},
{
"text": "Smoke",
"link": "/guide/staging/smoke"
},
{
"text": "CameraShake",
"link": "/guide/staging/camera-shake"
},
{
"text": "AccumulativeShadows",
"link": "/guide/staging/accumulative-shadows"
},
{
"text": "ContactShadows",
"link": "/guide/staging/contact-shadows"
},
{
"text": "Precipitation",
"link": "/guide/staging/precipitation"
},
{
"text": "Sparkles",
"link": "/guide/staging/sparkles"
},
{
"text": "Ocean",
"link": "/guide/staging/ocean"
},
{
"text": "Fit",
"link": "/guide/staging/fit"
},
{
"text": "Align",
"link": "/guide/staging/align"
},
{
"text": "SoftShadows",
"link": "/guide/staging/soft-shadows"
},
{
"text": "Grid",
"link": "/guide/staging/grid"
},
{
"text": "CircleShadow",
"link": "/guide/staging/circle-shadow"
},
{
"text": "Bounds",
"link": "/guide/staging/bounds"
},
{
"text": "RandomizedLights",
"link": "/guide/staging/randomized-lights"
},
{
"text": "Stage",
"link": "/guide/staging/stage"
}
]
},
{
"text": "Misc",
"collapsed": true,
"items": [
{
"text": "Stats",
"link": "/guide/misc/stats"
},
{
"text": "Html",
"link": "/guide/misc/html-component"
},
{
"text": "StatsGl",
"link": "/guide/misc/stats-gl"
},
{
"text": "useGLTFExporter",
"link": "/guide/misc/use-gltf-exporter"
},
{
"text": "BakeShadows",
"link": "/guide/misc/bake-shadows"
},
{
"text": "useIntersect",
"link": "/guide/misc/use-intersect"
},
{
"text": "LOD",
"link": "/guide/misc/lod"
}
]
}
],
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/tresjs/cientos"
},
{
"icon": "twitter",
"link": "https://twitter.com/tresjs_dev"
},
{
"icon": "discord",
"link": "https://tresjs.org/discord"
}
]
}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.