### Initialize nuxt-typo3 Project

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/README.md

Use this command to initialize a new Nuxt project with the required nuxt-typo3 setup. Ensure you have nuxi installed.

```bash
npx nuxi@latest init -t gh:TYPO3-Headless/nuxt-typo3-starter <project-name>
```

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

### Start Development Server

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/README.md

Starts the development server for local development and testing.

```bash
yarn dev
```

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

### Fetching Initial Data with useT3Api

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Api.md

Example of using the useT3Api composable to access initial data, specifically the navigation, within a Vue component's setup script.

```vue
<script setup lang="ts">
const { initialData } = useT3Api()
const navigation = computed(() => {
  return initialData.value?.navigation
})
</script>

```

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

### Using useT3Meta with useHead

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Meta.md

Example of how to use the useT3Meta composable within a Nuxt setup script to retrieve head data and apply it to the page's head using useHead.

```vue
<script setup lang="ts">
const { headData } = useT3Meta()
useHead(headData)
</script>

```

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

### Install Dependencies

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/README.md

Installs the necessary project dependencies using Yarn.

```bash
yarn install
```

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

### Setting Up API Interceptors

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/5.API-interceptors.md

Configure global interceptors for API requests using `setOption` within a Nuxt plugin. This example demonstrates setting up all four of `ofetch`'s interceptors: `onRequest`, `onRequestError`, `onResponse`, and `onResponseError`. Ensure this setup is done only once to avoid overriding previous configurations.

```typescript
export default defineNuxtPlugin(() => {
  const { setOption } = useT3Api()

  setOption('onRequest', (context) => {
    console.log('on request: ', context)
  })

  setOption('onRequestError', (context) => {
    console.log('on request error: ', context)
  })

  setOption('onResponse', (context) => {
    console.log('on response: ', context)
  })

  setOption('onResponseError', (context) => {
    console.log('on response error: ', context)
  })
})
```

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

### Backend Layout Configuration Example

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/1.layouts.md

Example of a backend layout configuration within the appearance settings. This defines which layout and backend layout to use for rendering page content.

```json
...
  "appearance": {
    "layout": "layout-1",
    "backendLayout": "singlecolumn"
  },
...
```

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

### Page Component Example

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Page.md

Example of how to use the `useT3Page` composable within a Nuxt 3 page component to render content based on fetched page data.

```APIDOC
## Example Usage

Create your own page layout.
Create/edit `pages/[...slug].vue`

```vue [pages/[...slug].vue]
<template>
  <T3BackendLayout
    v-if="pageData?.content"
    :name="backendLayout"
    :content="pageData.content"
  />
</template>

<script setup lang="ts">
const { headData, pageData, backendLayout } = await useT3Page()
useHead(headData)
</script>
```

::alert{type="warning"}
Please be aware that `await useT3Page()` is responsible for fetching the current page data. If you use it in multiple places, it may lead to unexpeceted API call. To avoid this, you can either use await `useT3Page({fetchOnInit: false})` to prevent fetching on initialization, or alternatively use [useT3Api](./useT3Api.md).
::
```

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

### Render Dynamic Backend Layout

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

Example of using useT3DynamicBl (presumably related to useT3DynamicComponent) to render a backend layout.

```APIDOC
## Render Dynamic Backend Layout

### Description
This example shows how to render a backend layout dynamically using a composable, likely `useT3DynamicComponent` or a related function like `useT3DynamicBl`.

### Usage
```vue
<template>
  <component :is="useT3DynamicBl(pageData.value.appearance.backendLayout)" />
</template>
```
```

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

### Install @nuxtjs/i18n

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/6.useNuxtI18n.md

Add the @nuxtjs/i18n dependency to your project using NPM, Yarn, or pnpm.

```bash
npm install @nuxtjs/i18n@next --save-dev
```

```bash
yarn add --dev @nuxtjs/i18n@next
```

```bash
pnpm add @nuxtjs/i18n@next --save-dev
```

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

### Install nuxt-typo3-forms Module

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/10.forms.md

Install the nuxt-typo3-forms module using npm, yarn, or pnpm. For yarn and pnpm, ensure your .npmrc is configured to access the private package registry.

```bash
npm install @t3headless/nuxt-typo3-forms
```

```bash
echo //git.macopedia.pl/api/v4/projects/892/packages/npm/:_authToken=${NPM_TOKEN} >> .npmrc
yarn add @t3headless/nuxt-typo3-forms
```

```bash
echo //git.macopedia.pl/api/v4/projects/892/packages/npm/:_authToken=${NPM_TOKEN} >> .npmrc
pnpm i @t3headless/nuxt-typo3-forms
```

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

### Accessing Options with useT3Options in Vue

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Options.md

Demonstrates how to use the useT3Options composable within a Vue component's script setup to access module options like API and i18n configurations.

```vue
<script lang="ts" setup>
const { options } = useT3Options()
const { api, i18n } = options
</script>
```

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

