### Install @query-api/react Package

Source: https://samuelreichor.at/libraries/query-api-react/get-started/quick-start

This command installs the `@query-api/react` package using npm, making it available for use in your project.

```npm
npm install @query-api/react
```

--------------------------------

### API Reference for @query-api/react Library

Source: https://samuelreichor.at/libraries/query-api-react/get-started/quick-start

This section outlines the key modules, functions, and components available within the '@query-api/react' library. It provides a structured overview of how to get started, available utility functions for interacting with Craft CMS, and reusable React components for building user interfaces.

```APIDOC
@query-api/react Library API:

Get Started:
  Introduction
  Quick Start
  Configuration

Functions:
  createCraftUrl: Generates a Craft CMS URL.
  getCraftInstance: Retrieves a Craft CMS instance.
  getCraftContentMapping: Gets content mapping from Craft CMS.

Components:
  CraftPage: React component for rendering Craft CMS pages.
  CraftArea: React component for rendering Craft CMS content areas.
  CraftNotImplemented: React component for handling unimplemented Craft CMS blocks.
```

--------------------------------

### Initialize Query API Client with craftInit

Source: https://samuelreichor.at/libraries/query-api-react/get-started/configuration

Minimal setup example demonstrating how to call the `craftInit` function to initialize the Query API client with a base URL, authentication token, and basic content mapping.

```TypeScript
craftInit({
  baseUrl: 'https://your-craft-backend.ddev.site',
  authToken: 'Bearer yourBearerToken',
  contentMapping: {
    pages: {},
    components: {},
  }
})
```

--------------------------------

### Clone Nuxt.js Starter Repository

Source: https://samuelreichor.at/libraries/nuxt-craftcms/usage/examples

This shell command clones the `craft-nuxt-starter` monorepo, which provides a pre-configured Craft CMS and Nuxt.js setup for local development and testing. It's ideal for getting started quickly with a full example.

```Shell
git clone git@github.com:samuelreichor/craft-nuxt-starter.git
```

--------------------------------

### API Reference for @query-api/react Library

Source: https://samuelreichor.at/libraries/query-api-react/get-started/introduction

This section outlines the API for the `@query-api/react` library, detailing its structure, functions, and components. It provides an overview of how to get started, configure the library, and use its core functionalities for URL creation, instance retrieval, content mapping, and rendering UI components.

```APIDOC
@query-api/react API:
  Get Started:
    Introduction
    Quick Start
    Configuration
  Functions:
    createCraftUrl()
    getCraftInstance()
    getCraftContentMapping()
  Components:
    CraftPage
    CraftArea
    CraftNotImplemented
```

--------------------------------

### Initialize Query API Client in React

Source: https://samuelreichor.at/libraries/query-api-react/get-started/quick-start

This example demonstrates how to initialize the `@query-api/react` client in a React application's main entry file (e.g., `main.tsx`). It configures the `baseUrl`, `authToken`, and `contentMapping` to link Craft CMS sections and entry types to specific React components.

```TypeScript
import { StrictMode } from 'react'
import { BrowserRouter } from 'react-router'
import * as ReactDOM from 'react-dom/client'
import App from './app/app'

// craftInit is the main function to initialize the Query API client.
// CraftNotImplemented is a placeholder for components that are not implemented yet.
import { craftInit, CraftNotImplemented } from '@query-api/react'

// Import your React components that will be used in your Craft CMS Entries.
import Home from './app/views/Home'
import News from './app/views/News'
import Headline from './app/components/Headline'

craftInit({
  baseUrl: 'https://your-craft-backend.ddev.site',
  authToken: 'Bearer yourBearerToken',
  contentMapping: {
    pages: {
      home: Home, // Maps section home entry with entry type home to the Home component.
      'news:home': News, // Maps section news entry with entry type home to the News component.
    },
    components: {
      headline: Headline, // Entry type headline will be rendered with the Headline component.
      imageText: CraftNotImplemented,
    },
  },
})

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)
```

--------------------------------

### Craft Query API Documentation Navigation Structure

Source: https://samuelreichor.at/libraries/craft-query-api/usage/commands

This section outlines the hierarchical documentation structure for the 'Craft Query API' and related libraries. It provides an overview of topics including getting started guides (Introduction, Installation, Configuration), integrations (ImagerX, SEOmatic), usage details (Usage, Caching, Settings, Commands), API endpoints (customQuery, allRoutes), and event handling (Custom Transformers, Custom Element Types, Custom Typescript Types).

```APIDOC
Craft Query API
  Get Started
    Introduction
    Installation
    Configuration
  Integrations
    ImagerX
    SEOmatic
  Usage
    Usage
    Caching
    Settings
    Commands
  Endpoints
    customQuery
    allRoutes
  Events
    Custom Transformers
    Custom Element Types
    Custom Typescript Types

Craft Loanwords
Craft Quick Edit
@query-api/nuxt
@query-api/vue
@query-api/react
@query-api/js
```

--------------------------------

### Query API React Library Module Reference

Source: https://samuelreichor.at/libraries/query-api-react/get-started/configuration

