The queryCollection API family for querying single pages, navigation trees, surroundings, and all paths.
Content Query
vike-vue-content/query exposes a set of query APIs to read content data on the server (in the data hook, prerender hook, etc.). DocsPage's built-in data loader is built on top of them; when you build custom pages, you can use them directly.
import {
queryCollection,
queryCollectionNavigation,
queryCollectionItemSurroundings,
queryCollectionPaths,
} from 'vike-vue-content/query'queryCollection
Query content entries in a collection, returning a chainable query builder.
// query a single page
const page = await queryCollection('docs')
.path('/docs/getting-started')
.first()
// query and sort
const all = await queryCollection('docs')
.order('title', 'ASC')
.all()Chainable methods
| Method | Returns | Description |
|---|---|---|
.path(value) | QueryBuilder | Filter by path. |
.order(field, direction?) | QueryBuilder | Sort by field; direction is 'ASC' (default) or 'DESC'. |
.first() | Promise<ContentEntry | null> | Take the first entry. |
.all() | Promise<ContentEntry[]> | Take all entries. |
queryCollectionNavigation
Returns the collection's navigation tree (sidebar data). The return value is itself a Promise and also supports .order():
const navigation = await queryCollectionNavigation('docs')
// can also sort
const sorted = await queryCollectionNavigation('docs').order('title', 'DESC')The navigation tree applies the hidden, flatten, and other rules from .config.yml / frontmatter.
queryCollectionItemSurroundings
Returns the previous and next page for a given path, used for prev/next navigation:
const [prev, next] = await queryCollectionItemSurroundings(
'docs',
'/docs/getting-started',
)When there's no adjacent item, the corresponding position is null.
queryCollectionPaths
Enumerates all content paths in a collection (the final public paths with ordering prefixes stripped), mainly for prerendering:
const paths = await queryCollectionPaths('docs')
// → ['/docs', '/docs/getting-started', '/docs/guide/routing', …]Query options
All query functions accept an optional options argument:
type QueryOptions = {
cwd?: string // working directory, defaults to process.cwd()
contentDir?: string // content directory, defaults to 'content'
}Core types
The main fields of the ContentEntry returned by queries:
type ContentEntry = {
id: string
collection: string
path: string
stem: string
title?: string
description?: string
toc?: ContentTocLink[]
navigation?: ContentNavigationConfig
body: unknown // content AST, passed to <ContentRenderer>
rawbody: string
frontmatter: Record<string, unknown>
meta: Record<string, unknown>
}The full types are exported from vike-vue-content/shared/types.