### Install nuxt-typo3 Module

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/README.md

Add the nuxt-typo3 dev dependency to your project and configure it in your Nuxt configuration file. Specify the API base URL for your TYPO3 instance.

```bash
npx nuxi@latest module add typo3
```

```typescript
export default defineNuxtConfig({
  modules: ['@t3headless/nuxt-typo3'],
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com'
    }
  }
})
```

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

### Creating a Custom Page Layout with useT3Page

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Page.md

Example of how to create a custom page layout in Nuxt TYPO3 using the useT3Page composable. This snippet demonstrates setting up the page component and integrating with T3BackendLayout.

```vue
<template>
  <T3BackendLayout
    v-if="pageData?.content"
    :name="backendLayout"
    :content="pageData.content"
  />
</template>

<script setup lang="ts">
const { headData, pageData, backendLayout } = await useT3Page()
useHead(headData)
</script>
```

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

### Render Dynamic Content Element

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

Example of using useT3DynamicComponent to render a dynamic content element within a Vue template.

```APIDOC
## Render Dynamic Content Element by type

### Description
This example demonstrates how to use the `useT3DynamicComponent` composable within a Vue template to render a content element dynamically based on its type.

### Usage
```vue
<template>
  <component
    :is="useT3DynamicComponent({
      type: element.type,
      prefix: 'T3Ce',
      mode: 'Lazy'
    })"
  />
</template>
```

### Alternative Usage
```vue
<template>
  <component :is="useT3DynamicCe(element.type)" />
</template>
```
```

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

### Custom Catch-all Route Page View Implementation

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/0.override-page.md

An example of a custom `[...slug].vue` page view. You can modify the template and script to implement your own presentation logic and access `pageData` for TYPO3 content.

```vue
<template>
  <NuxtLayout :name="frontendLayout">
    <!-- Your custom presentation here -->
    <T3BackendLayout
      v-if="pageData?.content"
      :name="backendLayout"
      :content="pageData.content"
    />
    <!-- Your custom presentation here -->
  </NuxtLayout>
</template>

<script setup lang="ts">
const { headData, pageData, backendLayout, frontendLayout } = await useT3Page()
useHead(headData);
definePageMeta({
  layout: false
})
// Your custom logic here
</script>
```

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

### useT3i18n API

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3I18n.md

Provides methods for internationalization, including getting and setting locales, initializing locale settings, and retrieving locale-specific data and URL paths.

```APIDOC
## useT3i18n

This composable provides methods to deal with internationalization.

### Methods

- **getLocale(path?: string): string**
  - Description: Get current locale code by path.
  - Parameters:
    - `path` (string) - Optional - The path to get the locale from.

- **setLocale(localeCode: string): void**
  - Description: Set new locale and update initialData.
  - Parameters:
    - `localeCode` (string) - Required - The new locale code to set.

- **initLocale(): void**
  - Description: Initialize locale (check if different than default).

- **currentLocale: Ref<string>**
  - Description: Return current locale state.

- **getCurrentLocaleData(): T3I18N | null**
  - Description: Get current locale object.
  - Returns: `T3I18N` object or `null`.

- **getPathWithLocale(path?: string): string**
  - Description: Return locale code for url path.
  - Parameters:
    - `path` (string) - Optional - The path to prepend the locale to.

### Example Usage
```vue
<script lang="ts" setup>
const { currentLocale } = useT3i18n()
</script>
```

::alert{type="warning"}
Please be aware, the `@t3headless/nuxt-typo3` is available as Early Access Program and API might change.
::
```

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

### Fetch and Compute Navigation Data

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/2.navigation.md

In `layouts/default.vue`, use the `useT3Api()` composable to get `initialData` and compute navigation links from the first site's children. Note that `navigation?.[0].children` may vary based on your API response structure.

```vue
<script setup lang="ts">
const { initialData } = useT3Api()
const navigation = computed(() => {
  return initialData.value?.navigation?.[0].children
})
</script>
```

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

### Accessing Current Locale with useT3i18n

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3I18n.md

Demonstrates how to import and use the useT3i18n composable within a Vue component's script setup to access the current locale state.

```vue
<script lang="ts" setup>
const { currentLocale } = useT3i18n()
</script>
```

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

### Example TYPO3 Content Element JSON Response

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/4.new-ce.md

This JSON structure represents a custom content element of type 'image_with_description' as it might be returned from the TYPO3 API.

```json
{
   "id":108,
   "type":"image_with_description",
   "colPos":0,
   "categories":"",
   "appearance":{
      "layout":"default",
      "frameClass":"default",
      "spaceBefore":"",
      "spaceAfter":""
   },
   "content":{
      "header":"What is Lorem Ipsum?",
      "headerLink":"https://www.lipsum.com/",
      "bodytext":"<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
      "assets":[
         {
            "publicUrl":"https://api.pwa-demo.ddev.site/fileadmin/introduction/images/typo3-book-backend-login.png",
            "properties":{
              // not relevant
            }
         }
      ]
   }
}
```

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