This section provides an overview of the @query-api/react library's structure, detailing its main categories: Get Started, Functions, and Components. It lists key modules and their respective documentation links, serving as a quick reference for developers.

```APIDOC
@query-api/react
├── Get Started
│   ├── Introduction (/libraries/query-api-react/get-started/introduction)
│   ├── Quick Start (/libraries/query-api-react/get-started/quick-start)
│   └── Configuration (/libraries/query-api-react/get-started/configuration)
├── Functions
│   ├── createCraftUrl (/libraries/query-api-react/functions/create-craft-url)
│   ├── getCraftInstance (/libraries/query-api-react/functions/get-craft-instance)
│   └── getCraftContentMapping (/libraries/query-api-react/functions/get-craft-content-mapping)
└── Components
    ├── CraftPage (/libraries/query-api-react/components/craft-page)
    ├── CraftArea (/libraries/query-api-react/components/craft-area)
    └── CraftNotImplemented (/libraries/query-api-react/components/craft-not-implemented)
```

--------------------------------

### Initialize Query API Client with craftInit

Source: https://samuelreichor.at/llms-full.txt

This example demonstrates the minimal setup for initializing the Query API client in a React application. It configures the base URL, authentication token, and an empty content mapping for Craft CMS integration.

```tsx
craftInit({
  baseUrl: 'https://your-craft-backend.ddev.site',
  authToken: 'Bearer yourBearerToken',
  contentMapping: {
    pages: {}
    components: {},
  },
})
```

--------------------------------

### Install Craft Quick Edit Plugin via Composer

Source: https://samuelreichor.at/libraries/craft-quick-edit/get-started/installation

Commands to install the Craft Quick Edit plugin using Composer, either with ddev for local development environments or directly with PHP.

```Shell
ddev composer require samuelreichor/craft-quick-edit && ddev craft plugin/install quick-edit
```

```Shell
composer require samuelreichor/craft-quick-edit && php craft plugin/install quick-edit
```

--------------------------------

### Query API React Library Documentation Structure

Source: https://samuelreichor.at/libraries/query-api-react/components/craft-not-implemented

This section outlines the hierarchical documentation structure for the @query-api/react library. It details the 'Get Started' guides, lists available 'Functions' such as createCraftUrl and getCraftInstance, and enumerates 'Components' like CraftPage and CraftArea.

```APIDOC
@query-api/nuxt
@query-api/vue
@query-api/react
@query-api/js

Get Started:
  - Introduction (/libraries/query-api-react/get-started/introduction)
  - Quick Start (/libraries/query-api-react/get-started/quick-start)
  - Configuration (/libraries/query-api-react/get-started/configuration)

Functions:
  - createCraftUrl (/libraries/query-api-react/functions/create-craft-url)
  - getCraftInstance (/libraries/query-api-react/functions/get-craft-instance)
  - getCraftContentMapping (/libraries/query-api-react/functions/get-craft-content-mapping)

Components:
  - CraftPage (/libraries/query-api-react/components/craft-page)
  - CraftArea (/libraries/query-api-react/components/craft-area)
  - CraftNotImplemented (/libraries/query-api-react/components/craft-not-implemented)
```

--------------------------------

### Install Craft Query API Plugin

Source: https://samuelreichor.at/libraries/craft-query-api/get-started/install

These commands demonstrate how to install the Craft Query API plugin using Composer, either via DDEV's integration or directly with PHP's Composer and Craft CLI.

```Shell
ddev composer require samuelreichor/craft-query-api && ddev craft plugin/install craft-query-api
```

```Shell
composer require samuelreichor/craft-query-api && php craft plugin/install craft-query-api
```

--------------------------------

### Install Craft Plugin via Composer (Standard PHP)

Source: https://samuelreichor.at/llms-full.txt

This bash command sequence provides instructions for installing a Craft CMS plugin using Composer in a standard PHP environment. It first adds the `samuelreichor/craft-quick-edit` package as a dependency and then runs the Craft CMS command to complete the plugin installation.

```bash
composer require samuelreichor/craft-quick-edit &&
php craft plugin/install quick-edit
```

--------------------------------

### JavaScript Example for siteMap Configuration

Source: https://samuelreichor.at/libraries/query-api-react/get-started/configuration

Provides a practical example of how to configure the `siteMap` option in JavaScript. It demonstrates defining an array of `CraftSite` objects, showing entries for both English ('en') and German ('de') sites with their respective properties.

```JavaScript
siteMap: [   {    handle: 'en',    path: '/',    origin: 'http://localhost:3000',    id: 1,  },  {    handle: 'de',    path: '/de',    origin: 'http://localhost:3000/de',    id: 2,  }, ]
```

--------------------------------

### Query API React Library Structure and Modules

Source: https://samuelreichor.at/libraries/query-api-react

This section outlines the modular structure of the `@query-api/react` library. It categorizes documentation into 'Get Started' for initial setup, 'Functions' for core utility methods like `createCraftUrl` and `getCraftInstance`, and 'Components' for React components such as `CraftPage` and `CraftArea`. Each category provides links to detailed documentation.

