Skip to content

$kirby

Returns a promise of the raw data at the given path. Unlike useKirbyData, it resolves to the response body itself rather than to an AsyncData object.

Responses are cached by default between function calls for the same path based on a calculated hash of the path and fetch options.

Example

vue
<script setup lang="ts">
import type { KirbyApiResponse } from 'kirby-types'

interface KirbySitemapItem {
  url: string
  modified: string
  links: {
    lang: string
    url: string
  }[]
}

const data = await $kirby<KirbyApiResponse<KirbySitemapItem[]>>('api/__sitemap__')

if (!data?.result) {
  throw new Error('Could not fetch sitemap data')
}
</script>

<template>
  <div>
    <ul>
      <li v-for="item in data.result" :key="item.url">
        <a :href="item.url">{{ item.url }}</a>
      </li>
    </ul>
  </div>
</template>

Allow Client Requests

WARNING

Authorization credentials will be publicly visible. Also, possible CORS issues ahead if the backend is not configured properly.

To fetch data directly from your Kirby instance without the Nuxt proxy, set the module option client to true:

ts
// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-kirby'],

  kirby: {
    client: true
  }
})

Now, every $kirby call reaches your Kirby instance directly, sent from the client:

ts
const data = await $kirby('api/my-path')

Type Declarations

ts
function $kirby<T = any>(
  path: string,
  opts: KirbyFetchOptions = {},
): Promise<T>
ts
export type KirbyFetchOptions = Pick<
  NitroFetchOptions<string>,
  | 'onRequest'
  | 'onRequestError'
  | 'onResponse'
  | 'onResponseError'
  | 'method'
  | 'headers'
  | 'query'
  | 'body'
  | 'retry'
  | 'retryDelay'
  | 'retryStatusCodes'
  | 'timeout'
  | 'signal'
> & {
  /**
   * Language code to fetch data for in multi-language Kirby setups.
   *
   * @remarks
   * Travels as the `X-Language` header, which Kirby reads on API routes. Kirby Headless 8.1 also
   * reads it on the global-routes catch-all, but only for a path that names no language itself.
   */
  language?: string
  /**
   * Serve a repeated request from the Nuxt payload instead of sending it again.
   * @default true
   */
  payloadCache?: boolean
  /**
   * Forward the visitor's cookies to Kirby, overriding the module's `forwardCookies`.
   *
   * @remarks
   * Such a request never reads from or writes to the server-side cache, since one stored response
   * is shared between all visitors.
   */
  forwardCookies?: boolean
  /**
   * Cache key, generated from the request options by default.
   */
  key?: string
}

Released under the MIT License.