### T3Form Schema Example

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/10.forms.md

This JSON structure represents the schema for a form, defining fields, their types, validators, and other properties.

```json
{
      "elements": [
        {
          "value": "",
          "validators": [
            {
              "identifier": "email",
              "message": "You must enter a valid email address."
            },
            {
              "identifier": "required",
              "message": "This field is mandatory."
            }
          ],
          "type": "email",
          "identifier": "email",
          "label": "Email",
          "placeholder": "your email",
          "required": true,
          "name": "tx_form_formframework[email]"
        },
        {
          "value": "",
          "type": "text",
          "identifier": "name",
          "label": "Name",
          "description": "",
          "required": true,
          "validators": [
            {
              "identifier": "required",
              "message": "This field is mandatory."
            }
          ],
          "name": "tx_form_formframework[name]"
        },
        {
          "value": "+49",
          "type": "text",
          "identifier": "phone",
          "label": "Telephone",
          "placeholder": "00-000-000-000",
          "validators": [
            {
              "options": {
                "regex": "^[0-9-+]+$"
              },
              "identifier": "regex",
              "message": "You must enter a valid value. Please refer to the description of this field."
            }
          ],
          "name": "tx_form_formframework[phone]"
        }
      ]
}
```

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

### Display Page Data from Pinia Store

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/1.usePiniaStore.md

Create a Vue page component that accesses and displays page data from the Pinia store. It uses `useT3Page` to fetch head data and `useT3Store` to get page content.

```vue
<template>
  <T3BackendLayout
    v-if="pageData?.content"
    :name="backendLayout"
    :content="pageData.content"
  />
</template>
<script lang="ts" setup>
import { useT3Store } from '~/store/typo3'
const { headData, backendLayout } = await useT3Page()
useHead(headData)
const store = useT3Store()
// create local ref to avoid double rendering and state sharing between pages
const pageData = ref(store.pageData)
</script>
```

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

### Create Custom Error Page

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/9.error-handling.md

Add an 'error.vue' file to your project root to define a custom error page. This example shows a basic structure displaying the HTTP error status code.

```vue
<template>
  <NuxtLayout>
    <div class="container">
      <h1>{{ error.statusCode }}</h1>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { H3Error } from 'h3'
const props = defineProps({
  error: Object as () => H3Error
})
</script>
```

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

### Add Custom Validation Rule

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/10.forms.md

Define custom validation rules for form fields by passing them in the `options.rules` object when initializing `useT3CeFormFormframework`. This example shows the structure for a 'CustomRule'.

```typescript
// In the setup section of your component  
const options = {
  rules: {
    // Define your custom validation rules here
    CustomRule: (value: any) => {
      if (/* your custom validation logic */) {
        return true // Validation passed
      } else {
        return 'Custom validation failed' // Validation failed
      }
    }
    // Add other custom rules as needed
  }
}
// Then, when initializing T3FormFormFramework:  
const { elements, onSubmit, responseMessage, t3form } = useT3CeFormFormframework(props, t3form, options);
```

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

### Override T3CeBullets with Composable Functions

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/3.contentelement.md

Override the T3CeBullets content element by creating a custom Vue component. This example demonstrates using Nuxt's auto-import feature to leverage composable functions like useT3CeBullets for custom JavaScript logic.

```vue
<script lang="ts" setup>
import type { T3CeBulletsProps } from '@t3headless/nuxt-typo3';

const props = defineProps<T3CeBulletsProps>();
const { listTag, showBaseList } = useT3CeBullets(props);
</script>
```

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

### Initialize New nuxt-typo3 Project

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/0.index.md

Use this command to initialize a fresh Nuxt project with the nuxt-typo3 starter template. Choose between npx or pnpm for execution.

```bash
npx nuxi@latest init -t gh:TYPO3-Headless/nuxt-typo3-starter <project-name>
```

```bash
pnpm dlx nuxi@latest init -t gh:TYPO3-Headless/nuxt-typo3-starter <project-name>
```

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

### Initialize Nuxt Project

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/0.index.md

Use either npx or pnpm to create a new Nuxt project. Replace <project-name> with your desired project name.

```bash
npx nuxi init <project-name>
```

```bash
pnpm dlx nuxi init <project-name>
```

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

### Preview Static Build

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/README.md

Locally previews the generated static build to ensure it functions as expected before deployment.

```bash
yarn preview
```

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

### Generate for Static Deployment

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/README.md

Generates the static HTML files for deployment to static hosting providers. The output is placed in the .output/public directory.

```bash
yarn generate
```

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

### useT3Options

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Options.md

Provides access to module options, including site settings and current site options.