```APIDOC
Library: @query-api/react

Modules:
- Get Started
  - Introduction
  - Quick Start
  - Configuration

- Functions
  - createCraftUrl
  - getCraftInstance
  - getCraftContentMapping

- Components
  - CraftPage
  - CraftArea
  - CraftNotImplemented
```

--------------------------------

### Install Craft Loanwords Plugin using Composer with PHP

Source: https://samuelreichor.at/libraries/craft-loanwords/get-started/installation

This command installs the Craft Loanwords plugin using Composer in a standard PHP environment and subsequently activates it within Craft CMS.

```Shell
composer require samuelreichor/craft-loanwords && php craft plugin/install loanwords
```

--------------------------------

### Install Craft Query API Plugin with Composer (PHP CLI)

Source: https://samuelreichor.at/llms-full.txt

Installs the Craft Query API plugin using Composer via the PHP CLI, followed by activating the plugin through the Craft CLI.

```bash
composer require samuelreichor/craft-query-api &&
php craft plugin/install craft-query-api
```

--------------------------------

### Install Vue Craft CMS Query API Package

Source: https://samuelreichor.at/llms-full.txt

Instructions to install the `@query-api/vue` package using npm.

```bash
npm install @query-api/vue
```

--------------------------------

### Install @query-api/vue npm package

Source: https://samuelreichor.at/libraries/vue-craftcms/get-started/install

Use npm to install the `@query-api/vue` package, which provides Vue 3 integration for the Craft Query API.

```bash
npm install @query-api/vue
```

--------------------------------

### Install Craft Query API Plugin with Composer (DDEV)

Source: https://samuelreichor.at/llms-full.txt

Installs the Craft Query API plugin using Composer within a DDEV environment, followed by activating the plugin via the Craft CLI.

```bash
ddev composer require samuelreichor/craft-query-api &&
ddev craft plugin/install craft-query-api
```

--------------------------------

### Query Craft CMS Element Types using useCraftQuery and Shorthands

Source: https://samuelreichor.at/llms-full.txt

This Vue `<script setup>` example illustrates how to fetch different Craft CMS element types like addresses, assets, entries, and users. It shows both the generic `useCraftQuery` approach and the convenient shorthand composables (e.g., `useCraftAddress`, `useCraftEntry`) for simplified data retrieval. The `one()` method is used to fetch a single instance of each element type.

```vue
<script setup lang="ts">
  // query addresses
  const { data, error } = await useCraftQuery('addresses').one()
  // or use the shorthand
  const { data, error } = await useCraftAddress().one()

  // query assets
  const { data, error } = await useCraftQuery('assets').one()
  // or use the shorthand
  const { data, error } = await useCraftAsset().one()

  // query entry
  const { data, error } = await useCraftQuery('entries').one()
  // or use the shorthand
  const { data, error } = await useCraftEntry().one()

  // query users
  const { data, error } = await useCraftQuery('users').one()
  // or use the shorthand
  const { data, error } = await useCraftUser().one()
</script>
```

--------------------------------

### Install @query-api/js via npm

Source: https://samuelreichor.at/llms-full.txt

Instructions to install the @query-api/js library using npm, a package manager for JavaScript.

```bash
npm install @query-api/js
```

--------------------------------

### Install Craft Loanwords Plugin using Composer with ddev

Source: https://samuelreichor.at/libraries/craft-loanwords/get-started/installation

This command facilitates the installation of the Craft Loanwords plugin via Composer within a ddev development environment, followed by its activation in Craft CMS.

```Shell
ddev composer require samuelreichor/craft-loanwords && ddev craft plugin/install loanwords
```

--------------------------------

### Install Craft Plugin via Composer with ddev

Source: https://samuelreichor.at/llms-full.txt

This bash command sequence illustrates how to install a Craft CMS plugin using Composer within a ddev development environment. It first adds the `samuelreichor/craft-quick-edit` package as a dependency and then executes the Craft CMS command to install and enable the plugin.

```bash
ddev composer require samuelreichor/craft-quick-edit &&
ddev craft plugin/install quick-edit
```

--------------------------------

### Query API Project Structure and Modules Overview

Source: https://samuelreichor.at/libraries/vue-craftcms/usage/example

This section outlines the structure and available modules for the Query API project, including various framework-specific packages (Nuxt, Vue, React, JS) and documentation links for getting started, usage, composables, and components. It serves as an API reference for the project's offerings and navigation.

```APIDOC
Project Modules:
  - @query-api/nuxt
  - @query-api/vue
  - @query-api/react
  - @query-api/js

Documentation Sections:
  - Get Started:
    - Introduction: /libraries/vue-craftcms/get-started/introduction
    - Installation: /libraries/vue-craftcms/get-started/install
  - Usage:
    - Basic Usage: /libraries/vue-craftcms/usage/basic-usage
    - Build Query URLs: /libraries/vue-craftcms/usage/build-query-urls
    - Connect Components: /libraries/vue-craftcms/usage/connect-components
    - Example: /libraries/vue-craftcms/usage/example
  - Composables:
    - useCraftUrlBuilder: /libraries/vue-craftcms/composables/use-craft-url-builder
    - useCraft: /libraries/vue-craftcms/composables/use-craft
  - Components:
    - CraftPage: /libraries/vue-craftcms/components/craft-page
    - CraftArea: /libraries/vue-craftcms/components/craft-area
    - CraftNotImplemented: /libraries/vue-craftcms/components/craft-not-implemented
```

