/nuxt-kql

๐Ÿซง Kirby's Query Language API for Nuxt

Primary LanguageTypeScriptMIT LicenseMIT

nuxt-kql

Nuxt KQL

npm version

Nuxt module for Kirby's Query Language API.

Features

  • ๐Ÿ”’ Protect your Kirby credentials when sending queries
  • ๐Ÿชข Supports token-based authentication with Kirby Headless Starter (recommended)
  • ๐Ÿคน No CORS issues!
  • ๐Ÿฑ Handle request just like with the useFetch composable
  • ๐Ÿ—ƒ Cached query responses
  • ๐Ÿฆฆ Multiple starter kits available
  • ๐Ÿฆพ Strongly typed

Setup

npx nuxi@latest module add kql

Basic Usage

Add the Nuxt KQL module to your Nuxt config:

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-kql']
})

And send queries in your template:

<script setup lang="ts">
const { data, pending, refresh, error } = await useKql({
  query: 'site'
})
</script>

<template>
  <div>
    <h1>{{ data?.result?.title }}</h1>
    <pre>{{ JSON.stringify(data?.result, undefined, 2) }}</pre>
  </div>
</template>

๐Ÿ’ป Development

  1. Clone this repository
  2. Enable Corepack using corepack enable
  3. Install dependencies using pnpm install
  4. Run pnpm run dev:prepare
  5. Start development server using pnpm run dev

License

MIT License ยฉ 2022-PRESENT Johann Schopplich