```APIDOC
## useT3Options

### Description
This composable provides access to configuration options for the nuxt-typo3 integration.

### Type Signature
```ts
export const useT3Options: () => {
  /**
   * Get all module options
   */
  options: T3Options
  /**
   * Get site settings
   */
  getSiteOptions: (domain?: string) => T3Site
  /**
   * Get current site options computed value
   */
  currentSiteOptions: ComputedRef<T3Site>
}
```

### Usage Example
```vue
<script lang="ts" setup>
const { options } = useT3Options()
const { api, i18n } = options
</script>
```

::alert{type="warning"}
Please be aware, the `@t3headless/nuxt-typo3` is available as Early Access Program and API might change.
::
```

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

### Build for Edge Side Rendering

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/README.md

Builds the application for deployment to serverless environments or Node.js compatible platforms.

```bash
yarn build
```

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

### Configure .npmrc for npm

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/join-eap/1.configuration.md

Set up your .npmrc file to use the private registry for @t3headless packages with npm. This ensures that nuxt-typo3 and related packages can be fetched correctly.

```bash
@t3headless:registry=https://git.macopedia.pl/api/v4/packages/npm/
//git.macopedia.pl/api/v4/packages/npm/:_authToken=${NPM_TOKEN}
```

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

### useT3Api Methods

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Api.md

This composable provides access to TYPO3 API data and client functionalities.

```APIDOC
## useT3Api

Provides methods to interact with the TYPO3 API Client.

### Methods

- **pageData**: `Ref<T3Page>` - Reactive reference to TYPO3 Page Data.
- **initialData**: `Ref<T3InitialData>` - Reactive reference to TYPO3 Initial Data.
- **$fetch**: `T3Api['$fetch']` - Sharable $fetch client for TYPO3 API.
- **getPage(path: string, options?: FetchOptions): Promise<T3Page>** - Fetches TYPO3 Page data for a given path.
- **getInitialData(path?: string, options?: FetchOptions): Promise<T3InitialData>** - Fetches TYPO3 Initial data for a given path.
- **setHeaders(headers: Record<string, string>): void** - Sets API headers.
- **setOptions<T extends keyof FetchOptions<'json'>>(key: T, value: FetchOptions<'json'>[T]): void** - Sets global options for the API client.
```

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

### useT3Page Function Signature

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Page.md

The `useT3Page` composable provides reactive page data, head data, and layout information. It can optionally fetch data on initialization.

```APIDOC
## useT3Page

### Description
Useful composable to recreate your own page file.

### Type Signature
```ts
const useT3Page: (options?: {
    route?: RouteLocationNormalized
    fetchOnInit?: boolean;
}) => Promise<{
    pageDataFallback: ComputedRef<T3Page | null>;
    pageData: Ref<T3Page | null>;
    getPageData: (path: string) => Promise<{ data: Ref<T3Page | null>; error: Ref<Error | null>; }>;
    headData: ComputedRef<ReactiveHead>
    backendLayout: string
    frontendLayout: string | undefined;
}>;
```
```

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

### Add New Form Field Type

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/10.forms.md

Create a new global component for custom form field types, extending the default T3FormField for consistent templating. This example shows how to add a checkbox field.

```vue
<template>
    <T3FormField
      class="t3-form-field-textarea"
      v-bind="props">
        <input type="checkbox" v-model="value" :name="name">
    </T3FormField>
</template>

<script setup lang="ts">
import { useField } from 'vee-validate'
import T3FormField from '#typo3/components/T3Form/T3FormField/T3FormField.vue'
import type { T3FormField as FieldType } from '../../../src/types'

const props = defineProps<FieldType>()
const { value } = useField<string>(() => props.name)
</script>
```

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

### Render Dynamic Backend Layout

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

Renders a dynamic backend layout component using a dedicated composable, likely useT3DynamicBl, based on page appearance data.

```vue
<template>
  <component :is="useT3DynamicBl(pageData.value.appearance.backendLayout)" />
</template>
```

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

### Default Layout Structure

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/2.navigation.md

Create a `layouts/default.vue` file to define the basic structure of your application's layout. Include the `<slot/>` component to render page-specific content.

```vue
<template>
  <div>
    <header>
      navigation placeholder
    </header>
    <slot/>
  </div>
</template>
```

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

### Configure `baseUrl` for canonical and hreflang links

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/1.options.md

Set the base site URL for handling canonical and hreflang links. If left empty, these links will not be set automatically.

```typescript
export default defineNuxtConfig({
  typo3: {
    baseUrl: 'https://mywebsite.com'
  }
})
```

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

### Configure nuxt-typo3 with `typo3` property or runtime config

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/1.options.md

Set the base URL for the TYPO3 API. This can be done directly in the `typo3` property or via the public runtime config.

```typescript
export default defineNuxtConfig({
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com'
    }
  },
  // or
  runtimeConfig: {
    public: {
      typo3: {
        ...
      }
    }
  }
})
```

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

### Simplified Dynamic Content Element Rendering

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

A simplified way to render a dynamic content element using a shorthand version of the useT3DynamicComponent composable.

```vue
<template>
  <component :is="useT3DynamicCe(element.type)" />
</template>
```

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