--------------------------------

### Install @query-api/js JavaScript SDK

Source: https://samuelreichor.at/libraries/js-craftcms-api/install

Use this npm command to install the @query-api/js package. Ensure Node.js version 20+ is installed and the Craft Query API plugin is configured in your Craft CMS project.

```bash
npm install @query-api/js
```

--------------------------------

### Install Craft CMS Plugin via Composer

Source: https://samuelreichor.at/llms-full.txt

These bash commands provide instructions for installing a Craft CMS plugin named 'loanwords' using Composer. It includes commands for both ddev and standard php environments, demonstrating how to require the package and install the plugin.

```bash
ddev composer require samuelreichor/craft-loanwords &&
ddev craft plugin/install loanwords
```

```bash
composer require samuelreichor/craft-loanwords &&
php craft plugin/install loanwords
```

--------------------------------

### Install @query-api/react Package (npm)

Source: https://samuelreichor.at/llms-full.txt

This command installs the @query-api/react package using npm, making the React query builder available for use in your project. It's the essential first step to integrate the library into your React application.

```bash
npm install @query-api/react
```

--------------------------------

### Install Nuxt Craft CMS Module

Source: https://samuelreichor.at/llms-full.txt

This command installs the `@query-api/nuxt` module into your Nuxt project using `npx nuxi module add`, making it available for configuration and use.

```bash
npx nuxi module add @query-api/nuxt
```

--------------------------------

### Nuxt Runtime Configuration Object Example

Source: https://samuelreichor.at/libraries/vue-craftcms/components/craft-area

An example of the `window.__NUXT__.config` object, illustrating public configuration settings for a Nuxt application. This includes content settings, Markdown component configurations, SEO utility options, and application-specific base URLs and build identifiers.

```JavaScript
window.__NUXT__={
  "state":1,
  "once":16,
  "_errors":17,
  "serverRendered":5,
  "path":19,
  "prerenderedAt":20
},
["Reactive",2],
{
  "$scolor-mode":3,
  "$snuxt-seo-utils:routeRules":7,
  "$ssite-config":8
},
{
  "preference":4,
  "value":4,
  "unknown":5,
  "forced":6
},
"system",
true,
false,
{
  "head":-1,
  "seoMeta":-1
},
{
  "_priority":9,
  "env":13,
  "name":14,
  "trailingSlash":6,
  "url":15
},
{
  "name":10,
  "env":11,
  "url":12,
  "trailingSlash":10
},
-3,
-15,
0,
"production",
"samuelreichor",
"https://samuelreichor.at",
["Set"],
["ShallowReactive",18],
{
  "navigation":-1,
  "/libraries/vue-craftcms/components/craft-area-surround":-1,
  "/libraries/vue-craftcms/components/craft-area":-1
},
"/libraries/vue-craftcms/components/craft-area",
1751228998974
];
window.__NUXT__.config={
  "public":{
    "content":{
      "wsUrl":""
    },
    "mdc":{
      "components":{
        "prose":true,
        "map":{}
      },
      "headings":{
        "anchorLinks":{
          "h1":false,
          "h2":true,
          "h3":true,
          "h4":true,
          "h5":false,
          "h6":false
        }
      }
    },
    "seo-utils":{
      "canonicalQueryWhitelist":[
        "page",
        "sort",
        "filter",
        "search",
        "q",
        "category",
        "tag"
      ],
      "canonicalLowercase":true
    }
  },
  "app":{
    "baseURL":"/",
    "buildId":"9db2c648-cff9-42d1-88bd-e4dcf890f9f6",
    "buildAssetsDir":"/_nuxt/",
    "cdnURL":""
  }
}
```

--------------------------------

### Nuxt.js Craft CMS Configuration and `useCraftUri` Example

Source: https://samuelreichor.at/libraries/nuxt-craftcms/composables/use-craft-uri

This example illustrates the `nuxt.config.ts` setup for Craft CMS with `siteDetectionMode: 'origin'` and a `siteMap`. It then shows how to use the `useCraftUri()` composable to get the current URI, demonstrating the expected output.

```JavaScript
// Url: https://en-site.ddev.site/happy-trying
//
// Nuxt Config:
//  craftcms: {
//    baseUrl: 'https://cms.ddev.site',
//    authToken: 'xxxx',
//    siteDetectionMode: 'origin',
//    siteMap: [
//      {
//        handle: 'en',
//        origin: 'https://en-site.ddev.site',
//        path: '/',
//      },
//      {
//        handle: 'en',
//        origin: 'https://de-site.ddev.site',
//        path: '/',
//      }
//    ],
//  },
const uri = useCraftUri();
// uri.value will result in: "happy-trying"
```

--------------------------------

### API Documentation for @query-api/vue Library

Source: https://samuelreichor.at/libraries/vue-craftcms/components/craft-page

This section outlines the structure and available modules of the `@query-api/vue` library, including its getting started guide, usage patterns, composables, and components. It serves as a high-level API reference for developers using the library.

