Skip to content
On this page


Returns KQL query data. Uses an internal server route to proxy requests.

Query responses are cached.


function useKql<
  ResT extends KirbyQueryResponse = KirbyQueryResponse,
  ReqT extends KirbyQueryRequest = KirbyQueryRequest,
>(query: MaybeComputedRef<ReqT>, opts?: UseKqlOptions<ResT>): AsyncData<ResT, true | Error>

type UseKqlOptions<T> = Omit<
  | 'baseURL'
  | 'params'
  | 'parseResponse'
  | 'pick'
  | 'responseType'
  | 'response'
  | 'transform'
  | keyof Omit<globalThis.RequestInit, 'headers'>
> & {
   * Language code to fetch data for in multilang Kirby setups
  language?: string

useKql infers all of Nuxt's useAsyncData options.

Return Values

  • data: the result of the KQL query
  • pending: a boolean indicating whether the data is still being fetched
  • refresh: a function that can be used to refresh the data returned by the handler function
  • error: an error object if the data fetching failed

By default, Nuxt waits until a refresh is finished before it can be executed again. Passing true as parameter skips that wait.


<script setup lang="ts">
const { data, pending, error, refresh } = await useKql({
  query: 'site',
  select: {
    title: true,
    children: true,

    <h1>{{ data?.result?.title }}</h1>
    <button @click="refresh()">

Released under the MIT License.