### Register Custom Components with Prefix

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/00.components-overriding.md

Configure Nuxt to load custom T3 components from a specified directory and apply a prefix to them. This is useful for organizing components and avoiding naming conflicts.

```typescript
export default defineNuxtConfig({
  components: {
    dirs: [
      {
        path: '@/components/T3',
        global: true,
        prefix: 'T3'
      }
    ]
  }
})
```

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

### Configure API settings for nuxt-typo3

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/1.options.md

Define API connection details including base URL, headers, credentials, proxy settings, and custom endpoints for initial data fetching.

```typescript
export default defineNuxtConfig({
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com',
      headers: {},
      credentials: 'omit',
      proxyHeaders: false,
      allowQuery: true,
      endpoints: {
        initialData: '?type=834',
        initialDataFallback: '/?type=834'
      }
    },
  }
})
```

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

### Configure .npmrc for yarn/pnpm

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/join-eap/1.configuration.md

Configure your .npmrc file for yarn or pnpm to access private @t3headless packages. Note that yarn/pnpm may require additional instance-level configuration.

```bash
@t3headless:registry=https://git.macopedia.pl/api/v4/packages/npm/
//git.macopedia.pl/api/v4/packages/npm/:_authToken=${NPM_TOKEN}
//git.macopedia.pl/api/v4/projects/811/packages/npm/:_authToken=${NPM_TOKEN}
```

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

### Add nuxt-typo3 Module to Existing Project

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/0.index.md

Add the nuxt-typo3 dependency to your project using the nuxi module add command. This snippet shows the command to add the module.

```bash
npx nuxi@latest module add typo3
```

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

### useT3Meta

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Meta.md

The `useT3Meta` composable provides reactive computed properties for accessing different types of meta data. It includes `metaData`, `headData` for Nuxt's `useHead`, `twitter` for Twitter card meta tags, `opengraph` for Open Graph meta tags, and `base` for fundamental attributes like description and robots.

```APIDOC
## useT3Meta

### Description
Composable to get all meta information.

### Type Signature
```typescript
export declare const useT3Meta: () => {
  metaData: ComputedRef<T3Meta>;
  /**
   * TYPO3 head attributes for Nuxt Head
   */
  headData: ComputedRef<ReactiveHead>;
  /**
   * TYPO3 Twitter meta data
   */
  twitter: ComputedRef<Meta[]>;
  /**
   * TYPO3 Open Graph meta data
   */
  opengraph: ComputedRef<Meta[]>;
  /**
   * TYPO3 base attributes (description, robots, generator)
   */
  base: ComputedRef<Meta[]>;
};
```

### Example Usage
```vue
<script setup lang="ts">
import { useHead } from '#imports';
import { useT3Meta } from '#typo3/composables/useT3Meta';

const { headData } = useT3Meta();
useHead(headData);
</script>
```
```

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

### Default Catch-all Route Page View Implementation

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/0.override-page.md

This is the default implementation of the `[...slug].vue` page in Nuxt-TYPO3, used to handle dynamic page requests and render content from the TYPO3 API.

```vue
<template>
  <NuxtLayout :name="frontendLayout">
    <T3BackendLayout
      v-if="pageData?.content"
      :name="backendLayout"
      :content="pageData.content"
    />
  </NuxtLayout>
</template>

<script setup lang="ts">
const { headData, pageData, backendLayout, frontendLayout } = await useT3Page()
useHead(headData);
definePageMeta({
  layout: false
})
</script>
```

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

### Configure internationalization (i18n) settings

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/1.options.md

Set the default locale and an array of available locales for multi-language support. These are used for URL detection.

```typescript
export default defineNuxtConfig({
  typo3: {
    i18n: {
      default: 'en',
      locales: ['en']
    }
  }
})
```

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

### useT3DynamicComponent Signature

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

Defines the signature and default parameters for the useT3DynamicComponent composable.

```APIDOC
## useT3DynamicComponent

### Description
Resolves a T3 component dynamically based on the provided type, prefix, and mode.

### Signature
```ts
export const useT3DynamicComponent = (
  { type, prefix, mode }?: DynamicComponentParams
) => ConcreteComponent | string
```

### Parameters
#### DynamicComponentParams
- **type** (string) - Optional - The type of the component to resolve. Defaults to 'Default'.
- **prefix** (string) - Optional - The prefix for the component name. Defaults to 'T3Ce'.
- **mode** (string) - Optional - The rendering mode (e.g., 'Lazy'). Defaults to 'Lazy'.

### Returns
- **ConcreteComponent | string** - The resolved component or its name as a string.
```

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

### Basic Vue.js Component for Content Element

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/4.new-ce.md

This is the initial structure for a custom Vue.js content element component. Ensure the component name is prefixed with 'T3Ce' and placed in the 'components/global' directory.

```vue
<template>
  <div>Custom Content element</div>
</template>
```

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

### Register Custom Components Directory

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/00.components-overriding.md