```APIDOC
@query-api/vue Library API:
- Get Started:
  - Introduction: /libraries/vue-craftcms/get-started/introduction
  - Installation: /libraries/vue-craftcms/get-started/install
- Usage:
  - Basic Usage: /libraries/vue-craftcms/usage/basic-usage
  - Build Query URLs: /libraries/vue-craftcms/usage/build-query-urls
  - Connect Components: /libraries/vue-craftcms/usage/connect-components
  - Example: /libraries/vue-craftcms/usage/example
- Composables:
  - useCraftUrlBuilder: /libraries/vue-craftcms/composables/use-craft-url-builder
  - useCraft: /libraries/vue-craftcms/composables/use-craft
- Components:
  - CraftPage: /libraries/vue-craftcms/components/craft-page
  - CraftArea: /libraries/vue-craftcms/components/craft-area
  - CraftNotImplemented: /libraries/vue-craftcms/components/craft-not-implemented
```

--------------------------------

### Craft Query API Documentation Structure

Source: https://samuelreichor.at/libraries/craft-query-api/events/add-custom-ts-types

This section outlines the hierarchical structure of the Craft Query API documentation, covering 'Get Started' guides, 'Integrations' with other plugins, 'Usage' patterns, available 'Endpoints', and 'Events' for custom extensions.

```APIDOC
Craft Query API Documentation:
  Get Started:
    - Introduction (/libraries/craft-query-api/get-started/introduction)
    - Installation (/libraries/craft-query-api/get-started/install)
    - Configuration (/libraries/craft-query-api/get-started/configuration)
  Integrations:
    - ImagerX (/libraries/craft-query-api/integrations/imager-x)
    - SEOmatic (/libraries/craft-query-api/integrations/seo-matic)
  Usage:
    - Usage (/libraries/craft-query-api/usage/usage)
    - Caching (/libraries/craft-query-api/usage/caching)
    - Settings (/libraries/craft-query-api/usage/settings)
    - Commands (/libraries/craft-query-api/usage/commands)
  Endpoints:
    - customQuery (/libraries/craft-query-api/endpoints/custom-query)
    - allRoutes (/libraries/craft-query-api/endpoints/all-routes)
  Events:
    - Custom Transformers (/libraries/craft-query-api/events/add-custom-transformer)
    - Custom Element Types (/libraries/craft-query-api/events/add-custom-element-type)
    - Custom Typescript Types (/libraries/craft-query-api/events/add-custom-ts-types)
```

--------------------------------

### craftInit Function API Reference

Source: https://samuelreichor.at/libraries/query-api-react/get-started/configuration

Detailed API documentation for the `craftInit` function, including all available configuration parameters, their types, default values, and examples.

```APIDOC
craftInit(options: object): void

Options:
  baseUrl: string
    Description: The base URL of your Craft CMS backend.
    Example: 'https://your-craft-backend.ddev.site'

  authToken: string
    Description: The authentication token for accessing the Craft CMS API.
    Example: 'Bearer asdfasdfasdfasdfasdfasdf'

  contentMapping: object
    Description: Connects Craft CMS sections and entry types to React components.
    Default: { pages: {}, components: {} }
    Structure:
      pages: object
        Description: Maps sectionHandle:entryTypeHandle to React page components.
        Example:
          home: Home // Maps section home entry with entry type home to the Home component.
          'news:home': News // Maps section news entry with entry type home to the News component.
      components: object
        Description: Maps entry types to React components (e.g., for matrix blocks).
        Example:
          headline: Headline // Entry type headline will be rendered with the Headline component.
          imageText: CraftNotImplemented
    Special Keys for Error Pages:
      page404: React.Component (for 404 Not Found pages)
      page500: React.Component (for 500 Internal Server Error pages)
      error: React.Component (for general error pages)

  debug: boolean
    Description: Enable debug mode to log additional information to the console.
    Default: false
    Example: true

  enableEntryTypeMapping: boolean
    Description: Enable or disable entry type mapping. If set to false, contentMapping will only use the section handle for pages.
    Default: true
    Example: false

  siteDetectionMode: 'path' | 'origin'
    Description: Controls how the site is identified in a multi-site Craft CMS setup.
    Default: 'path'
    Example: 'origin'
```

--------------------------------

### Craft Query API React Library Documentation

Source: https://samuelreichor.at/libraries/query-api-react/functions/create-craft-url

This section outlines the structure and available functionalities of the @query-api/react library. It covers getting started guides, configuration options, core functions like createCraftUrl, getCraftInstance, and getCraftContentMapping, as well as UI components such as CraftPage, CraftArea, and CraftNotImplemented.

```APIDOC
@query-api/react Library:
  Overview:
    - Get Started:
      - Introduction
      - Quick Start
      - Configuration
  Functions:
    - createCraftUrl()
    - getCraftInstance()
    - getCraftContentMapping()
  Components:
    - CraftPage
    - CraftArea
    - CraftNotImplemented
```

--------------------------------

### Example GET Request with customQuery API using cURL

Source: https://samuelreichor.at/libraries/craft-query-api/endpoints/custom-query

