vike-vue-content

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

MethodReturnsDescription
.path(value)QueryBuilderFilter by path.
.order(field, direction?)QueryBuilderSort 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.