Configure Nuxt to recognize your custom T3 components by adding their directory to the global components list. This allows Nuxt to automatically load and use your components.

```typescript
export default defineNuxtConfig({
  components: {
    dirs: [
      {
        path: '@/components/T3',
        global: true
      }
    ]
  }
})
```

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

### Render Dynamic Content Element by Type

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

Renders a dynamic content element using the useT3DynamicComponent composable with specified type, prefix, and lazy mode.

```vue
<template>
  <component
    :is="useT3DynamicComponent({
      type: element.type
      prefix: 'T3Ce',
      mode: 'Lazy'
    })"/>
</template>
```

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

### Configure nuxt.config.ts

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/10.forms.md

Add the '@t3headless/nuxt-typo3-forms' module to your nuxt.config.ts file alongside the main '@t3headless/nuxt-typo3' module. Ensure your TYPO3 API base URL is correctly set.

```typescript
export default defineNuxtConfig({
  modules: [
    '@t3headless/nuxt-typo3',
    '@t3headless/nuxt-typo3-forms'
  ],
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com'
    }
  }
})
```

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

### Export NPM Token

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/join-eap/1.configuration.md

Export your NPM authentication token as a global environment variable. This token is required to access private packages from the @t3headless scope.

```bash
export NPM_TOKEN=YOUR_TOKEN_HERE
```

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

### Create Pinia Store for TYPO3 Data

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/1.usePiniaStore.md

Define a Pinia store named 'typo3' to hold initial TYPO3 data and page data. This store will be used to manage the state fetched from the TYPO3 API.

```typescript
import { defineStore } from "pinia";
import type { T3InitialData, T3Page } from "@t3headless/nuxt-typo3";

interface State {
  initialData: T3InitialData | null,
  pageData: T3Page | null
}

export const useT3Store = defineStore('typo3', {
  state: (): State => ({ initialData: null, pageData: null }),
})
```

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

### Using NuxtLayout in app.vue

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/2.navigation.md

Edit `app.vue` to wrap your main page content with the `<NuxtLayout>` component, ensuring your default layout is applied.

```vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

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

### Configure features for nuxt-typo3

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/1.options.md

Enable or disable default features like i18n middleware for language detection and debug mode.

```typescript
export default defineNuxtConfig({
  typo3: {
    features: {
      i18nMiddleware: true,
      debug: false
    }
  }
})
```

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

### useT3Api Type Definition

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Api.md

Defines the structure and available methods for the useT3Api composable, including fetching page and initial data, and setting API options.

```typescript
export const useT3Api = (
  path?: string,
  options?: FetchOptions<'json'>
): {
  /**
   * TYPO3 Page Data
   */
  pageData: Ref<T3Page>
  /**
   * TYPO3 Initial Data
   */
  initialData: Ref<T3InitialData>
  /**
   * Sharable $fetch client for TYPO3 API
   */
  $fetch: T3Api['$fetch']
  /**
   * Get TYPO3 Page data
   */
  getPage(path: string, options?: FetchOptions): Promise<T3Page>
  /**
   * Get TYPO3 Initial data
   */
  getInitialData(path?: string, options?: FetchOptions): Promise<T3InitialData>
  /**
   * Set API Headers
   */
  setHeaders(headers: Record<string, string>): void
  /**
   * Set API Clinet global options
   */
  setOptions<T extends keyof FetchOptions<'json'>>(key: T, value:FetchOptions<'json'>[T]): void
}

```

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

### Configure nuxt-typo3 in nuxt.config.ts

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/0.index.md

Add the nuxt-typo3 module to your Nuxt configuration and set the TYPO3 API base URL. Ensure you replace the placeholder URL with your actual API endpoint.

```typescript
export default defineNuxtConfig({
  modules: ['@t3headless/nuxt-typo3'],
  typo3: {
    api: {
      baseUrl: 'https://your.typo3.api.com'
    }
  }
})
```

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

### Vue.js Template for Content Element Rendering

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/4.new-ce.md

Renders the content element's properties in the template. Uses `T3HtmlParser` for rendering rich text content and displays the first asset if available.

```vue
<template>
    <h2> {{ header }} </h2>
    <T3HtmlParser :content="bodytext"/>
    <img v-if="assets?.[0]" :src="assets[0].publicUrl">
</template>
```

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

### Create i18n.ts plugin for language synchronization

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/6.useNuxtI18n.md

This plugin synchronizes nuxt-typo3 language changes with @nuxtjs/i18n by setting the initial locale and listening for language change hooks.

```typescript
export default defineNuxtPlugin(async (nuxtApp) => {
  const { $i18n } = useNuxtApp()
  const { currentLocale } = useT3i18n()

  await $i18n.setLocale(currentLocale.value);

  nuxtApp.hook('t3:i18n', async (newLocale) => {
    await $i18n.setLocale(newLocale)
  })
})
```

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

### Update Pinia Store with Nuxt Hooks

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/1.usePiniaStore.md

Implement a Nuxt plugin to hook into TYPO3 data events and update the Pinia store. This ensures the store is synchronized with the latest initial and page data.

```javascript
import { useT3Store } from '~~/store/typo3'