Demonstrates how to make an authenticated GET request to the `customQuery` endpoint using cURL, including query parameters for element type and section.

```curl
curl --request GET \
   --url 'https://your-site.ddev.site/v1/api/queryApi/customQuery?elementType=entries&section=home&one=1' \
  --header 'authorization: Bearer your-access-token'
```

--------------------------------

### Example: Querying customQuery Endpoint with Curl

Source: https://samuelreichor.at/llms-full.txt

Demonstrates how to make a GET request to the `customQuery` endpoint using `curl`. This example includes passing query parameters for `elementType` and `section`, and an authorization bearer token for authenticated access.

```bash
curl --request GET \
  --url 'https://your-site.ddev.site/v1/api/queryApi/customQuery?elementType=entries&section=home&one=1' \
  --header 'authorization: Bearer your-access-token'
```

--------------------------------

### Clone Craft Nuxt Starter Repository

Source: https://samuelreichor.at/llms-full.txt

Command to clone the craft-nuxt-starter monorepo from GitHub, providing a complete Craft CMS and Nuxt.js setup for local testing and development.

```bash
git clone git@github.com:samuelreichor/craft-nuxt-starter.git
```

--------------------------------

### craftInit Function API Reference

Source: https://samuelreichor.at/llms-full.txt

Detailed API documentation for the `craftInit` function, which initializes the Query API client. It outlines all available configuration options, their types, default values, and examples for integrating Craft CMS with React applications.

```APIDOC
craftInit(options: object): void

Options:
  baseUrl: string
    Description: The base URL of your Craft CMS backend.
    Example: 'https://your-craft-backend.ddev.site'

  authToken: string
    Description: The authentication token for accessing the Craft CMS API (Bearer token).
    Example: 'Bearer asdfasdfasdfasdfasdfasdf'

  contentMapping: object
    Description: Connects Craft CMS sections and entry types to React components.
    Default: { pages: {}, components: {} }
    Structure:
      pages: object
        Description: Maps sectionHandle:entryTypeHandle to React page components.
        Example:
          home: Home
          'news:home': News
        Special Keys:
          page404: Component (for 404 Not Found)
          page500: Component (for 500 Internal Server Error)
          error: Component (for general errors)
      components: object
        Description: Maps entry types to React components (e.g., for matrix blocks).
        Example:
          headline: Headline
          imageText: CraftNotImplemented
    Note: To disable sectionHandle:entryTypeHandle mapping, set enableEntryTypeMapping: false.

  debug: boolean
    Description: Enable debug mode to log additional information to the console.
    Default: false
    Example: true

  enableEntryTypeMapping: boolean
    Description: Enable or disable entry type mapping for contentMapping.pages.
    Default: true
    Example: false

  siteDetectionMode: 'path' | 'origin'
    Description: Controls how the site is identified in a multi-site Craft CMS setup.
    Default: 'path'
    Example: 'origin'
```

--------------------------------

### Retrieve All Active Routes API Endpoint - Basic Usage

Source: https://samuelreichor.at/llms-full.txt

Explains how to use the `allRoutes` endpoint to fetch all active routes for a specified `siteId` or all sites. Provides a `curl` example for a GET request with an authorization header.

```bash
curl --request GET \
  --url 'https://your-site.ddev.site/v1/api/queryApi/allRoutes' \
  --header 'authorization: Bearer your-access-token'
```

--------------------------------

### Example Nuxt Module Configuration with Site Map

Source: https://samuelreichor.at/libraries/nuxt-craftcms/get-started/install

This example provides a complete `craftcms` configuration within `nuxt.config.ts`, showcasing real-world usage with `baseUrl`, `authToken`, and a detailed `siteMap` array for multisite support. It illustrates how to define multiple sites with their respective handles, origins, and paths.

```TypeScript
export default defineNuxtConfig({
  craftcms: {
    baseUrl: 'https://example.ddev.site',
    authToken: 'owiwrtgnfsjhsadgsdagf',
    siteMap: [
      {
        handle: 'en',
        origin: 'http://localhost:3000',
        path: '/',
        id: 1,
        lang: 'en',
        label: 'En'
      },
      {
        handle: 'de',
        origin: 'http://localhost:3000/de',
        path: '/de',
        id: 2,
        lang: 'de',
        label: 'De'
      }
    ]
  }
});
```

--------------------------------

### Craft Query API and Craft Loanwords Library References

Source: https://samuelreichor.at/libraries/craft-loanwords

This section outlines the available modules and documentation structure for the Craft Query API and Craft Loanwords libraries. It lists various framework-specific integrations and provides links to installation, usage, and configuration guides.

```APIDOC
Craft Query API
  @query-api/nuxt
  @query-api/vue
  @query-api/react
  @query-api/js
Craft Loanwords
  Get Started
    Installation: /libraries/craft-loanwords/get-started/installation
    Usage: /libraries/craft-loanwords/get-started/usage
  Configuration
    Config: /libraries/craft-loanwords/configuration/config
```

--------------------------------

### Craft Query API Documentation Structure

Source: https://samuelreichor.at/libraries/craft-query-api/events/add-custom-transformer

