nuxt-kql$kql
Returns raw KQL query data. Uses an internal server route to proxy requests.
Query responses are cached by default between function calls for the same query based on a calculated hash.
Type Declarations
ts
function $kql<T extends KirbyQueryResponse = KirbyQueryResponse>(
query: KirbyQueryRequest,
opts: KqlOptions = {},
): Promise<T>
type KqlOptions = Pick<
FetchOptions,
| 'onRequest'
| 'onRequestError'
| 'onResponse'
| 'onResponseError'
| 'headers'
> & {
/**
* Language code to fetch data for in multi-language Kirby setups
*/
language?: string
/**
* Skip the Nuxt server proxy and fetch directly from the API
* Requires `client` to be enabled in the module options as well
*/
client?: boolean
/**
* Cache the response between function calls for the same query
* @default true
*/
cache?: boolean
}
Example
vue
<script setup lang="ts">
const data = await $kql(
{
query: 'site',
select: ['title', 'children']
},
{
async onRequest({ request }) {
console.log(request)
},
async onResponse({ response }) {
console.log(response)
},
async onRequestError({ error }) {
console.log(error)
},
async onResponseError({ error }) {
console.log(error)
},
}
)
</script>
<template>
<div>
<h1>{{ data?.result?.title }}</h1>
</div>
</template>
Public Requests in Client
To fetch data directly from the Kirby instance, set the option { client: true }. Requires kql.client option to be true in nuxt.config.ts as well.
WARNING
Authorization credentials will be publicly visible. Also, possible CORS issues ahead if the backend is not configured properly.
vue
<script setup lang="ts">
const data = await $kql(
{
query: 'site',
select: ['title', 'children']
},
{
client: true,
}
)
</script>
<template>
<div>
<h1>{{ data?.result?.title }}</h1>
</div>
</template>