export default defineNuxtPlugin((nuxtApp) => {
  const { pageData, initialData } = useT3Api()
  const store = useT3Store()

  store.initialData = initialData.value
  store.pageData = pageData.value

  nuxtApp.hook('t3:initialData', (data) => {
    store.initialData = data
  })
  nuxtApp.hook('t3:page', (data) => {
    store.pageData = data
  })
})
```

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

### TypeScript Type Definition for useT3Options

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Options.md

Defines the structure and available methods for the useT3Options composable, including access to all module options and site-specific settings.

```typescript
export const useT3Options = (): {
  /**
   * Get all module options
   */
  options: T3Options
  /**
   * Get site settings
   */
  getSiteOptions: (domain?: string) => T3Site
  /**
   * Get current site options computed value
   */
  currentSiteOptions: ComputedRef<T3Site>
}
```

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

### Display TYPO3 API Data on Error Page

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/9.error-handling.md

For 404 errors, this snippet shows how to fetch fallback page data from the TYPO3 API and display it using T3BackendLayout. Ensure 'fetchOnInit' is set to false to manually control data fetching.

```vue
<template>
  <NuxtLayout>
    <div class="container">
      <h1>{{ error.statusCode }}</h1>
    </div>
    <T3BackendLayout
      v-if="pageDataFallback"
      :name="pageDataFallback.appearance.backendLayout"
      :content="pageDataFallback.content"
    />
  </NuxtLayout>
</template>
<script setup lang="ts">
import { H3Error } from 'h3'
const props = defineProps({
  error: Object as () => H3Error
})

const { pageDataFallback, headData } = await useT3Page({
  fetchOnInit: false
})
</script>
```

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

### Replace NuxtWelcome with NuxtPage in app.vue

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/1.page.md

Modify your `app.vue` file to use the `<NuxtPage/>` component. This is essential for rendering page content fetched from the TYPO3 API.

```vue
// app.vue
<template>
  <NuxtPage/>
</template>
```

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

### Add Global Type Declaration

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/2.types-extending.md

Extend the global `T3InitialData` interface by adding a `typo3-types.d.ts` file to your project's root directory. This allows you to add custom keys to the initial data object.

```typescript
declare module '@t3headless/nuxt-typo3' {
    interface T3InitialData{
        yourkey: string
    }
}

export {}
```

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

### Custom Frontend Layout Component

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/1.layouts.md

A basic Vue.js component for a custom frontend layout named 'layout-1'. It includes a header, footer, and a slot for the main content.

```vue
<template>
  <div>
    <header>
      My header
    </header>    
    <slot /> <!-- Remember about the slot -->
    <footer>
      My Footer
    </footer>
  </div>
</template>
```

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

### Configure nuxt-typo3 Module in nuxt.config.ts

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/1.introduction/0.index.md

Configure the nuxt-typo3 module in your Nuxt configuration file. Ensure the API base URL is set correctly.

```typescript
export default defineNuxtConfig({
  modules: ['@t3headless/nuxt-typo3'],
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com'
    }
  }
})
```

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

### Set Custom Headers for TYPO3 Requests

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/4.headers.md

Utilize the `useT3Api` composable and its `setHeaders` function to add custom headers to all requests made by the `nuxt-typo3` library. For specific endpoints, consider using interceptors.

```typescript
export default defineNuxtPlugin(() => {
  const { setHeaders } = useT3Api()

  setHeaders({
    'my-custom-header': 'true'
  })
})
```

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

### useT3Meta Type Definition

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Meta.md

Defines the return type of the useT3Meta composable, outlining the available computed properties for meta data.

```typescript
export const useT3Meta = (): {
  metaData: ComputedRef<T3Meta>
  /**
   * TYPO3 head attributes for Nuxt Head
   */
  headData: ComputedRef<ReactiveHead>
  /**
   * TYPO3 Twitter meta data
   */
  twitter: ComputedRef<Meta[]>
  /**
   * TYPO3 Open Graph meta data
   */
  opengraph: ComputedRef<Meta[]>
  /**
   * TYPO3 base attributes (description, robots, generator)
   */
  base: ComputedRef<Meta[]>
} 
```

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

### Render Navigation Links

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/2.navigation.md

Conditionally render navigation links in `layouts/default.vue` using `NuxtLink` if navigation data is available. Each link uses `link` for the URL and `title` for the display text.

```vue
<template>
  <div>
    <header v-if="navigation">
      <NuxtLink
        v-for="{ link, title } in navigation"
        :key="link"
        :to="link"
      >
        {{ title }}
      </NuxtLink>
    </header>
    <slot />
  </div>