This section outlines the hierarchical structure of the Craft Query API documentation, detailing its main categories such as Get Started, Integrations, Usage, Endpoints, and Events, along with their respective sub-sections and specific API references.

```APIDOC
Craft Query API
  Get Started
    Introduction
    Installation
    Configuration
  Integrations
    ImagerX
    SEOmatic
  Usage
    Usage
    Caching
    Settings
    Commands
  Endpoints
    customQuery
    allRoutes
  Events
    Custom Transformers
    Custom Element Types
    Custom Typescript Types
```

--------------------------------

### Render Craft CMS Matrix Blocks with CraftArea

Source: https://samuelreichor.at/libraries/query-api-react/get-started/quick-start

This `Home.tsx` component shows how to render dynamic content, specifically matrix blocks, from Craft CMS using the `CraftArea` component. It takes `CraftPageHome` props, displays the page title, and then uses `CraftArea` to dynamically render React components based on the `contentBuilder` matrix block data.

```typescript
import type { CraftPageHome } from '../../types'

export default function Home(props: CraftPageHome) {
  return (
    <div>
      <h1>{props.title}</h1>
      <CraftArea content={props.contentBuilder} />
    </div>
  )
}
```

--------------------------------

### Craft Query API Documentation Structure

Source: https://samuelreichor.at/libraries/craft-query-api/events/add-custom-element-type

This section outlines the documentation structure for the Craft Query API and related libraries. It details various modules like 'Get Started', 'Integrations', 'Usage', 'Endpoints', and 'Events', providing a hierarchical view of the available documentation topics.

```APIDOC
Craft Query API:
  - Get Started:
    - Introduction
    - Installation
    - Configuration
  - Integrations:
    - ImagerX
    - SEOmatic
  - Usage:
    - Usage
    - Caching
    - Settings
    - Commands
  - Endpoints:
    - customQuery
    - allRoutes
  - Events:
    - Custom Transformers
    - Custom Element Types
    - Custom Typescript Types
```

--------------------------------

### Configure CORS Origins in Craft CMS (app.web.php)

Source: https://samuelreichor.at/llms-full.txt

Configures Cross-Origin Resource Sharing (CORS) settings in Craft CMS's `config/app.web.php` file. This example allows GET requests from `http://localhost:3000` and sets various CORS headers to prevent cross-origin errors in frontend applications.

```php
<?php

  return [
      'as corsFilter' => [
          'class' => \craft\filters\Cors::class,

          // Add your origins here
          'cors' => [
              'Origin' => [
                  'http://localhost:3000',
              ],
              'Access-Control-Request-Method' => ['GET'],
              'Access-Control-Request-Headers' => ['*'],
              'Access-Control-Allow-Credentials' => true,
              'Access-Control-Max-Age' => 86400,
              'Access-Control-Expose-Headers' => [],
          ],
      ],
  ];
```

--------------------------------

### Craft Query API Documentation Navigation Overview

Source: https://samuelreichor.at/libraries/vue-craftcms/composables/use-craft-url-builder

Presents the hierarchical structure of the Craft Query API documentation, detailing sections for getting started, various usage patterns, available composables (like `useCraftUrlBuilder`), and components (like `CraftPage`) for integrating with Craft CMS in Vue.js applications.

```APIDOC
Craft Query API
- Get Started
	- Introduction
	- Installation
- Usage
	- Basic Usage
	- Build Query URLs
	- Connect Components
	- Example
- Composables
	- useCraftUrlBuilder
	- useCraft
- Components
	- CraftPage
	- CraftArea
	- CraftNotImplemented
```

--------------------------------

### Craft Query API Documentation Navigation Structure

Source: https://samuelreichor.at/libraries/craft-query-api/integrations/seo-matic

This outlines the main sections and sub-sections of the Craft Query API documentation. It provides a clear roadmap for users to navigate through topics such as getting started, integrations with other plugins, general usage, available API endpoints, and custom event hooks for extending functionality.

```APIDOC
Craft Query API:
  Get Started:
    - Introduction
    - Installation
    - Configuration
  Integrations:
    - ImagerX
    - SEOmatic
  Usage:
    - Usage
    - Caching
    - Settings
    - Commands
  Endpoints:
    - customQuery
    - allRoutes
  Events:
    - Custom Transformers
    - Custom Element Types
    - Custom Typescript Types
```

--------------------------------

### Fetch Standalone Data from Craft CMS API

Source: https://samuelreichor.at/libraries/query-api-react/get-started/quick-start

This `Home.tsx` component demonstrates fetching additional data directly from the Craft CMS API using the `useCraftFetch` hook, independent of the main page content. It queries for news articles, displays them alongside the main page content, and handles loading and error states.

```typescript
import type { CraftPageHome } from '../../types'
import { CraftArea, getCraftInstance, createCraftUrl } from '@query-api/react'
import { useCraftFetch } from '../composables/useCraftFetch'

export default function Home(props: CraftPageHome) {
  const {authToken} = getCraftInstance()
  const url = createCraftUrl('entries').section('news').limit(3).fields(['title']).buildUrl('all')
  const {data: news, loading, error} = useCraftFetch<CraftPageHome[]>(url, authToken)

  if (error) {
    console.error(error)
  }

  return (
    <div>
      <h1>{props.title}</h1>
      <CraftArea content={props.contentBuilder} />

      <h2>Related News</h2>
      {!loading && news && (
        <ul>
          {news.map((item, idx) => (
            <li key={idx}>
              <a href={item.metadata.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}
```