</template>
```

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

### Proxy Request Headers to TYPO3

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/4.headers.md

Configure the `proxyReqHeaders` option in `nuxt.config.ts` to proxy specific headers from the Node.js Request to the TYPO3 API. All headers should be provided in lower-case.

```typescript
export default defineNuxtConfig({
  modules: [nuxtTypo3],
  typo3: {
    api: {
      proxyReqHeaders: ['referer'],
    },
  },
})
```

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

### Configure Vue I18n in i18n.config.ts

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/6.useNuxtI18n.md

Define your Vue I18n configuration, including legacy mode, locale, and messages for different languages.

```typescript
export default defineI18nConfig(() => ({
  legacy: false,
  locale: "en",
  messages: {
    en: {
      welcome: "Welcome",
    },
    pl: {
      welcome: "Witamy",
    }
  }
}))
```

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

### Configure i18n Settings

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/3.i18n.md

Define the default language and the list of available locales in your nuxt.config.js file. This configuration is used by nuxt-typo3 to detect the current language.

```javascript
typo3: {
  i18n: {
    default: 'en',
    locales: ['en', 'pl']
  }
},
```

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

### useT3DynamicComponent Type Definition

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3DynamicComponent.md

Defines the type signature for the useT3DynamicComponent composable, specifying its parameters and return type.

```typescript
export const useT3DynamicComponent = (
  {
    type,
    prefix,
    mode
  }: DynamicComponentParams = {
    type: 'Default',
    prefix: 'T3Ce',
    mode: 'Lazy'
  }
) : ConcreteComponent | string
```

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

### useT3i18n Type Definition

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3I18n.md

Defines the TypeScript signature for the useT3i18n composable, outlining its available methods and reactive properties.

```typescript
export const useT3i18n = (
  path?: string | undefined
): {
  /**
   * Get current locale code by path
   */
  getLocale: (path?: string) => string
  /**
   * Set new locale and update initialData
   */
  setLocale: (localeCode: string) => void
  /**
   * Initialize locale (check if different than default)
   */
  initLocale: () => void
  /**
   * Return current locale state
   */
  currentLocale: Ref<string>
  /**
   * Get current locale object
   */
  getCurrentLocaleData: () => T3I18N | null
  /**
   * Return locale code for url path
   */
  getPathWithLocale: (path?: string) => string
}
```

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

### Vue.js Component with Props Interface

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/2.from-scratch/4.new-ce.md

Defines the props interface for the custom content element, extending `T3CeBaseProps` and specifying custom fields like `bodytext` and `assets`. Use `withDefaults` for default prop values.

```vue
<script setup lang="ts">
import type { T3CeBaseProps, T3File } from '@t3headless/nuxt-typo3';

interface T3CeImageWithDescription extends T3CeBaseProps {
    bodytext: string,
    assets?: T3File[]
}
const props = withDefaults(defineProps<T3CeImageWithDescription>(), {
  bodytext: ''
})
</script>
```

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

### useT3Page Composable Type Definition

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/5.composables/useT3Page.md

Defines the type signature for the useT3Page composable, outlining its parameters and return type, including page data, fetching functions, and layout information.

```typescript
const useT3Page: (options?: {
    route?: RouteLocationNormalized
    fetchOnInit?: boolean;
}) => Promise<{
    pageDataFallback: ComputedRef<T3Page | null>;
    pageData: Ref<T3Page | null>;
    getPageData: (path: string) => Promise<{
        data: Ref<T3Page | null>;
        error: Ref<Error | null>;
    }>;
    headData: ComputedRef<ReactiveHead>
    backendLayout: string
    frontendLayout: string | undefined
}>
```

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

### Configure @nuxtjs/i18n in nuxt.config.ts

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/4.integrations/6.useNuxtI18n.md

Add @nuxtjs/i18n to your Nuxt modules and configure its options, including locales, default locale, and Vue I18n configuration.

```typescript
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    detectBrowserLanguage: false,
    locales: ['en', 'pl'],
    defaultLocale: 'en',
    vueI18n: './i18n.config.ts'
  }
})
```

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

### Use Extended Component Props

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/2.types-extending.md

Define component props using the custom extended types, such as `CeBulletsProps`, to ensure correct prop handling at runtime.

```vue
<script lang="ts" setup>
import { CeBulletsProps } from 'typo3-types';
const props = defineProps<CeBulletsProps>()
</script>
```

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

### Extend Component Interfaces

Source: https://github.com/typo3-headless/nuxt-typo3/blob/main/docs/content/3.guide/2.types-extending.md

Workaround for extending component interfaces by creating custom types that extend nuxt-typo3 types. This is necessary because Vue.js may issue warnings about undefined props at runtime, even if IDEs recognize the extended types.

```typescript
import type { T3CeBulletsProps } from "@t3headless/nuxt-typo3"

// extend T3CeBaseProps
type CeBaseProps = {
  summary: string
}

// extend T3CeBulletsProps
export type CeBulletsProps = T3CeBulletsProps & CeBaseProps & {
  additionalKeyForBullets?: string
}
```