--------------------------------

### Configuring Path-Based Site Detection with useCraftCurrentSite

Source: https://samuelreichor.at/libraries/nuxt-craftcms/composables/use-craft-current-site

Illustrates how to configure `siteDetectionMode` to 'path' within `nuxt.config.ts` for Craft CMS integration. This setup allows `useCraftCurrentSite` to accurately identify the current site based on the URL path, as shown with a `/de` example, providing robust multisite support.

```JavaScript
// Url: http://localhost:3000/de/happy-trying
//
// Nuxt Config:
//  craftcms: {
//    baseUrl: 'https://cms.ddev.site',
//    authToken: 'xxxx',
//    siteDetectionMode: 'path',
//    siteMap: [
//      {
//        handle: 'en',
//        origin: 'http://localhost:3000',
//        path: '/',
//      },
//      {
//        handle: 'de',
//        origin: 'http://localhost:3000',
//        path: '/de',
//      }
//    ],
//  },
const currentSite = useCraftCurrentSite();
// currentSite.value will be:
//  {
//    handle: 'de',
//    origin: 'http://localhost:3000',
//    path: '/de',
//  }
```

--------------------------------

### Craft Query API Documentation Structure

Source: https://samuelreichor.at/libraries/craft-query-api/usage/usage

Outlines the main sections and endpoints for the Craft Query API, including installation, configuration, integrations (ImagerX, SEOmatic), usage patterns (caching, settings, commands), and specific API endpoints (customQuery, allRoutes), along with event hooks for custom transformers, element types, and TypeScript types.

```APIDOC
Craft Query API
├── Get Started
│   ├── Introduction
│   ├── Installation
│   └── Configuration
├── Integrations
│   ├── ImagerX
│   └── SEOmatic
├── Usage
│   ├── Usage
│   ├── Caching
│   ├── Settings
│   └── Commands
├── Endpoints
│   ├── customQuery
│   └── allRoutes
└── Events
    ├── Custom Transformers
    ├── Custom Element Types
    └── Custom Typescript Types
```

--------------------------------

### Implement Nuxt Color Mode Switching and Storage Utilities

Source: https://samuelreichor.at/libraries/craft-loanwords/get-started/installation

This JavaScript code provides a client-side solution for managing color themes in a Nuxt application, supporting 'dark', 'light', and 'system' preferences. It includes functions to get, add, and remove color schemes from the document's root element, and utility functions to retrieve values from `localStorage`, `sessionStorage`, or cookies.

```javascript
"use strict";(()=>{const t=window,e=document.documentElement,c=\["dark","light"\],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t\["__NUXT_COLOR_MODE__"\]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}
```

--------------------------------

### Vue CraftCMS Library API Reference and Structure

Source: https://samuelreichor.at/libraries/vue-craftcms

This section outlines the API for the Vue CraftCMS library, detailing its modular structure, usage patterns, and available composables and components. It provides a hierarchical overview of how to get started, build query URLs, connect components, and utilize specific features like `useCraftUrlBuilder`, `useCraft`, `CraftPage`, `CraftArea`, and `CraftNotImplemented`.

```APIDOC
Vue CraftCMS Library API:
  Get Started:
    - Introduction
    - Installation
  Usage:
    - Basic Usage
    - Build Query URLs
    - Connect Components
    - Example
  Composables:
    - useCraftUrlBuilder
    - useCraft
  Components:
    - CraftPage
    - CraftArea
    - CraftNotImplemented
```

--------------------------------

### Build Craft Query API URL with TypeScript

Source: https://samuelreichor.at/llms-full.txt

This TypeScript example demonstrates how to use the @query-api/js library to construct a URL for querying Craft CMS data. It shows how to specify the element type, ID, status, and site ID, and then build the base URL for a single entry. This simplifies API request generation for headless Craft CMS setups.

```typescript
import { buildCraftQueryUrl } from '@query-api/js';

// Build URL for fetching a single address
const url = buildCraftQueryUrl('entries')
  .id(1)
  .status('active')
  .siteId(1)
  .buildBaseUrl('one');
// Result: /v1/api/queryApi/customQuery?elementType=addresses&id=1&status=active&siteId=1&one=1
```

--------------------------------

### Integrating CraftNotImplemented in craftInit Configuration

Source: https://samuelreichor.at/llms-full.txt

This example demonstrates how to configure "CraftNotImplemented" within the "craftInit" function's "contentMapping". It serves as a placeholder for "pages" or "components" that haven't been implemented yet, providing a visual indicator and raw data for debugging purposes.

```ts
import { craftInit, CraftNotImplemented } from '@query-api/react'

craftInit({
  ...otherConfig,
  contentMapping: {
    pages: {
      home: CraftNotImplemented,
    },
    components: {
      imageText: CraftNotImplemented,
    },
  },
})
```